Bootstrap基础教程最新章节_赵丙秀著

2.3 使用方法

2.3.1 基本用法

栅格系统的基本使用方法如【实例2-1】所示。容器 container 包含行 row，行 row 包含列col-X-*。每行包含12栅格，如果定义的列超过12格，则自动换行。

为了获得更好的演示效果，我们在【实例2-1】的head部分添加如下代码。（注意，此代码需要写在“<link rel=＂stylesheet＂ href=＂css/bootstrap.min.css＂ />”之后。这里定义行row的底部外边距为15px，所有的列col-X-*设置了上/下内边距、背景颜色和边框。）

<style>
  .row{
      margin-bottom:15px;
      }
  [class*=＂col＂]{
      padding-top:15px;
      padding-bottom:15px;
      background-color:rgba(86,61,124,0.15);
      border:1px solid rgba(86,61,124,.2);
  }
</style>

以上代码在Chrome浏览器中的运行效果如图2-2所示。

图2-2 添加了行和列的样式

1.容器类

Bootstrap需要将页面内容和栅格系统包裹在一个布局容器中。为了使栅格具有响应性，屏幕宽度有5个响应断点：extra-small、small、medium、large 和 extra-large。具体如表2-1所示。

表2-1 屏幕宽度的响应断点及其屏幕宽度范围

Bootstrap提供了3种不同的容器，具体如下。

●.container容器：在每个响应断点处设置一个 max-width（最大宽度）。

●.container-fluid容器：在每个响应断点处设置容器宽度为100%。

●.container-{breakpoint}容器：在每个响应断点处设置容器宽度为100%，以达到指定的断点为止。其中，breakpoint的取值范围为sm（平板设备）、md（桌面显示器）、lg（大桌面显示器）和xl（超大桌面显示器）。例如，container-sm表示小于576px时，容器宽度为100%；当屏幕宽度大于等于576px时，container-sm就到达了断点，容器宽度与.container显示一致。

容器类在不同设备上的响应断点情况如表2-2所示。

表2-2 容器类的响应断点及其屏幕宽度范围

在【实例2-1】改变浏览器的宽度中，可以看到不同的效果。随着宽度的改变，页面内容的宽度随之变化。

2.列类

在以上实例中，我们使用了col-lg-1、col-lg-4等列类。Bootstrap 4中定义的列类有以下几种。

●.col：等列宽，对所有设备都是一样的，进行等分。

●col-*:*代表数字，表示占了*格。例如，col-3表示对所有设备都是一样的，这一列占3格。

●col-X-*:X表示的是设备宽度，其取值为sm（平板设备）、md（桌面显示器）、lg（大桌面显示器）、xl（超大桌面显示器）。*表示占了*格。例如，col-md-4表示当设备宽度大于等于768px时，该列占了12列中4列的宽度。具体如表2-3所示。

表2-3 栅格系统表

读者可以自行修改【实例2-1】的代码，然后改变浏览器的宽度，会发现当宽度小于992px时，有些地方会一列占一行；当宽度大于1200px时，和大桌面效果是一致的。所以，这些布局都是向后兼容的。

这是因为在定义媒体查询时，定义为min-width，即最小宽度。示例如下。

@media (min-width:768px){
}

3.栅格系统中的样式

以下是栅格系统中的各个样式。

●.container：左右各有15px的内边距。

●.row：是column的容器，最多只能放12个column。行左右各有-15px的外边距，可以抵消.container的15px的内边距。

●column：左右各有15px的内容边距，可以保证内容不紧靠浏览器的边缘。两个相邻的column的内容之间有30px的间距。

这样定义后，column里面可以很方便地嵌套row。如果要在 column中嵌套 row，则此时的column具有和container相同的特性（左右各有15px的内边距），所以此时的column就相当于container。

2.3.2 混合与匹配

在前一个例子中，都是4行，其中前3行是针对大桌面显示器（lg）设备设置的列，当在桌面显示器、平板设备、超小设备上时，是从上到下垂直排列。只有第4行使用的是.col，针对的是所有设备，所以无论设备宽度为多少，都是平均分为3列，如图2-3所示。

图2-3 桌面显示器（md）、平板设置（sm）、超小设备（xs）的显示效果

为了解决这个问题，我们在同一个元素上应用不同类型的样式，以适配不同尺寸的屏幕。代码如下，效果如图2-4～图2-6所示。

