脚手架

需要 HTML5 文档类型

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

排版和链接

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

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

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

通过标准化重置

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

实时网格示例

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

基本网格 HTML

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

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

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

偏移列

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

3 偏移 2

3 偏移 1

3 偏移 2

6 偏移 3

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

嵌套列

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

1 级列

2级

<div类= “行” > 
  <div类= "span9" > 
    1 级列
    <div类= “行” > 
      <div class = "span6" >级别 2 </div> 
      <div class = "span3" >级别 2 </div> 
    </div>
  </div>
</div>

实时流体网格示例

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

基本流体网格 HTML

通过更改.row为使任何行“流动” .row-fluid。列类保持完全相同，便于在固定网格和流动网格之间切换。

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

流体补偿

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

4 偏移 4

3 偏移 3

6 偏移 6

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

流体嵌套

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

流体 12

流体 6

<div类= “行流体” > 
  <div类= "span12" > 
    流体 12
    <div类= “行流体” > 
      <div类= "span6" > 
        流体 6
        <div类= “行流体” > 
          <div class = "span6" >流体 6 </div> 
          <div class = "span6" >流体 6 </div> 
        </div>
      </div>
      <div class = "span6" >流体 6 </div> 
    </div>
  </div>
</div>

固定布局

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

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

流体布局

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

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

启用响应式功能

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

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

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

关于响应式 Bootstrap

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

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

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

支持的设备

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

标签	版面宽度	列宽	天沟宽度
大显示屏	1200 像素及以上	70像素	30像素
默认	980 像素及以上	60像素	20像素
肖像平板电脑	768px及以上	42像素	20像素
手机到平板电脑	767px 及以下	Fluid columns, no fixed widths
Phones	480px and below	Fluid columns, no fixed widths

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class	Phones 767px and below	Tablets 979px to 768px	Desktops Default
`.visible-phone`	Visible	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

Responsive utilities test case

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

可见于...

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

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

隐藏在...

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

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

全局设置