Bootstrap框架——栅格系统

1、首先，我们先进入vs。打开文件夹（文件夹需要提前在桌面上新建好），然后新建一个html文档，改一下title为Bootstrap框架。

2、打开桌面新建的文件夹，在js里面放入bootstrap所需要的css和js。

3、然后继续打开vs文件，去新建的html文件里边，用外部样式，引入bootstrap的css样式表。

4、再在body标签里边，引入bootstrap的js文件，我们先引入这些的原因是因为为引入bootstrap的插件做好准备工作，不然到后面出现问题很麻烦。接下来我们就先打开bootstrap的离线手册，去看看今天所要说的内容吧。

5、学习bootstrap之前，我们先要学习一个栅格系统，便于bootstrap布局。

6、栅格系统它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)，支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺寸的布局，接下来我们就先举一个例子。

7、例子使用BootStrap预定义的栅格系统，演示了在.container容器内建立了三个等宽的列，并且分别兼容在small(极窄宽度网页)、medium(中等宽度网页)、large(宽网页)、extra large(超宽网页)四种设备类型-即无论网页宽度如何，这三个列都是恒在呈现的。现在没有给这些设置css样式所以看不出来，我们给它设置背景色和边框就可以看出来了。

8、接下来我就给row一个类名为neirong，然后引入一个css样式表，给row下面的div都设置背景色和边框。

9、接下来我们讲讲它的工作原理吧，内容有点多，一点一点看完就了解了。

10、栅格系统提供了集中内容居中、水平填充网页内容的方法，就是：.container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐。

11、行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。

12、网页开发者的呈现内容必须放置在列(.col-*中，而且只有列可以是行的直接子元素(不可以在.col-*以上添加呈现内容。）

13、你可能注意到.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4就是正确的。