脚手架

Bootstrap 建立在响应式 12 列网格、布局和组件之上。

需要 HTML5 文档类型

Bootstrap 使用需要使用 HTML5 文档类型的某些 HTML 元素和 CSS 属性。将它包含在所有项目的开头。

  1. <!DOCTYPE html>
  2. <html lang = "en" >
  3. ...
  4. </html>

排版和链接

Bootstrap 设置基本的全局显示、排版和链接样式。具体来说,我们:

  • 去除margin身体
  • 设置background-color: white;body
  • 使用@baseFontFamily@baseFontSize@baseLineHeight属性作为我们的排版基础
  • 通过设置全局链接颜色@linkColor并仅在上应用链接下划线:hover

这些样式可以在scaffolding.less中找到。

通过标准化重置

在 Bootstrap 2 中,旧的重置块已被删除,取而代之的是Normalize.css ,这是Nicolas GallagherJonathan Neal的一个项目,它也为HTML5 Boilerplate 提供支持。虽然我们在reset.less中使用了很多 Normalize ,但我们已经删除了一些专门用于 Bootstrap 的元素。

实时网格示例

默认的 Bootstrap 网格系统使用12 列,从而形成一个 940 像素宽的容器,而没有启用响应功能。添加响应式 CSS 文件后,网格会根据您的视口调整为 724 像素和 1170 像素宽。在 767px 视口以下,列变得流畅并垂直堆叠。

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

基本网格 HTML

对于简单的两列布局,创建一个.row并添加适当数量的.span*列。由于这是一个 12 列的网格,每个网格.span*跨越这 12 列中的许多列,并且每行(或父项中的列数)应始终加起来为 12。

  1. <div= “行” >
  2. <div= "span4" > ... </div>
  3. <div= "span8" > ... </div>
  4. </div>

给定这个例子,我们有.span4.span8,总共有 12 列和一个完整的行。

偏移列

使用类将列向右移动.offset*。每个类将一列的左边距增加一整列。例如,.offset4移动.span4四列。

4
3 偏移 2
3 偏移 1
3 偏移 2
6 偏移 3
  1. <div= “行” >
  2. <div= "span4" > ... </div>
  3. <div class = "span3 offset2" > ... </div>
  4. </div>

嵌套列

要使用默认网格嵌套您的内容,请在现有列中添加一.row组新列。嵌套行应包含一组列,这些列的总和与其父级的列数相同。.span*.span*

1 级列
2级
2级
  1. <div= “行” >
  2. <div= "span9" >
  3. 1 级列
  4. <div= “行” >
  5. <div class = "span6" >级别 2 </div>
  6. <div class = "span3" >级别 2 </div>
  7. </div>
  8. </div>
  9. </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。列类保持完全相同,便于在固定网格和流动网格之间切换。

  1. <div= “行流体” >
  2. <div= "span4" > ... </div>
  3. <div= "span8" > ... </div>
  4. </div>

流体补偿

与固定网格系统偏移的操作方式相同:添加.offset*到任何列以偏移那么多列。

4
4 偏移 4
3 偏移 3
3 偏移 3
6 偏移 6
  1. <div= “行流体” >
  2. <div= "span4" > ... </div>
  3. <div class = "span4 offset2" > ... </div>
  4. </div>

流体嵌套

流体网格以不同的方式使用嵌套:每个嵌套级别的列最多应添加 12 列。这是因为流体网格使用百分比而不是像素来设置宽度。

流体 12
流体 6
流体 6
流体 6
流体 6
  1. <div= “行流体” >
  2. <div= "span12" >
  3. 流体 12
  4. <div= “行流体” >
  5. <div= "span6" >
  6. 流体 6
  7. <div= “行流体” >
  8. <div class = "span6" >流体 6 </div>
  9. <div class = "span6" >流体 6 </div>
  10. </div>
  11. </div>
  12. <div class = "span6" >流体 6 </div>
  13. </div>
  14. </div>
  15. </div>

固定布局

提供一个通用的固定宽度(和可选的响应式)布局,仅<div class="container">需要。

  1. <正文>
  2. <div= “容器” >
  3. ...
  4. </div>
  5. </正文>

流体布局

<div class="container-fluid">使用 —非常适合应用程序和文档创建一个流畅的两列页面。

  1. <div class = "容器流体" >
  2. <div= “行流体” >
  3. <div= "span2" >
  4. <!--侧边栏内容-->
  5. </div>
  6. <div= "span10" >
  7. <!--正文内容-->
  8. </div>
  9. </div>
  10. </div>

启用响应式功能

通过在文档中包含正确的元标记和附加样式表,在您的项目中启用响应式 CSS <head>。如果您已从自定义页面编译 Bootstrap,则只需包含元标记。

  1. <元名称= “视口”内容= “宽度=设备宽度,初始比例=1.0” >
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

小心!默认情况下,Bootstrap 不包含响应式功能,因为并非所有内容都需要响应式。我们认为最好根据需要启用它,而不是鼓励开发人员删除此功能。

关于响应式 Bootstrap

响应式设备

媒体查询允许基于许多条件(比率、宽度、显示类型等)自定义 CSS,但通常集中在min-widthmax-width.

  • 修改我们网格中列的宽度
  • 在必要时堆叠元素而不是浮动
  • 调整标题和文本的大小以更适合设备

负责任地使用媒体查询,并且仅作为移动受众的开始。对于较大的项目,请考虑专用代码库而不是媒体查询层。

支持的设备

Bootstrap 在单个文件中支持少量媒体查询,以帮助您的项目更适合不同的设备和屏幕分辨率。以下是包含的内容:

标签 版面宽度 列宽 天沟宽度
大显示屏 1200 像素及以上 70像素 30像素
默认 980 像素及以上 60像素 20像素
肖像平板电脑 768px及以上 42像素 20像素
手机到平板电脑 767px 及以下 流体列,无固定宽度
电话 480px及以下 流体列,无固定宽度
  1. /* 大桌面 */
  2. @media (最小-宽度: 1200px ) { ... }
  3.  
  4. /* 纵向平板到横向和桌面 */
  5. @media 最小宽度768px 最大宽度979px { ... } _ _
  6.  
  7. /* 横向手机到纵向平板 */
  8. @media 最大宽度767px { ... } _
  9.  
  10. /* 横向手机和向下 */
  11. @media 最大宽度480px { ... } _

响应式实用程序类

为了更快地进行移动友好型开发,请使用这些实用程序类按设备显示和隐藏内容。下面是可用类及其对给定媒体查询布局(按设备标记)的影响的表格。它们可以在responsive.less.

班级 电话767px 及以下 平板电脑979 像素到 768 像素 台式机默认
.visible-phone 可见的
.visible-tablet 可见的
.visible-desktop 可见的
.hidden-phone 可见的 可见的
.hidden-tablet 可见的 可见的
.hidden-desktop 可见的 可见的

何时使用

在有限的基础上使用并避免创建同一站点的完全不同版本。相反,使用它们来补充每个设备的演示文稿。响应式实用程序不应与表一起使用,因此不受支持。

响应式实用程序测试用例

调整浏览器大小或在不同设备上加载以测试上述类。

可见于...

绿色复选标记表示该类在当前视口中可见。

  • 电话✔ 电话
  • 药片✔ 平板电脑
  • 桌面✔ 桌面

隐藏在...

在这里,绿色复选标记表示该类隐藏在您当前的视口中。

  • 电话✔ 电话
  • 药片✔ 平板电脑
  • 桌面✔ 桌面