<div class=＂container＂>
    <div class=＂row＂>
        <div class=＂col-12 col-md-8＂>.col-12 .col-md-8</div>
        <div class=＂col-6 col-md-4＂>.col-6 .col-md-4</div>
    </div>
        <div class=＂row＂>
        <div class=＂col-6 col-md-8 col-lg-3＂>.col-6 .col-md-8 .col-lg-3</div>
        <div class=＂col-6 col-md-4 col-lg-3＂>.col-6 .col-md-4 .col-lg-3</div>
        <div class=＂col-6 col-md-8 col-lg-3＂>.col-6 .col-md-8 .col-lg-3</div>
        <div class=＂col-6 col-md-4 col-lg-3＂>.col-6 .col-md-4 .col-lg-3</div>
    </div>
    <div class=＂row＂>
        <div class=＂col-6＂>.col-6</div>
        <div class=＂col-6＂>.col-6</div>
    </div>
</div>

图2-4 平板设备（sm）、超小设备（xs）的显示效果

图2-5 桌面显示器 md的显示效果

图2-6 大桌面显示器（lg）、超大桌面显示器（xl）的显示效果

2.3.3 等宽列

1.基本用法

Bootstrap 4的栅格系统基于flexbox，既可以使用不带数字的.col-X（X为sm、md、lg或xl）类，来设置对应设备上的等宽列；也可以不带设备宽度前缀.col类，设置所有设备上的等宽列。

【实例2-2】 （文件 equalgrid.html）（以下为body标签里面的内容，其他与修改后的【实例2-1】相同）

<div class=＂container＂>
  <!--大于等于576px时3个等分列-->
  <div class=＂row＂>
      <div class=＂col-sm＂>1/3</div>
      <div class=＂col-sm＂>1/3</div>
      <div class=＂col-sm＂>1/3</div>
  </div>
  <!--所有设备上3个等分列-->
  <div class=＂row＂>
      <div class=＂col＂>1/3</div>
      <div class=＂col＂>1/3</div>
      <div class=＂col＂>1/3</div>
</div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-7所示。

图2-7 等宽列

2.多行等宽列

等宽列可以设置添加“.w-100”为多行等宽。但这里存在一个 Safari的flexbox缺陷，如果没有明确的flex-basis或 border的话，则可能无法工作。不过，如果浏览器是最新版本的，则不存在这个问题。

【实例2-3】 （文件equalgrid-mline.html）

<div class=＂row＂>
    <div class=＂col＂>列</div>
    <div class=＂col＂>列</div>
    <div class=＂w-100＂></div>
    <div class=＂col＂>列</div>
    <div class=＂col＂>列</div>
</div>
<div class=＂row＂>
    <div class=＂col＂>列</div>
    <div class=＂col＂>列</div>
    <div class=＂w-100 d-none d-md-block＂></div>
    <div class=＂col＂>列</div>
    <div class=＂col＂>列</div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-8所示。

图2-8 多行等宽列

说明：其中，第2行通过.d-none、.d-md-block类的配合使用，当设置设备宽度为中屏时，换新行。

3.设置一列宽度

设定一列宽度，其他列等宽。

【实例2-4】 （文件equalgrid-one.html）

<div class=＂container＂>
      <div class=＂row＂>
      <div class=＂col＂>第1列</div>
      <div class=＂col＂>第2列</div>
      <div class=＂col-6＂>第3列(指定宽度)</div>
      <div class=＂col＂>第4列</div>
      </div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-9所示。

图2-9 指定列宽与等宽结合

2.3.4 可变宽度内容

读者使用.col-X-auto（其中 X 为 xs、md、lg、xl）或.col-auto 类，可以设置根据内容调整列的宽度。

【实例2-5】 （文件autogrid.html）

<div class=＂container＂>
    <div class=＂row justify-content-md-center＂>
        <div class=＂col col-lg-2＂>第1列</div>
        <div class=＂col-md-auto＂>根据内容调整宽度</div>
        <div class=＂col col-lg-2＂>第3列</div>
    </div>
    <div class=＂row＂>
        <div class=＂col＂>第1列</div>
        <div class=＂col-md-auto＂>根据内容调整列宽</div>
        <div class=＂col col-lg-2＂>第3列</div>
    </div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-10和图2-11所示。

图2-10 可变宽度内容—大屏设备显示效果

图2-11 可变宽度内容—中屏显示效果

说明：

●.col-md-auto用于设置中屏设备，根据内容自动改变列宽。因为栅格系统向上兼容，所以在中屏、大屏和超大屏设备上有相同的效果。

