Bootstrap

Bootstrap栅格系统的工作原理：

1. “行（row）”必须包含在.container(固定宽度)或.container-fluid（100%宽度）中，以便为其赋予合适的排列(aligment)和内补(padding).
2. 通过“行（row）”在水平方向创建一组“列（column）”。
3. 你的内容应当放置在“列（column）”内，并且只有“列（column）”可以作为“行（row）”的直接子元素。
4. 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
5. 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
6. 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
7. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
8. 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
9. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
   栅格参数
   
   页面主体
   Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 body 元素和所有段落元素。另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
   中心内容
   通过添加 .lead 类可以让段落突出显示。
   内联文本元素
   被删除的文本—-对于被删除的文本使用 del标签。
   无用的文本—-对于没用的文本使用 s 标签。
   插入文本—-额外插入的文本使用 ins 标签。
   带下划线的文本——为文本添加下划线，使用 u 标签。
   用户输入—-通过 kbd 标签标记用户通过键盘输入的内容。
   程序输出—通过 samp标签来标记程序输出的内容。
   条纹状表格—-通过 .table-striped 类可以给 tbody之内的每一行增加斑马条纹样式。
   紧缩表格—–通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
   状态类—通过这些状态类可以为行或单元格设置颜色。
   
   响应式表格
   将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
   表单
   单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 input、textarea和 select 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
   内联表单
   为 form 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。