序:
1、Bootstrap内包含了很多CSS样式和JS插件,可以在我们的HTML文件中先导入Bootstrap的CSS文件和JS文件,然后通过标签继承预设样式的类名来获取样式效果,同时在Bootstrap的官网文档中cv相应的代码实现具体样式和动态效果。
2、Bootstrap的JS插件是依赖于jQuery语法实现的,所以导入Bootstrap的JS文件之前需要已经导入了jQuery文件,相关代码才会生效。
一、布局容器:使用Bootstrap制作页面时,可以开始先用布局容器来规划整体布局。
1、.container:两侧留白。
2、.container-fluid:两侧不留白。
二、栅格模式
1、.row:将一个区域划分为12个相等的单位区域。
2、.col-md-6:在已划分好的区域内声明子区域所占单位区域的个数。
3、匹配当前屏幕的栅格显示:如果都使用,就可以兼容所有硬件媒体的屏幕。
①.col-xs-:手机屏幕。
②.col-sm-:平板屏幕。
③..col-md-:普通显示器。
④.col-lg-:特大显示器。
4、.col-md-offset-3:向右移动若干单位区域。
三、排版:Bootstrap将所有原生的HTML标签的文本字体统一设置成了人类视觉比较习惯的样式。
四、颜色
1、.active:一般用于鼠标悬停反馈,浅灰色。
2、.success:一般用于提示成功,浅绿色。
3、.info:一般用于普通提示,浅蓝色。
4、.warning:一般用于提醒或警示,浅黄色。
5、.danger:一般用于提示错误或不安全,浅红色。
五、表格
1、.table:基本样式,无论使用其他何种表格样式,都需要先使用基本样式。
2、.table-hover:悬停样式。
3、.table-striped:斑马纹间隔样式。
4、.table-bordered:表格边框。
六、表单
1、.text-center:文本居中。
2、.form-control:美化输入框,并拉伸为最宽,表单中checkbox和radio标签一般不使用该样式,其他标签建议使用。
3、.has-error:输入框边框变红,一般用于提示错误,不是直接给input标签使用的,需要在外面套一个标签使用该样式。
七、按钮:可以把任意标签设置为按钮的样式。
1、.btn:基本样式,无论使用其他何种按钮样式,都需要先使用基本样式。
2、.btn-default:一般用于默认项,白色。
3、.btn-primary:一般用于首选项,深蓝色。
4、.btn-success:一般用于成功项,浅绿色。
5、.btn-info:一般用于普通项,浅蓝色。
6、.btn-warning:一般用于提醒项,浅黄色。
7、.btn-danger:一般用于危险项,浅红色。
8、.btn-lg:大按钮。
9、.btn-sm:小按钮。
10、btn-xs:超小按钮。
11、btn-block:拉伸为最宽,并且转换为板块级标签。
八、图标:可以直接用span标签继承对应的类名获取效果,并且可以用修改文本颜色的方式修改该图标的颜色。
九、导航条:
1、.navbar navbar-inverse:黑色导航条。
2、.navbar navbar-default:白色导航条。
十、分页器:直接CV,可以另外给li标签加上.active,将其转换为激活态。
十一、弹框:https://lipis.github.io/bootstrap-sweetalert/