Bootstrap3之美02-Grid简介和应用_html/css_WEB-ITnose

本篇主要包括：

■ Grid简介
■ 应用Grid
■ Multiple Grids

Grid简介

Bootstrap中，把页面分成12等份，这就是所谓的Grid。

在Bootstrap中，用类名控制，这些类型遵循".col-xx-6"类似的形式。

2个6就占满整个页面。所以，类名最后面的数字表示要占几个格子。

又比如，3个4也占满整个页面。

又比如，4个3也占满整个页面。

又比如，6个2也占满整个页面。

另外，类似".col-xx-10 .col-xx-offset-2"这样的类名，offset表示偏移，2表示向右偏移2个单元格。

以上值得注意的是：在倒数第二行，当把".col--xx-3"放在".col-xx-3 .col-xx-offset-2"之后的时候，由于超过了12个单元格的大小，".col--xx-3"会自动跑到下一行的最开头。

应用Grid

id为body的section如何应用Grid呢？
→在index.html中，给id为body的section加上class="container"属性
→给id为main的section加上class="col-md-8"属性
→给id为sidebar的section加上class="col-md-4"属性

如何让header和footer部分也应用Grid呢？
→去掉id为page的div的class="container"属性，变为：