框架

Bootstrap创建了响应式的12列栅格系统,并设计了固定(fixed)布局和流动宽度(fluid-width)布局。

文件类型必须是HTML5

Bootstrap使用了一些来至于HTML5的HTML元素和CSS属性,所以它必须得位于项目的开头部分.

<!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 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* 列, 就可实现嵌套. 嵌套在内的每列列数总和要等于父级列.

<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
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-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) { ... }
                

支持的属性

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

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

何时使用

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

测试案例

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

显示在...

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

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

隐藏在...

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

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