脚手架

Bootstrap 建立在响应式 12 列网格之上。我们还包括基于该系统的固定宽度和流体宽度布局。

需要 HTML5 文档类型

Bootstrap 使用需要使用 HTML5 文档类型的 HTML 元素和 CSS 属性。确保将它包含在项目中每个 Bootstrapped 页面的开头。

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

排版和链接

scaffolding.less文件中,我们设置了基本的全局显示、排版和链接样式。具体来说,我们:

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

通过标准化重置

从 Bootstrap 2 开始,传统的 CSS 重置已经演变为使用 Normalize.css 中的元素,Normalize.css是Nicolas Gallagher的一个项目,它也为HTML5 Boilerplate 提供支持

新的重置仍然可以在reset.less中找到,但为了简洁和准确,删除了许多元素。

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

Bootstrap 中提供的默认网格系统使用12 列,以 724 像素、940 像素(默认不包括响应式 CSS)和 1170 像素的宽度呈现。在 767px 视口以下,列变得流畅并垂直堆叠。

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

如此处所示,可以使用两个“列”创建基本布局,每个“列”跨越我们定义为网格系统一部分的 12 个基础列中的一些。


偏移列

4
4 偏移 4
3 偏移 3
3 偏移 3
8 偏移 4
  1. <div= “行” >
  2. <div= "span4" > ... </div>
  3. <div class = "span4 offset4" > ... </div>
  4. </div>

嵌套列

使用 Bootstrap 中的静态(非流体)网格系统,嵌套很容易。要嵌套您的内容,只需在现有列中添加一.row组新列。.span*.span*

例子

嵌套行应包含一组列,这些列的总和与其父级的列数相同。例如,两个嵌套.span3列应该放在一个.span6.

列的第 1 层
2级
2级
  1. <div= “行” >
  2. <div= "span6" >
  3. 1 级列
  4. <div= “行” >
  5. <div class = "span3" >级别 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

百分比,而不是像素

流体网格系统使用百分比来表示列宽,而不是固定像素。它还具有与我们的固定网格系统相同的响应变化,确保关键屏幕分辨率和设备的适当比例。

流体行

只需更改.row为即可使任何行变得流畅.row-fluid。列保持完全相同,使得在固定布局和流动布局之间切换变得非常简单。

标记

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

流体嵌套

使用流体网格嵌套有点不同:嵌套列的数量不需要与父级匹配。相反,您的列会在每个级别重置,因为每一行占用父列的 100%。

流体 12
流体 6
流体 6
  1. <div= “行流体” >
  2. <div= "span12" >
  3. 列的第 1 层
  4. <div= “行流体” >
  5. <div class = "span6" >级别 2 </div>
  6. <div class = "span6" >级别 2 </div>
  7. </div>
  8. </div>
  9. </div>
多变的 默认值 描述
@gridColumns 12 列数
@gridColumnWidth 60像素 每列的宽度
@gridGutterWidth 20像素 列之间的负空间

LESS 中的变量

Bootstrap 内置了一些用于自定义默认 940 像素网格系统的变量,如上所示。网格的所有变量都存储在 variables.less 中。

如何定制

修改网格意味着改变三个@grid*变量并重新编译Bootstrap。更改 variables.less 中的网格变量并使用记录的四种方法之一重新编译。如果要添加更多列,请务必在 grid.less 中添加 CSS。

保持响应

网格的自定义仅适用于默认级别,即 940 像素网格。要维护 Bootstrap 的响应方面,您还必须在 responsive.less 中自定义网格。

固定布局

默认且简单的 940 像素宽、居中布局,适用于单个<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,但通常集中在min-widthmax-width.

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

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

支持的设备

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

标签 版面宽度 列宽 天沟宽度
智能手机 480px及以下 流体列,无固定宽度
智能手机到平板电脑 767px 及以下 流体列,无固定宽度
肖像平板电脑 768px及以上 42像素 20像素
默认 980 像素及以上 60像素 20像素
大显示屏 1200 像素及以上 70像素 30像素

需要元标记

为确保设备正确显示响应页面,请包含视口元标记。

  1. <元名称= “视口”内容= “宽度=设备宽度,初始比例=1.0” >

使用媒体查询

Bootstrap 不会自动包含这些媒体查询,但理解和添加它们非常容易,并且需要最少的设置。您有几个选项可以包含 Bootstrap 的响应式功能:

  1. 使用编译好的响应式版本,bootstrap-responsive.css
  2. 添加 @import "responsive.less" 并重新编译 Bootstrap
  3. 将 responsive.less 修改并重新编译为单独的文件

为什么不直接包括它?说实话,并非所有事情都需要响应。我们认为最好启用它,而不是鼓励开发人员删除此功能。

  1. /* 横向手机和向下 */
  2. @media 最大宽度480px { ... } _
  3.  
  4. /* 横向手机到纵向平板 */
  5. @media 最大宽度767px { ... } _
  6.  
  7. /* 纵向平板到横向和桌面 */
  8. @media 最小宽度768px 最大宽度979px { ... } _ _
  9.  
  10. /* 大桌面 */
  11. @media (最小-宽度: 1200px ) { ... }

响应式实用程序类

这些是什么

为了更快地进行移动友好开发,请使用这些基本实用程序类按设备显示和隐藏内容。

何时使用

在有限的基础上使用并避免创建同一站点的完全不同版本。相反,使用它们来补充每个设备的演示文稿。

例如,您可能会<select>在移动布局上显示导航元素,但不会在平板电脑或台式机上显示。

支持课程

此处显示的是我们支持的类及其对给定媒体查询布局(按设备标记)的影响的表格。它们可以在responsive.less.

班级 电话480px及以下 平板电脑767px 及以下 台式机768px及以上
.visible-phone 可见的
.visible-tablet 可见的
.visible-desktop 可见的
.hidden-phone 可见的 可见的
.hidden-tablet 可见的 可见的
.hidden-desktop 可见的 可见的

测试用例

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

可见于...

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

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

隐藏在...

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

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