概览

深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。

HTML5 文档类型

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html>

<html lang="zh-CN">

  ...

</html>

移动设备优先

在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

排版与链接

Bootstrap 排版、链接样式设置了基本的全局样式。分别是：

为 body 元素设置 background-color: #fff;
使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数
为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

这些样式都能在 scaffolding.less 文件中找到对应的源码。

Normalize.css

为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">

  ...

</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">

  ...

</div>

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

通过研究后面的实例，可以将这些原理应用到你的代码中。

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） */

/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */

@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 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) { ... }

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

实例：从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

aaarticlea/png;base64,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" alt="" />

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

实例：流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

复制

<div class="container-fluid">

  <div class="row">

    ...

  </div>

</div>

实例：移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。

aaarticlea/png;base64,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" alt="" />

<!-- 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-* 类，我们来创建更加动态和强大的布局吧。

aaarticlea/png;base64,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" alt="" />

<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 visible-xs-block"></div>

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

</div>

实例：多余的列（column）将另起一行排列

如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

aaarticlea/png;base64,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" alt="" />

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

响应式列重置

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。

aaarticlea/png;base64,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" alt="" />

<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 visible-xs-block"></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>

除了列在分界点清除响应， 您可能需要 重置偏移, 后推或前拉某个列。请看此栅格实例。

<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-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

aaarticlea/png;base64,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" alt="" />

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

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
aaarticlea/png;base64,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" alt="" />

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

 <div>
</div>

巴特西

Bootstrap的使用。。。

概览