网格系统

一、实现原理

1. 通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

二、工作原理

1. 数据行（.row）必须包含在容器(.container)中，以便为其赋予合适的对齐方式和内距（padding）。
2. 在行（.row）中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12
3. 具体内容应放放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素。
4. 通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响
   
5. 实现列组合方式非常简单，只涉及两个CSS两个特性：浮动(float:left)与宽度百分比(.col-md-6{width:50%;})。

三、使用

1. 
   )
2. Bootstrap 在中型设备中，会查找带有 md 的类，并使用它们。在大型设备中，会查找带有 lg 的类，并使用它们。
3. 响应式的列重叠：可以使用.clearfix class和响应式实用工具来解决。

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
/*
提供了 3 种不同的列布局，分别适用于三种设备。
在手机上，它将是左边 25% 右边 75% 的布局。
在平板电脑上，它将是 50%/50% 的布局。
在大型视口的设备上，它将是 33%/66% 的布局。
*/

四、列偏移

1. 使用.col-md-offset-*类
2. 这个类会把一个列的左外边距（margin）增加 * 列，其中 *范围是从1到11，并且要保证列与偏移列的总数不超过12.
3. 如果超过12会发生行断裂，这一列会移到下一行。

五、列排序

1. 通过添加类”.col-md-push-* “和”.col-pull-* “来实现向右/左移动 *列。
2. Bootstrap通过设置left和right来实现定位效果。

六、列的嵌套

<div class="container">
    <div class="row">
        <div class="col-md-8">
        我的里面嵌套了一个网格
            <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
          </div>
        </div>
    <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
    我的里面嵌套了一个网格
        <div class="row">
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
        </div>
    </div>
    </div>
</div>