Skip to main content

布局

使用Bootstrap构建页面的选项,包括全局样式,必不可少的脚手架(scaffolding), 网格系统等。

--本章内容翻译由:樊潇洁友情提供

网格系统

Bootstrap包含了一个强大的移动优先的网格系统,用来创建各种形状和尺寸的布局。它基于一个12列的布局,有很多的等级,为每个媒体查询范围创建了一个等级。你可以与Sass mixins配合使用它,或者与我们预定义的类配合使用它。

Contents

工作机制

在一个高层次,以下是网格系统的工作原理:

  • 总共有三个主要的组件:容器、行和列。
  • 容器——.container实现固定的宽度,.container-fluid实现全宽度,会将你的页面的内容居中,帮助你对齐网格系统。
  • 行是列的横向组合,确保适当地排列你的列。
  • 内容必须放置在列中,而且只有列可以是行的直接子元素。
  • 列类表明你想要占用的列的数量,每行最多可用12列。所以如果你想用三个等宽列,你可以使用.col-sm-4
  • 列的width是用百分比设置的。所以它们总是是流式的,而且尺寸与父元素相关。
  • 列拥有水平的padding,以创建列与列之间的间隙。
  • 总共有五个网格等级,每个响应式分界点隔出一个等级:特小,小,中,大,特大。
  • 网格等级基于宽度的最小值,意味着它们应用到某一等级以及这一等级之上的所有(比如,.col-sm-4应用到小、中、大、特大设备)
  • 对于更多的主意上的标记,你可以使用预定义的网格类或者Sass mixins。

听起来不错?很好,那么让我们在一个实例中进一步学习吧。

快速开始示例

如果你正在使用 Bootstrap编译好的CSS, 就从下面的例子开始吧!

One of three columns
One of three columns
One of three columns
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
  </div>
</div>

上面的例子在小屏、中等屏、大屏、特大屏的设备创建了三个等宽的列,使用我们事先定义好的网格类。这些列和父.container 位于页面的中央。

网格选项

通过一个简单的表格查看Bootstrap的网格系统在多种设备上的工作的方方面面:

特小屏 <34em / 480px 小屏 ≥34em / 480px 中屏 ≥45em / 720px 大屏 ≥62em / 992px 特大屏 ≥75em / 1200px
网格行为 始终横向排布 开始瓦解,在断点之上保持横向排布。
Container width 无 (自动) 34rem / 480px 45rem / 720px 60rem / 960px 72.25rem / 1156px
类前缀 .col-xs- .col-sm- .col-md- .col-lg- .col-xl-
# 列格 12
列间隙宽度 30px (每列两侧各15px)
可嵌套性 可以
可偏移性 可以
列排序 可以

Sass mixins

使用Bootstrap的源Sass文件时,你可以选择使用Sass变量,或者mixins,以创建自定义的、语义化的、响应式的网页布局。我们的预建类使用相同的变量以及mixins,为快速响应布局提供整个现成的套件。

变量

变量决定列的数量、缝隙宽度以及切换到浮动列的媒体查询点。我们用这些来生成上文提及的预定义网格列,定制出如下所示的自定义mixins:

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 34em,    // 480px
  // Medium screen / tablet
  md: 48em,    // 768px
  // Large screen / desktop
  lg: 62em,    // 992px
  // Extra large screen / wide desktop
  xl: 75em     // 1200px
) !default;

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

Mixins

Mixins用来联合网格变量,为每个网格列生成语义化的CSS。

// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
  margin-left:  ($gutter / -2);
  margin-right: ($gutter / -2);
  @include clearfix();
}

// Make the element grid-ready (applying everything but the width)
@mixin make-col($gutter: $grid-gutter-width) {
  position: relative;
  float: left;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
}

// Set a width (to be used in or out of media queries)
@mixin make-col-span($columns) {
  width: percentage(($columns / $grid-columns));
}

// Get fancy by offsetting, or changing the sort order
@mixin make-col-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}
@mixin make-col-push($columns) {
  left: percentage(($columns / $grid-columns));
}
@mixin make-col-pull($columns) {
  right: percentage(($columns / $grid-columns));
}

应用案例

你可以将变量修改为你自己定义的值,或者直接使用mixins的默认值。这里有一个案例,使用默认设置创建两列布局以及一个列与列之间的缝隙。

渲染示例中查看实际效果:

.container {
  max-width: 60em;
  @include make-container();
}
.row {
  @include make-row();
}
.content-main {
  @include make-col();

  @media (max-width: 32em) {
    @include make-col-span(6);
  }
  @media (min-width: 32.1em) {
    @include make-col-span(8);
  }
}
.content-secondary {
  @include make-col();

  @media (max-width: 32em) {
    @include make-col-span(6);
  }
  @media (min-width: 32.1em) {
    @include make-col-span(4);
  }
}
<div class="container">
  <div class="row">
    <div class="content-main">...</div>
    <div class="content-secondary">...</div>
  </div>
</div>

预定义类

除了我们的语义化的mixins之外,Bootstrap还包含了很多预建立的类,用于快速创建网格列。它包含了基于设备的列调整、重新排序列,以及其它选项。

示例:横向排布

只要使用一个.col-md-*网格类集合,你就可以创建一个基本的网格系统,在移动设备以及特小屏或者小屏的平板设备上纵向排布,而在桌面(中屏)设备上横向排布。请把网格列放在任何.row中。

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

移动端和桌面端

不期望你的列在小屏设备上简单纵向排布?可以使用特小屏和中屏网格类,只要在列上添加.col-xs-*.col-md-*类即可。请看下面的例子,看看它是怎么工作的。

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

示例:移动端,平板电脑端,桌面端

在前面的例子的基础上,通过添加平板端样式类.col-sm-*,可以创建更有动态性、更强大的布局。

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix hidden-sm-up"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

示例:列包裹

如果一个列中放置了超过12列格,每一组超出的列,将成为一个单元,包裹入一个新行。

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

示例:响应式列重置

有了那四个可用的网格层级,你可能会遇到那种问题,就是在一个特定的分界点上,多列会显示得不太正确,因为列与列不等高。为了解决这个问题,可以组合使用一个.clearfix以及响应式工具类

.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix hidden-sm-up"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

为了能让列在响应式分界点上显示正确,你可能还必须添加重置位移、推、拉等。在网格示例中可以看到实例。

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-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 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

示例:位移列。

使用.col-md-offset-*类可以把列往右移。这个类根据*数增加了一个列的左边距。比如说,.col-md-offset-4.col-md-4往右移了四列格。

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

嵌套列

只要在一个已经存在的.col-sm-*列中添加一个新的.row以及一系列.col-sm-*,就可以使用默认的网格嵌套你的内容。嵌套的列可以包含若干个列,最多不超过12个列格(不需要把12个列格全占用完)

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

示例:列排序

使用.col-md-push-*以及.col-md-pull-*修正类,可以轻松改变内建网格列的顺序。

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>