●.justify-content-md-center用于设置中屏以上为水平居中。所以当在大屏设备显示时，由于第1列和第3列均为col-lg-2，占了2格，而呈现图2-11所示的效果。

2.3.5 列偏移

有时候，我们不想让两个相邻的列挨在一起，可以使用栅格系统中列偏移功能来实现，而不必设置margin属性。其类为.offset-*和.offset-X-*。

.offset-*:*为数字1～11，表示向右偏移的列数。

.offset-X-*:X为设备宽度前缀sm、md、lg、xl。*为数字0～11。.offset-X-0，表示该宽度下不偏移。

同时，这里也需要注意，偏移列和显示列综合不能超过12。如果超过12，则换到下一行。

【实例2-6】 （文件offsetgrid1.java）

<div class=＂row＂>
    <div class=＂col-md-4＂>.col-md-4</div>
    <div class=＂col-md-4 offset-md-4＂>.col-md-4 .offset-md-4</div>
</div>
<div class=＂row＂>
    <div class=＂col-md-3 offset-md-3＂>.col-md-3 .offset-md-3</div>
    <div class=＂col-md-3 offset-md-3＂>.col-md-3 .offset-md-3</div>
</div>
<div class=＂row＂>
    <div class=＂col-md-6 offset-md-3＂>.col-md-6 .offset-md-3</div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-12所示。

图2-12 列的偏移

【实例2-7】 （文件setgrid2.java）

<div class=＂container＂>
    <div class=＂row＂>
        <div class=＂col-sm-5 col-md-6＂>.col-sm-5 .col-md-6</div>
        <div class=＂col-sm-5 offset-sm-2 col-md-6 offset-md-0＂>
            .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
        </div>
    </div>
    <div class=＂row＂>
        <div class=＂col-sm-6 col-md-5 col-lg-6＂>.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class=＂col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0＂>
        .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6  .offset-lg-0
    </div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-13所示。

图2-13 中屏显示效果

说明：在中屏显示时，第1行因为用了.offset-md-0，所以不偏移。小屏显示时会偏移。第2行，中屏显示时偏移2格，大屏设备显示时不偏移。读者可以自行查看效果。

2.3.6 列排序

列排序其实就是改变列的前后排列顺序。在栅格系统中，可以通过.order-*、.order-X -*来实现这一目的。其中，*是first、last或0～12的数字，如果是0～12的数字，则其是按数字大小排序；first表示排最前面；last表示排最后面；X代表 xs、sm、md、lg，对应不同的屏幕大小。其中order类的部分源码如下所示。

.order-md-first{
    -ms-flex-order:-1;
    order:-1;
  }
  .order-md-last{
    -ms-flex-order:13;
    order:13;
  }
  .order-md-0{
    -ms-flex-order:0;
    order:0;
  }
  .order-md-1{
    -ms-flex-order:1;
    order:1;
  }
…

其中，first、last可指定列排在最前面或最后面。

【实例2-8】 （文件ordergrid.html）

<div class=＂container＂>
        <div class=＂row＂>
            <div class=＂col＂>第1列，不排序</div>
            <div class=＂col order-7＂>第2列，order:7</div>
            <div class=＂col＂>第3列，不排序</div>
            <div class=＂col＂>第4列，不排序</div>
            <div class=＂col order-2＂>第5列，order:2</div>
        </div>
        <div class=＂row＂>
            <div class=＂col order-last＂>第1列，排最后</div>
            <div class=＂col＂>第2列，不排序</div>
            <div class=＂col order-first＂>第3列，排最前面</div>
        </div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-14所示。

图2-14 列排序的效果

2.3.7 列嵌套

栅格系统支持列的嵌套，即在一个列里面再嵌入一个或多个行（.row）。注意，内部所嵌套的row的宽度为100%，就是当前外部列的宽度。

【实例2-9】 （文件nestgrid.html）

<div class=＂container＂>
  <div class=＂row＂>
      <div class=＂col-md-3＂>col-md-3</div>
      <div class=＂col-md-9＂>
          Level 1:.col-md-9
          <div class=＂row＂>
              <div class=＂col-md-6＂>
                    Level 2:.col-md-6
              </div>
              <div class=＂col-md-6＂>
                    Level 2:.col-md-6
              </div>
          </div>
      </div>
  </div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-15所示。

图2-15 列嵌套的效果