Bootstrap 布局，响应式布局，网格系统

需要 HTML5 文档声明

Bootstrap 需要使用一些特定的 HTML 元素和 CSS 属性，需要用到 HTML5 文档声明，把它放在项目的最开始的地方。

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</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 文件里, 我们特别针对 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 栏的位置。

3 偏移 2

3 偏移 1

3 偏移 2

6 偏移 3

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

嵌套布局

嵌套布局只需要在现有的布局里添加一个新的带有 .row 类的元素，里面再加上带有 .span* 类的元素，注意嵌套内容的整体的网格数，需要跟包装它的父元素的网格数一致。

第一级别

第二级别

<div class="row">
  <div class="span9">
    第一级别
    <div class="row">
      <div class="span6">第二级别</div>
      <div class="span3">第二级别</div>
    </div>
  </div>
</div>

流动网格系统示例

流动网格系统使用了百分比的栏宽。跟固定宽度的网络一样，流动网格也有响应式的功能。

流动网格基本 HTML

让网格成功流动网格，只需要把 .row 修改成 .row-fluid。网格栏的类不用改动，这样你可以很容易在固定宽度和流动宽度之间来回切换。

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

流动偏移

跟固定宽度的偏移方法一样，添加 .offset* 类到网格栏上就可以了。

4 偏移 4

3 偏移 3

6 偏移 6

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

流动嵌套

流动网格的嵌套有点区别：每个嵌套的级别的网格数加起来都应该是 12 栏，因为流动网格使用百分比，而不是固定像素的宽度。

流动 12

流动 6

<div class="row-fluid">
  <div class="span12">
    流动 12
    <div class="row-fluid">
      <div class="span6">
        流动 6
        <div class="row-fluid">
          <div class="span6">流动 6</div>
          <div class="span6">流动 6</div>
        </div>
      </div>
      <div class="span6">流动 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">
      <!--边栏内容-->
    </div>
    <div class="span10">
      <!--主体内容-->
    </div>
  </div>
</div>

启用响应式功能

启用响应式功能只需要添加一个合适的 meta 标签，还有把响应式布局的 CSS 样式表也加到文档的 <head> 标签里。如果你是从定制页面下载的编译后的 Bootstrap，应该已经包含了响应式 CSS，所以只需要添加一个 meta 标签就行了。

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

注意！ Bootstrap 默认并不包含响应式的功能，因为不是所有的东西都需要响应式，你可以在需要的时候启用它。

关于响应式的 Bootstrap

媒体查询可以让你针对不同的条件来定制 CSS，比如，宽度，显示类型等等，不过一般我们只使用 min-width （最小宽度）还有 max-width （最大宽度）。

会改变网格栏的宽度
需要的时候会使用堆砌来代替浮动显示。
为设备设置合适的文字大小。

对于移动设备的用户，我们使用媒体查询比较适合在小项目上，对于大型的项目来说，你需要考虑基于代码的解决方案。

所支持的设备

Bootstrap 的响应式设计可以让你在不同的设备和屏幕尺寸上看起来更合适一些，这个响应式设计的 CSS 代码会放在一个文件里。下面是包含的东西：

标签	布局宽度	栏宽	间隔
大屏幕显示	1200px 以上	70px	30px
默认	980px 以上	60px	20px
垂直平板	768px 及以上	42px	20px
智能手机到平板电脑	767px 及以下	流动栏，不固定宽度
电话	480px 及以下	流动栏，不固定宽度

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

响应式的实用类

为更快实施移动设备友好的开发，使用这些实用类可以为设备显示和隐藏内容。下面表格里的就是可用的类，还有它的功能。这些都可以在 responsive.less 里找到。

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

什么时候使用

不要使用这些类去为网站创建完全不同的版本，少量的使用还是很好地。还有，不要把它们用在表格上哦。

响应式实用类测试

调整浏览器窗口的大小，或者在不同的设备上打开，你可以看到下面这些类的效果。

显示...

绿色对号表示在当前可视窗口中是可见的。

智能手机✔ 智能手机
平板电脑✔ 平板电脑
桌面电脑✔ 桌面电脑

隐藏...

绿色对号表示在当前可视窗口中是隐藏的。

智能手机✔ 智能手机
平板电脑✔ 平板电脑
桌面电脑✔ 桌面电脑

布局

全局设置