Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
一些基本的用法：
Normalize css.Reset 重置，浏览器兼容
font-family：sans-serif(无衬线字体)
衬线字体指的是有装饰效果的字体比如宋体
一般屏幕都是要求显示无衬线字体
自带响应式布局效果
屏幕可以分为超小、小型、中等和大型
超小 XS <768
小型 SM >768 <992
中型 MD >992 <1192/1200
大型 LG >1200
输入设置屏幕大小，用XS的设定就可以兼容其他大的屏幕
offect可以移动 把两个一起移动
push 移动 但是后面的会重叠到前面的来
pull 拉回来
如果只是初步的学习，其实可以只引入“bootstrap.min.css”这一个就可以了。其它文件都可以看成是功能的扩展和增强。
要用珊格系统呢，首先要创建一个容器，container或container-fluid.
<div class="container"> ... </div>
<div class="container-fluid">
...
</div>这相当于是创建一个<table></table>,所以接下来，要创建行和列也是情理之中的啦。
<div class="row">
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-8">col-xs-8</div>
</div>
<div class="row"></div> 这个就相当于是<tr></tr>,<div class="col-xs-4"></div>就相当于是<td></td>
col-xs-4 是代表了三个意义：col表是创建的是一个列，xs表示小屏设备，4呢，表示把一行划分成12份，它占4份。它就是用这种方法来实现布局的，所以，这和表格的布局方式多少有几分相似，但是表格呢不会根据屏幕的宽度实现自动增减列数和调整列宽，栅格系统可以看成是一个更灵活的表格。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
- “行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 - 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似
.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列（column）”设置
padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 - The negative margin is why the examples below are outdented. It‘s so that content within grid columns is lined up with non-grid content.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
.col-xs-4. - 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。