Bootstrap 网格体系

本章节咱们将解说 Bootstrap 的网格体系(Grid System)。

Bootstrap 供给了一套呼应式、移动设备优先的流式网格体系,跟着屏幕或视口(viewport)尺度的增加,体系会主动分为最多12列。

什么是网格(Grid)?

摘自维基百科:

在平面规划中,网格是一种由一系列用于安排内容的相交的直线(笔直的、水平的)组成的结构(通常是二维的)。它广泛运用于打印规划中的规划布局和内容结构。在网页规划中,它是一种用于快速创立共同的布局和有效地运用 HTML 和 CSS 的办法。

简略地说,网页规划中的网格用于安排内容,让网站易于阅读,并下降用户端的负载。

什么是 Bootstrap 网格体系(Grid System)?

Bootstrap 官方文档中有关网格体系的描绘:

Bootstrap 包括了一个呼应式的、移动设备优先的、不固定的网格体系,能够跟着设备或视口巨细的增加而恰当地扩展到 12 列。它包括了用于简略的布局选项的预界说类,也包括了用于生成更多语义布局的功用强大的混合类。

让咱们来了解一下上面的句子。Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比方移动设备、平板manbet)开端,然后扩展到大屏幕设备(比方笔记本manbet、台式manbet)上的组件和网格。

移动设备优先战略

  • 内容
    • 决议什么是最重要的。
  • 布局
    • 优先规划更小的宽度。
    • 根底的 CSS 是移动设备优先,媒体查询是针关于平板manbet、台式manbet。
  • 渐进增强
    • 跟着屏幕巨细的增加而增加元素。

呼应式网格体系跟着屏幕或视口(viewport)尺度的增加,体系会主动分为最多12列。

1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12

Bootstrap 网格体系(Grid System)的作业原理

网格体系经过一系列包括内容的行和列来创立页面布局。下面列出了 Bootstrap 网格体系是怎么作业的:

  • 行有必要放置在 .container class 内,以便取得恰当的对齐(alignment)和内边距(padding)。
  • 运用行来创立列的水平组。
  • 内容应该放置在列内,且唯有列能够是行的直接子元素。
  • 预界说的网格类,比方 .row.col-xs-4,可用于快速创立网格布局。LESS 混合类可用于更多语义布局。
  • 列经过内边距(padding)来创立列内容之间的空隙。该内边距是经过 .rows 上的外边距(margin)取负,表明榜首列和最终一列的行偏移。
  • 网格体系是经过指定您想要横跨的十二个可用的列来创立的。例如,要创立三个持平的列,则运用三个 .col-xs-4

媒体查询

媒体查询是十分特别的"有条件的 CSS 规矩"。它只适用于一些根据某些规矩条件的 CSS。假如满意那些条件,则运用相应的款式。

Bootstrap 中的媒体查询答应您根据视口巨细移动、显现并躲藏内容。下面的媒体查询在 LESS 文件中运用,用来创立 Bootstrap 网格体系中的要害的分界点阈值。

/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默许情况下没有媒体查询 */

/* 小型设备(平板manbet,768px 起) */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备(台式manbet,992px 起) */
@media (min-width: @screen-md-min) { ... }

/* 大型设备(大台式manbet,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,则会进行一些处理。

网格选项

下表总结了 Bootstrap 网格体系怎么跨多个设备作业:

超小设备手机(<768px)小型设备平板manbet(≥768px)中型设备台式manbet(≥992px)大型设备台式manbet(≥1200px)
网格行为一直是水平的以折叠开端,断点以上是水平的以折叠开端,断点以上是水平的以折叠开端,断点以上是水平的
最大容器宽度None (auto)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列 #12121212
最大列宽Auto60px78px95px
空隙宽度30px
(一个列的每边别离 15px)
30px
(一个列的每边别离 15px)
30px
(一个列的每边别离 15px)
30px
(一个列的每边别离 15px)
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes

根本的网格结构

下面是 Bootstrap 网格的根本结构:

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

让咱们来看几个简略的网格实例:

呼应式的列重置

以下实例包括了4个网格,可是咱们在小设备阅读时无法确认网格显现的方位。

为了处理这个问题,运用 能够运用 .clearfix class和 呼应式实用东西来处理,如下面实例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 呼应式的列重置</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<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>

</body>
</html>

阅读器上调整窗口巨细检查改动,或在您手机上检查作用。

偏移列

偏移是一个用于更专业的布局的有用功用。它们可用来给列腾出更多的空间。例如,.col-xs=* 类不支持偏移,可是它们能够简略地经过运用一个空的单元格来完成该作用。

为了在大屏幕显现器上运用偏移,请运用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其间 * 规模是从 111

鄙人面的实例中,咱们有 <div class="col-md-6">..</div>,咱们将运用 .col-md-offset-3 class 来居中这个 div。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 偏移列</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<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>

</body>
</html>

成果如下所示:

网格体系偏移列

嵌套列

为了在内容中嵌套默许的网格,请增加一个新的 .row,并在一个已有的 .col-md-* 列内增加一组 .col-md-* 列。被嵌套的行应包括一组列,这组列个数不能超过12(其实,没有要求你有必要占满12列)。

鄙人面的实例中,布局有两个列,第二列被分为两行四个盒子。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 嵌套列</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<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>榜首列</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>第二列 - 分为四个盒子</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>

</body>
</html>

成果如下所示:

网格体系嵌套列

列排序

Bootstrap 网格体系另一个完美的特性,便是您能够很容易地以一种次序编写列,然后以另一种次序显现列。

您能够很轻易地改动带有 .col-md-push-*.col-md-pull-* 类的内置网格列的次序,其间 * 规模是从 111

鄙人面的实例中,咱们有两列布局,左列很窄,作为侧边栏。咱们将运用 .col-md-push-*.col-md-pull-* 类来交换这两列的次序。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 列排序</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左面
      </div>
      <div class="col-md-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div><br>
   <div class="row">
      <p>排序后</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;">
         我在左面
      </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;">
         我在右边
      </div>
   </div>

</div>

</body>
</html>

成果如下所示:

网格体系排序列