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

2.2 工作原理

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，用户的内容可以放入这些创建好的布局中。

下面就来介绍Bootstrap栅格系统的工作原理。

●一行数据必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋值合适的排列（alignment）和内边距（padding）。

●通过“行（row）”在水平方向创建一组“列（column）”。

用户的内容应当放置于“列（column）”内，并且只有“列（column）”可以作为“行（row）”的直接子元素。

●类似.row（行）和.col-md-4（占4列宽度）这样的样式，可以用来快速创建栅格布局。

●对于flexbox（弹性盒子），没有指定宽度的网格列将自动作为等宽列进行布局。例如，一行中如果放4个.col-sm列，则每一列自动获取百分比为25%。

●栅格系统中的列是通过指定1～12的值来表示其跨越的范围。例如，3个等宽的列，可以使用.col-4。

●列宽是以百分比的形式设置的，因此，相对于父元素，它们总是流动的，宽度是确定的。

●通过为 column设置 padding属性，从而创建列与列之间的间隔。通过为.row元素设置负值 margin，从而抵消掉为.container元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

●如果一“行（row）”中包含的“列（column）”大于12，则多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

●为了使栅格具有响应性，屏幕宽度有5个栅格断点：extra-small、small、medium、large和extra-large。

【实例2-1】 （文件 grid1.html）

<!DOCTYPE html>
<html>
    <head>
        <meta charset=＂utf-8＂/>
        <meta name=＂viewport＂ content=＂width=device-width,initial-scale=1, shrink-to-fit=no＂>
        <title>栅格系统</title>
        <link rel=＂stylesheet＂ href=＂css/bootstrap.min.css＂/>
    </head>
    <body>
        <div class=＂container＂>
          <div class=＂row＂>
              <div class=＂col-lg-1＂>.col-lg-1</div>
              <div class=＂col-lg-1＂>.col-lg-1</div>
              <div class=＂col-lg-1＂>.col-lg-1</div>
              <div class=＂col-lg-1＂>.col-lg-1</div>
              <div class=＂col-lg-1＂>.col-lg-1</div>
              <div class=＂col-lg-1＂>.col-lg-1</div>
              <div class=＂col-lg-1＂>.col-lg-1</div>
              <div class=＂col-lg-1＂>.col-lg-1</div>
              <div class=＂col-lg-1＂>.col-lg-1</div>
              <div class=＂col-lg-1＂>.col-lg-1</div>
              <div class=＂col-lg-1＂>.col-lg-1</div>
              <div class=＂col-lg-1＂>.col-lg-1</div>
          </div>
          <div class=＂row＂>
              <div class=＂col-lg-8＂>.col-lg-8</div>
              <div class=＂col-lg-4＂>.col-lg-4</div>
          </div>
          <div class=＂row＂>
              <div class=＂col-lg-4＂>.col-lg-4</div>
              <div class=＂col-lg-4＂>.col-lg-4</div>
              <div class=＂col-lg-4＂>.col-lg-4</div>
          </div>
          <div class=＂row＂>
              <div class=＂col＂>.col</div>
              <div class=＂col＂>.col</div>
              <div class=＂col＂>.col</div>
          </div>
        </div>
    </body>
</html>

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

图2-1 运行效果

说明：图2-1中一共有4行。在代码中，.row位于.container内，因此，我们可以看到，页面内容没有紧靠浏览器边缘。在row.里设置col-X-*元素，如此处col-lg-4表示在大屏设备显示时占4格。第1行分为12列，每列占1格。第2行分为2列，分别占8格、4格。第3行分为3列，每列占4格。第4行，采用的等分列，没有指定列宽，自动分成3列，每列占4格。

当行中设置的列的格数大于12时，将自动换行。读者可以在以上前3行中自行添加1列，并查看效果。