热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

功能强大的Bootstrap使用手册(一)

功能强大的Bootstrap使用手册(一):BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式。现在我给大家介绍一些使用BootStrap的步骤和一些常用

BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式。
现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西。

1.编写头部

2.引入js

这个可以写在body

3.使用container类
container类是一个常用的div类
主要是用居中功能

hello

4.使用栅格化系统

栅格化系统是BootStrap一个非常常用的一个布局系统
简单的使用如下

.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4

可以看到栅格化系统可以根据不同设备调整不同宽度

5.使用表格

表格标题 表格标题 表格标题
表格内容 表格内容 表格内容
表格内容 表格内容 表格内容
表格内容 表格内容 表格内容

如果是想某一格变颜色也可以在th标签内加类像tr一样

6.使用表单

最基本的用法如下

Example block-level help text here.

如果将form的类设为form-inline则将所有元素显示在同一行

如果将form的类设为form-horizontal则每个form-group显示一行,不过要自己设置宽度

我们通常在注册账号时,信息错误或者正确他会在旁边提示,而且输入框的颜色会不同
Bootstrap给我们提供了这个很实用的功能

(success)
(warning)
(error)

7.按钮

按钮是必不可少的一样东西

类中还可以添加尺寸

以上就是Bootstrap的使用步骤和常用用法
用上这个框架后不仅开发的速度上去了,质量也提升了。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


推荐阅读
author-avatar
lingling2502852417
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有