Bootstrap

框架

Bootstrap构建于12列响应式网格, 布局和组件.

全局设置

需要 HTML5 doctype

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开始, 一些旧的重置模板(reset block)已经在Normalize.css被删除, 这是Nicolas Gallagher的一个项目, 同样还有一样强大的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列, 并且每行的列(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>

流式网格的嵌套

和固定网格的嵌套有一点不同: 嵌套的列数总和不需要等于父级列. 相反的, 每个级别的嵌套列属性将被重置, 因为嵌套列会占据父列的100%宽度.

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标签和一个响应式样式表来开启使用响应式. 如果已经在自定义页面编译好一个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 例如 —— 比例, 宽度, 显示类型等等.—— 但通常都是围绕着 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) { ... }

支持的属性

为了更快的对移动友好交互的开发, 使用下面实用属性, 用于在不同设备间的显示和隐藏. 下表是可用的属性, 已经它们在各个Media query的效果. 它们可以在 responsive.less 找到.

属性 手机 767px及以下 平板 979px与768px之间 电脑 默认
.visible-phone 显示
.visible-tablet 显示
.visible-desktop 显示
.hidden-phone 显示 显示
.hidden-tablet 显示 显示
.hidden-desktop 显示 显示

何时使用

在有限的情况下使用, 和避免在相同的站点创造不同的版本. 而不是使用它们来互相对各个设备进行演示补充. 响应式的公共属性不能使用在表格中, 所以这不被支持.

测试案例

调整浏览器的宽度或者把该页面加载到不同的设备上测试上述的属性.

显示在...

绿色选中的标记在你当前视口(分辨率)是可见的.

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

隐藏在...

绿色选中的标记在你当前视口(分辨率)是不可见的.

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