Bootstrap 学习笔记 之网格系统

使用网格系统布局的一些注意事项（实现原理）//后面为自己理解的部分：

行必须放置在.containerclass内，以便获得适当的对齐（alignment）和内边距（padding）。

//添加的内容必须放到含有.container样式的标签内，这样可以使用框架已经写好的样式；

使用行来创建列的水平组。

//就是说列col要放到行row里面，比如：

//

<divclass="container">
<h1>Hello,world!</h1>

<divclass="row">

<divclass="col-md-4"style="background-color:#dedef8;box-shadow:
inset1px-1px1px#444,inset-1px1px1px#444;">
<p>内容、内容、内容</p>

</div>

<divclass="col-md-8"style="background-color:#dedef8;box-shadow:
inset1px-1px1px#444,inset-1px1px1px#444;">
<p>内容、内容、内容</p>
</div>
</div>

内容应该放置在列内，且唯有列可以是行的直接子元素。//.col紧跟.row之后

预定义的网格类，比如.row和.col-xs-4，可用于快速创建网格布局。LESS混合类可用于更多语义布局。

//见代码需要一提的就是，这里col里面的-xs指的是手机设备，以此类推-sm是平板电脑类的(>=768px)，-md是一般电脑显示器（中型>992px）-lg是大型显示器（>=1200px;）

列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过.rows上的外边距（margin）取负，表示第一列和最后一列的行偏移。

网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个.col-xs-4。

//这里的列.col后缀比如4,3,6,9等加起来要等于或者小于12即可满足网格系统的布局。
比如<divclass="col-md-3"></div>和<divclass="col-md-9"></div>或<divclass="col-md-7"></div>和<divclass="col-md-5"></div>。但要确保总和总是12。（其实是不能超过12）

列重置中提到了一个响应式工具：

class="visible-xs"——>在特别小型设备上可见

class="visible-sm"——>在小型设备上可见

class="visible-md"-—>在中型设备上可见

class="visible-lg"——>在大型设备上可见

加上这个类以后可以调整浏览器的窗口大小