脚手架

Bootstrap建立在12列栅格系统、布局、组件之上。

必须使用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 GallagherJonathan Neal 共同维护的一个项目,这一项目还被 HTML5 Boilerplate 所采用。虽然我们在reset.less 文件中使用了许多Normalize的代码,但是,我们也移除了一些不适合Bootstrap的元素。

栅格系统示例

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

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

带有基本栅格的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个列的宽度。

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

流式栅格系统案例

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

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

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

流式栅格的偏移

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

4
4 offset 4
3 offset 3
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
Fluid 6
Fluid 6
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

Responsive devices

Media queries允许在一些条件基础上自定义CSS 例如:—ratios、widths、display type, etc— 但通常都是围绕着 min-widthmax-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在你当前的可视窗口是隐藏的。

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