Boostrap-CSS

1、网格布局

关键字：

• container 布局居中显示自适应

• container-fluid 布局宽度满屏自适应

  • row 行（可以包含多个列）

  • loc 列

    • col-xs- 最小屏

    • col-sm- 中小屏

    • col-md- 中屏

    • col-lg- 最大屏

2、表格 table

关键字：

• table-responsive 响应式表格布局（里面可以嵌套任意的table），就是用来嵌套table的

table类关键：

• table 为表格添加基本样式

• table-striped 添加斑马线条纹（每一个的颜色分开）

• table-bordered 给表格添加边框

• table-condensed 让表格更加紧凑

• table-hover 鼠标经过表格时，行背景颜色发生变化

tr、td和th类关键字：

• active 默认选中

• success 成功操作（浅绿色背景）

• info 信息变化（浅蓝色背景）

• warning 警告操作（浅黄色背景）

• danger 危险操作（粉红色）

 

3、表单 form-group

创建表单关键字：

• role="form" 在form表单中添加

• form-group 给嵌套在form里的div添加，用来个表单分组

• form-control 给文本元素添加该类（这个类会使表单宽度100%适应）

扩展关键字：

• form-inline 水平显示（form）

• form-horizontal 垂直显示（form）

复选框、单选框关键类：

• checkbox 复选框类

• radio 单选框类

• checkbox-inline 复选框显示在一行

• radio-inline 单选框显示在一行

 

4、按钮 btn

按钮类关键字：

• btn

• btn-group 包裹在button外层

  • btn-group-vertical 用来垂直显示按钮栏btn-group-lg 最大按钮

  • btn-group-sm 中等按钮

  • btn-group-xs 最小按钮

• btn-default 按钮的默认样式类

• btn-toolbar 嵌套在.btn-group类外层

 

5、图片

基本类关键字：

• img-rounded 圆角图片

• img-circle 圆形图片

• img-thumbnail 给图片添加一点内边距和一个灰色的边框（缩略图）

• img-responsive 响应式图片（根据屏幕宽度适应大小）

 

6、响应式实用工具

显示关键字：

• visible-xs-* 超小屏下显示

• visible-sm-* 小屏下显示

• visible-md-* 中等屏幕下显示

• visible-lg-* 大屏幕下显示

 

隐藏关键字：

• hidden-xs-* 超小屏下隐藏

• hidden-sm-* 小屏下隐藏

• hidden-md-* 中等屏幕下隐藏

• hidden-lg-* 大屏幕下隐藏