脚手架

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

需要 HTML5 文档类型

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</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中找到，但为了简洁和准确，删除了许多元素。

作为 Bootstrap 的一部分提供的默认网格系统是940 像素宽、12 列的网格。

它还针对各种设备和分辨率提供四种响应式变体：手机、平板电脑纵向、平板电脑横向和小型桌面，以及大型宽屏桌面。

<div类= “行” > 
  <div类= "span4" > ... </div> 
  <div类= "span8" > ... </div> 
</div>

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

偏移列

4 偏移 4

3 偏移 3

8 偏移 4

<div类= “行” > 
  <div类= "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

嵌套列

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

例子

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

列的第 1 层

2级

<div类= “行” > 
  <div类= "span12" > 
    列的第 1 层
    <div类= “行” > 
      <div class = "span6" >级别 2 </div> 
      <div class = "span6" >级别 2 </div> 
    </div>
  </div>
</div>

流体柱

百分比，而不是像素

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

流体行

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

标记

<div类= “行流体” > 
  <div类= "span4" > ... </div> 
  <div类= "span8" > ... </div> 
</div>

流体嵌套

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

流体 12

流体 6

<div类= “行流体” > 
  <div类= "span12" > 
    列的第 1 层
    <div类= “行流体” > 
      <div class = "span6" >级别 2 </div> 
      <div class = "span6" >级别 2 </div> 
    </div>
  </div>
</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">.

<正文>
  <div类= “容器” > 
    ...
  </div>
</正文>

流体布局

<div class="container-fluid">提供灵活的页面结构、最小和最大宽度以及左侧边栏。它非常适合应用程序和文档。

<div class = "容器流体" > 
  <div类= “行流体” > 
    <div类= "span2" > 
      <!--侧边栏内容-->
    </div>
    <div类= "span10" > 
      <!--正文内容-->
    </div>
  </div>
</div>

响应式设备

他们做什么

媒体查询允许基于许多条件（比率、宽度、显示类型等）自定义 CSS，但通常集中在min-width和max-width.

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

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

支持的设备

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

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

需要元标记

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

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

使用媒体查询

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

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

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

  //横向手机和向下
  @media （最大宽度：480px ）{ ... } _     
 
  // 横向手机到纵向平板电脑
  @media （最大宽度：767px ）{ ... } _     
 
  // 纵向平板到横向和桌面
  @media （最小宽度：768px ）和（最大宽度：979px ）{ ... } _ _        
 
  // 大桌面
  @media (最小-宽度: 1200px ) { ... }

响应式实用程序类

这些是什么

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

何时使用

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

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

支持课程

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

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

测试用例

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

可见于...

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

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

隐藏在...

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

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

脚手架

CSS 重置、排版和链接的全局样式