Bootstrap：学习使用最流行的 HTML，CSS 与 JavaScript 库 — 布局篇

学习使用 Bootstrap 这个库是最好的学习 HTML 与 CSS 的方法，当然还有一点 JavaScript。如果您刚刚起步学习 Web 开发，那首先要学 HTML 与 CSS。有一点基础以后，就可以去学习使用 Bootstrap 去设计界面了。它给了我们一套界面设计框架，学习它是怎么组织的 HTML 代码结构，然后在上面去应用 CSS 样式，CSS 类的命名方式，各种选择器，如何利用各种伪类与伪元素。Bootstrap 里面的东西主要分成了四个部分。布局，内容，组件，还有工具。我们先来了解一下 Bootstrap 的布局（Layout）。

布局（Layout）

网格是设计界最常用的工具。Bootstrap 使用了 12 栏网格（Grid）的布局系统，就是它把一行（Row）内容分成了十二栏（Column）。你可以为一行内容里面的每一个栏去指定它占用的栏数，一行最多只能显示十二栏宽度的内容。

比如你的界面上需要一块三栏显示的内容，A，B还有 C，你可以让 A 占用 6 栏宽度，B 占用 4 栏宽度，剩下的两个网格宽度留给 C 。这样 A，B，C 这几栏内容加起来的宽度正好是 12 个网格，所以它们也就正好可以在一排显示。如果一排内容的宽度超过了 12 个网格，那后面的栏会自动给挤到第二排显示。

容器（Container）

一块界面如果你想让有个固定的宽度并且居中在页面上显示，那你可以把这块内容放在一个带 .container 的容器里面。Bootstrap 里面设计了几个 Breakpoint，sm（小：small），md（中：medium），lg（大：large），xl（特大：extra large），当浏览窗口的宽度到达设置的这几个点的宽度，.container 的宽度会随着发生变化，也就是我们说的响应式（Responsive）的布局。

<div class="container">固定宽度响应式</div>

排 / 行（Row）

一排内容可以放在一个带 .row 类的容器里面。

<div class="container">
  <div class="row"></div>
</div>

栏（Column）

一排内容里面可以分成几栏显示，每一个栏的内容也需要一个单独的包装，它上面要加上 col 类，这个 col 的后面可以跟着设备尺寸（浏览窗口的宽度），还有占用的栏数。这里说的尺寸指的就是 sm，md，lg，xl，栏数指的是从 1 到 12 这些数字。如果一排内容要等分宽度，可以不需要特别指定占用的栏数。

一排内容等分成三栏：

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

在栏中加入设备尺寸，比如我想只在小尺寸（sm）的设备上才开始让一排等分三栏：

<div class="row">
  <div class="col-sm">A</div>
  <div class="col-sm">B</div>
  <div class="col-sm">C</div>
</div>

现在上面这三栏内容，在小尺寸以下的设备上会堆叠到一块儿显示，到了小尺寸的宽度以后就会等分一栏的宽度在一排显示了。

我们还可以指定每一栏占用的具体的网格数量：

<div class="row">
  <div class="col-sm-6">A</div>
  <div class="col-sm-4">B</div>
  <div class="col-sm-2">C</div>
</div>

媒体查询（Media Query）

Bootstrap 就是利用了媒体查询（Media Query）来设置的响应式布局的断点（Breakpoint），断点就是发生变化的点。下面是 Bootstrap 里面用的媒体查询：

// Extra small devices (竖着的手机，小于 576px)
@media (max-width: 575px) { ... }

// Small devices (横过来的手机, 576px 以上)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (平板，768px 以上)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (桌面设备，992px 以上)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (大尺寸桌面设备，1200px 以上)
@media (min-width: 1200px) { ... }

max-width，与 min-width，这些东西就是媒体查询里面的设备的属性，max-width 表示最大宽度，min-width 表示最小宽度。

了解更多关于新版 Bootstrap 4 的布局使用方法，参考《Bootstrap 4：布局》。订阅宁皓网，可以在线学习所有 Bootstrap 相关课程。