Bootstrap架构

必须使用HTML5文档类型

Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。

<!DOCTYPE html>
<html lang="en">
  ...
</html>

排版和链接

Bootstrap 为屏幕、排版和链接设置了基本的全局样式。尤其是，我们:

移除了body的 margin
设置了 body 的背景颜色 background-color: white;
使用 @baseFontFamily、@baseFontSize 和@baseLineHeight 属性作为我们排版的基础
通过 @linkColor 设置全局链接颜色，并且，当链接处于 :hover 状态时才会带有下划线

这些样式可以在 scaffolding.less 文件中找到。

用Normalize重置样式

从 Bootstrap 2 开始, 老的重置方式被 Normalize.css 取代, 这是 Nicolas Gallagher 和Jonathan Neal 共同维护的一个项目，这一项目还被 HTML5 Boilerplate 所采用。虽然我们在reset.less 文件中使用了许多Normalize的代码，但是，我们也移除了一些不适合Bootstrap的元素。

栅格系统示例

Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用响应式布局特性。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。

带有基本栅格的HTML代码

对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

上面的代码展示了 .span4 和 .span8 两列，两列的和总共是12个栅格。

偏移列

把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。

3 offset 2

3 offset 1

3 offset 2

6 offset 3

<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

嵌套列

在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。

Level 1 column

Level 2

<div class="row">
  <div class="span9">
    Level 1 column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>

流式栅格系统案例

流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。

基本的流式栅格HTML代码片段

将 .row 替换为 .row-fluid 就能让任何一行“流动”起来。应用于每一列的类不用改变，这样能方便的在流式与固定栅格之间切换。

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

流式栅格的偏移

定义方式和固定网格系统相同：给任何想偏移的列添加 .offset* 即可。

4 offset 4

3 offset 3

6 offset 6

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

流式嵌套布局

和固定栅格的嵌套有一点不同：被嵌套的列数之和要等于12。这是因为流式栅格使用百分比来设置每列的宽度。

Fluid 12

Fluid 6

<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

固定布局

提供了一个通用的固定宽度(也可以变为响应式)的布局方式，仅仅用 <div class="container"> 即可。

<body>
  <div class="container">
    ...
  </div>
</body>

流式布局

利用 <div class="container-fluid"> 代码可以创建一个流式、两列的页面 — 非常适合于应用和文档类页面。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

启用响应式特性

通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果你已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

注意！ Bootstrap在默认情况下是没有引入响应式特性的，因为不是任何情况都需要使用到。我们并不是鼓励开发者移除此功能, 而是在需要使用的时候才启用它。

关于响应式Bootstrap

Media queries允许在一些条件基础上自定义CSS 例如：—ratios、widths、display type, etc— 但通常都是围绕着 min-width 和 max-width 这两者。

修改栅格系统中列的宽度
需要的时候, 用堆叠元素代替浮动
调整标题和文本的大小以便适合各种设备

谨慎的使用media queries，先从你的手机用户开始吧。对于大型的项目, 应该考虑使用专门的代码库, 而不是构筑在media queries之上。

被支持的设备

Bootstrap 所支持的几个media queries都放在了一个文件中，可以让你的项目更灵活的去适应不同设备和屏幕分辨率。包括：

类型	布局宽度	列宽	间隙宽度
大屏幕	大于等于1200px	70px	30px
默认	大于等于980px	60px	20px
平板	大于等于768px	42px	20px
手机到平板	小于等于767px	流式列，无固定宽度
手机	小于等于480px	流式列，无固定宽度

/* 大屏幕 */
@media (min-width: 1200px) { ... }

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }

/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

响应式布局辅助class

为了更快的针对移动设备做开发, 下面列出的辅助class用于针对不同设备显示和隐藏内容。下表是可用的class列表, 以及它们在各个media query布局下的效果。这些class可以在 responsive.less 文件中找到。

Class	手机 767px 及以下	平板 979px 到 768px	电脑默认
`.visible-phone`	显示	隐藏	隐藏
`.visible-tablet`	隐藏	显示	隐藏
`.visible-desktop`	隐藏	隐藏	显示
`.hidden-phone`	隐藏	显示	显示
`.hidden-tablet`	显示	隐藏	显示
`.hidden-desktop`	显示	显示	隐藏

何时使用

在有限的情况下使用, 避免创建同一个站点的不同版本。当这些class能对每种设备的展示做有益的补充的时候才使用。响应式工具不能用于table元素，而且本就不支持。

响应式工具测试案例

调整浏览器的宽度或者在不同的设备上加载该页面用以测试上述的class。

在...上显示

绿色选中标记用以指示这些class在你当前的可视窗口是可见的。

手机✔ 手机
平板✔ 平板
电脑✔ 电脑

在...上隐藏

这里的绿色选中标记用以指示这些class在你当前的可视窗口是隐藏的。

手机✔ 手机
平板✔ 平板
电脑✔ 电脑

脚手架

全局设置