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*. 嵌套在内的列数总和要等于父级列.

一级
二级
二级 
<div class="row">
  <div class="span9">
    一级
    <div class="row">
      <div class="span6">二级</div>
      <div class="span3">二级</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标签和一个响应式样式表来开始使用响应式. 如果已经在自定义页面编译好一个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 显示 显示

何时使用

在有限和避免在相同的站点创造不同版本的情况下使用. 而不是用来对每一个设备的介绍. 响应式的属性不应该使用在表格中, 因此这不被支持.

测试案例

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

显示在...

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

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

隐藏在...

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

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