《深入理解Bootstrap》读书笔记（一）

栅格系统

实现原理

通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询。

通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 栅格系统是如何工作的：

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

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

3、内容应该放置在列内，且唯有列可以是行的直接子元素。

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

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

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

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 栅格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：

让我们来看下面这行代码：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

基本用法

列组合

可以通过更改数字来合并列。

<div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
</div>

它的实现是通过左浮动和宽度百分比，源码如下：

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }

列偏移

使用.col-md-offset-*就可以实现将列偏移到右侧，这些类会把一个列的左外边距（margin-left）增加 * 列，其中 * 范围是从 1 到 11。

但是，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

列嵌套

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

在下面的实例中，布局有两个列，第一列又嵌套了一个新行，并且偏移到了中间位置。

<div class="container">
    <div class="row">
        <div class="col-md-8" style="background-color: lavender">第一层第一列：col-md-8
            <div class="row" >
                <div class="col-md-6 col-md-offset-3" style="background-color: lavenderblush">第二层col-md-6并且偏移至中间</div>
            </div>
        </div>
        <div class="col-md-4" style="background-color: yellow">第一层第二列：col-md-4</div>
    </div>
</div>

列排序

列排序就是改变列的方向，改变左右浮动然后设置浮动的距离。使得我们可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

可以通过.col-md-push-* 和 .col-md-pull-* 来实现，其中 * 范围是从 1 到 11。

列排序运行效果如图：



可以理解为：人是在网页的最左边，然后要把col-md-3拉（pull）过来，把col-md-9推（push）过去。

响应式栅格

下表总结了栅格系统如何跨多个设备工作：

跨设备组合定义

我们会遇到一种样式在其他尺寸的设备中是不起作用的。所以要在一个元素上应用不同类型的样式，也就是给一个元素添加多个类名，以适配不同尺寸的屏幕。

    <div class="row">
        <div class="col-sm-12 col-md-8" style="background-color: lavenderblush">col-sm-12 col-md-8</div>
        <div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
        <div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
        <div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-6" style="background-color: lavenderblush">col-sm-6</div>
        <div class="col-sm-6" style="background-color: lavenderblush">col-sm-6</div>
    </div>

清除浮动

    <div class="row">
        <div class="col-sm-3 col-xs-6" style="background-color: red">div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6</div>
        <div class="col-sm-3 col-xs-6" style="background-color: red">div2:col-sm-3 col-xs-6</div>
        <div class="col-sm-3 col-xs-6" style="background-color: green">div3:col-sm-3 col-xs-6</div>
        <div class="col-sm-3 col-xs-6" style="background-color: green">div4:col-sm-3 col-xs-6</div>
    </div>

上述代码在超小型设备中并没有显示出我们想要的每行两个div的效果。这是因为所有的col-样式都是左浮动的，第三个div开始换行的时候，由于第一个div高度过高，所以第三个就在右边紧挨着显示了。

为了解决这个问题，就要用到clearfix样式。

源码中clearfix如下：

.clearfix:before,
.clearfix:after{
    display: table;
    content: " ";
}
.clearfix:after{
    clear:both;
}

利用clearfix清除浮动后，再添加一个visible-xs样式，使得只有在超小型屏幕中才有这种效果。

    <div class="row">
        <div class="col-sm-3 col-xs-6" style="background-color: red">div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6</div>
        <div class="col-sm-3 col-xs-6" style="background-color: red">div2:col-sm-3 col-xs-6</div>
        <div class="clearfix visible-xs">清除浮动，设置额外的小设备可见</div>
        <div class="col-sm-3 col-xs-6" style="background-color: green">div3:col-sm-3 col-xs-6</div>
        <div class="col-sm-3 col-xs-6" style="background-color: green">div4:col-sm-3 col-xs-6</div>
    </div>

Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。

需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。