1. WIKI教程
2. 学习Bootstrap
3. Bootstrap - 网格系统( Grid System)

Bootstrap - 网格系统( Grid System)

在本章中，我们将讨论Bootstrap网格系统。

什么是网格？

由wikepedia提出 -

在图形设计中，网格是一种结构（通常是二维的），由一系列用于构造内容的交叉直（垂直，水平）线组成。 它广泛用于设计印刷设计中的布局和内容结构。 在网页设计中，使用HTML和CSS快速有效地创建一致的布局是一种非常有效的方法。

简而言之，网页设计中的网格组织和构建内容，使网站易于扫描，减少用户的认知负担。

什么是Bootstrap网格系统？

正如网状系统Bootstrap官方文档所述 -

Bootstrap包括一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到12列。 它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大混合。

让我们理解上面的陈述。 Bootstrap 3首先是移动的，因为Bootstrap的代码现在通过定位较小的屏幕（如移动设备，平板电脑）开始，然后“扩展”组件和网格，用于更大的屏幕，如笔记本电脑，台式机。

移动优先战略

• Content

  • 确定最重要的是什么。

• Layout

  • 首先设计为较小的宽度。
  • 基本CSS地址移动设备首先; 平板电脑，台式机的媒体查询地址。

• Progressive Enhancement

  • 随着屏幕尺寸的增加添加元素。

Bootstrap网格系统的工作

网格系统用于通过一系列容纳内容的行和列来创建页面布局。 以下是Bootstrap网格系统的工作原理 -

• 必须将行放在.container类中以进行正确的对齐和填充。

• 使用行创建水平的列组。

• 内容应放在列中，只有列可能是行的直接子项。

• 预定义的网格类（如.row and .col-xs-4可用于快速制作网格布局。 LESS mixins也可用于更多语义布局。

• 列通过填充创建排水沟（列内容之间的间隙）。 该填充通过.rows上的负边距在第一列和最后一列的行中偏移。

• 通过指定要跨越的十二个可用列的数量来创建网格列。 例如，三个相等的列将使用三个.col-xs-4 。

媒体查询

媒体查询是“条件CSS规则”的一个非常奇特的术语。 它只是根据提出的某些条件应用一些CSS。 如果满足这些条件，则应用样式。

Bootstrap中的媒体查询允许您根据视口大小移动，显示和隐藏内容。 以下媒体查询在LESS文件中用于在Bootstrap网格系统中创建关键断点。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@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是什么类型min-width: @screen-sm-min如果屏幕宽度小于@screen-sm-max ， then do something 。

网格选项

下表总结了Bootstrap网格系统如何跨多个设备工作的各个方面 -

	超小型设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式机（≥992px）	大型设备台式机（≥1200px）
Grid behavior	Horizontal at all times	倒塌开始，水平在断点之上	倒塌开始，水平在断点之上	倒塌开始，水平在断点之上
最大容器宽度	None (auto)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
# of columns	12	12	12	12
最大列宽	Auto	60px	78px	95px
Gutter width	30PX （每列15px）	30PX （每列15px）	30PX （每列15px）	30PX （每列15px）
Nestable	Yes	Yes	Yes	Yes
Offsets	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

基本网格结构

以下是Bootstrap网格的基本结构 -

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

让我们看一些简单的网格示例 -

• 示例 - 堆叠到水平

• 示例 - 中型和大型设备

• 示例 - 移动设备，平板电脑，台式机

响应列重置

有了四层可用的网格，你必然遇到一些问题，在某些断点处，列不能很清楚，因为一个高于另一个。 要解决此问题，请使用类.clearfix和responsive utility classes的组合，如以下示例所示 -

<div class = "container">
   <div class = "row" >
      <div class = "col-xs-6 col-sm-3" 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.</p>
      </div>
      <div class = "col-xs-6 col-sm-3" 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>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.</p>
      </div>
      <div class = "clearfix visible-xs"></div>
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class = "col-xs-6 col-sm-3" 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</p>
      </div>
   </div>
</div>

这将产生以下结果 -

新页面打开

调整视口大小或在手机上查看，以获得此示例的预期效果。

偏移列

偏移是更专业布局的有用功能。 它们可用于推动柱子以获得更多间距（例如）。 .col-xs = *类不支持偏移，但可以使用空单元格轻松复制它们。

要在大型显示器上使用偏移，请使用.offset-md-* class类。 这些类将列的左边距增加*列，其中*范围从1到11 。

在下面的例子中，我们有

<div class = "container">
   <h1>Hello, world!</h1>
   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" 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.</p>
      </div>
   </div>
</div>

这将产生以下结果 -

新页面打开

嵌套列

要使用默认网格嵌套内容，请在现有.col-md-*列中添加新的.row和.col-md-*列。 嵌套行应包含一组最多为12的列。

在下面的示例中，布局有两列，第二列分为两行中的四个框。

<div class = "container">
   <h1>Hello, world!</h1>
   <div class = "row">
      <div class = "col-md-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class = "col-md-9" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>Second Column- Split into 4 boxes</h4>
         <div class = "row">
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Consectetur art party Tonx culpa semiotics. 
                  Pinterest assumenda minim organic quis.</p>
            </div>
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>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>
         <div class = "row">
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>quis nostrud exercitation ullamco laboris nisi ut aliquip 
                  ex ea commodo consequat.</p>
            </div>   
            <div class = "col-md-6" style = "background-color: #B18904;
               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.</p>
            </div>
         </div>
      </div>
   </div>
</div>

这将产生以下结果 -

新页面打开

列订购

Bootstrap网格系统的另一个不错的功能是，您可以轻松地按顺序编写列，并在另一个列中显示它们。 您可以使用.col-md-push-*和.col-md-pull-*修饰符类轻松更改内置网格列的顺序，其中*范围为1到11 。

在下面的示例中，我们有两列布局，左列是最窄的，并充当侧边栏。 我们将使用.col-md-push-*和.col-md-pull-*类来交换这些列的顺序。

<div class = "container">
   <h1>Hello, world!</h1>
   <div class = "row">
      <p>Before Ordering</p>
      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         I am on left
      </div>
      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         I am on right
      </div>
   </div>
   <br>
   <div class = "row">
      <p>After Ordering</p>
      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         I was on left
      </div>
      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         I was on right
      </div>
   </div>
</div>

这将产生以下结果 -

新页面打开