bootstrap 网格系统学习

Bootstrap 官方文档中有关网格系统的描述：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

从上面的描述上可以知道：

1，网格系统是把屏幕定义为12列，根据屏幕百分比动态调整大小。

2，屏幕定义分为4种类型：

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

3，所有的网络布局必须定义在

container类和row类里面。

看下面的网络系统结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
   </div>
   <div class="row">...</div>
</div>

注意：1，row类里面的列数之和必须小于或等于12，小于12时，从左到右依次排列。不足12列时，补空。第一行是3列和5列。右边空出4列。第二行是满屏显示。

2，超过12列时，从要超过的下一列开始，换行往下排。

    <div class="row">
        <div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>

        <div class="col-md-7" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>

        <div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.
            </p>
        </div>
    </div>

3，列嵌套 请在列里使用row类。然后再在嵌套的列里满足12列时，和网络系统一样。

4，列偏移，列偏移是向左外边距 margin增加配置的列数。

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1到 11。

在下面的实例中，我们有 <div class="col-md-6">..</div>，我们将使用 .col-md-offset-3 class 来居中这个 div。