概述

了解 Bootstrap 基础架构的关键部分，包括我们更好、更快、更强大的 Web 开发方法。

HTML5 文档类型

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

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

移动优先

在 Bootstrap 2 中，我们为框架的关键方面添加了可选的移动友好样式。使用 Bootstrap 3，我们从一开始就将项目重写为对移动设备友好。它们没有添加可选的移动样式，而是直接融入核心。事实上，Bootstrap 是移动优先的。移动优先样式可以在整个库中找到，而不是在单独的文件中。

为确保正确渲染和触摸缩放，请将视口元标记添加到您的<head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=no您可以通过添加到视口元标记来禁用移动设备上的缩放功能。这将禁用缩放，这意味着用户只能滚动，并导致您的网站感觉更像一个原生应用程序。总的来说，我们不建议在每个网站上都这样做，所以要小心！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

  • 设置background-color: #fff;在body
  • 使用@font-family-base、@font-size-base和@line-height-base属性作为我们的排版基础
  • 通过设置全局链接颜色@link-color并仅在上应用链接下划线:hover

这些样式可以在scaffolding.less.

规范化.css

为了改进跨浏览器渲染，我们使用了Normalize.css ，这是Nicolas Gallagher和Jonathan Neal的一个项目。

容器

Bootstrap 需要一个包含元素来包装网站内容并容纳我们的网格系统。您可以选择两个容器之一在您的项目中使用。请注意，由于padding以及更多，这两个容器都不是可嵌套的。

用于.container响应式固定宽度容器。

<div class="container">
  ...
</div>

用于.container-fluid全宽容器，跨越视口的整个宽度。

<div class="container-fluid">
  ...
</div>

网格系统

Bootstrap 包括一个响应式、移动优先的流体网格系统，随着设备或视口大小的增加，它可以适当地扩展到 12 列。它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大 mixin。

介绍

网格系统用于通过一系列包含您的内容的行和列来创建页面布局。下面是 Bootstrap 网格系统的工作原理：

  • 行必须放置在.container(fixed-width) 或.container-fluid(full-width) 内，以便正确对齐和填充。
  • 使用行来创建水平的列组。
  • 内容应该放在列中，并且只有列可以是行的直接子级。
  • 预定义的网格类.row和.col-xs-4可用于快速制作网格布局。更少的 mixin 也可以用于更多的语义布局。
  • 列通过padding. 该填充通过 s 上的负边距在第一列和最后一列的行中偏移.row。
  • 负边距是为什么下面的示例被突出的原因。这样网格列中的内容就会与非网格内容对齐。
  • 通过指定您希望跨越的十二个可用列的数量来创建网格列。例如，三个相等的列将使用三个.col-xs-4。
  • 如果单行中放置了超过 12 列，则每组额外的列将作为一个单元换行。
  • 网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，例如，将任何.col-md-*类应用于元素不仅会影响其在中型设备上的样式，而且如果.col-lg-*类不存在，也会影响大型设备上的样式。

查看将这些原则应用于您的代码的示例。

媒体查询

我们在 Less 文件中使用以下媒体查询在网格系统中创建关键断点。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

我们偶尔会扩展这些媒体查询，以包括max-width将 CSS 限制为更窄的设备集。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

网格选项

通过方便的表格了解 Bootstrap 网格系统的各个方面如何跨多个设备工作。

超小型设备电话（<768px） 小型设备平板电脑（≥768px） 中型设备台式机（≥992px） 大型设备台式机（≥1200px）
网格行为 始终水平 折叠开始，水平高于断点
集装箱宽度 无（自动） 750像素 970像素 1170像素
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
# 列数 12
列宽 汽车 〜62像素 〜81像素 ~97 像素
天沟宽度 30 像素（每列各 15 像素）
可嵌套 是的
偏移量 是的
列排序 是的

示例：堆叠到水平

使用一组.col-md-*网格类，您可以创建一个基本的网格系统，该系统开始堆叠在移动设备和平板设备（超小到小范围）上，然后在桌面（中型）设备上变为水平。将网格列放在任何.row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6 
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

示例：流体容器

通过将最外层更改.container为.container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

示例：移动和桌面

不希望您的色谱柱简单地堆叠在较小的设备中？.col-xs-* .col-md-*通过添加到您的列来使用额外的中小型设备网格类。请参阅下面的示例，以更好地了解它是如何工作的。

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6 
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

示例：移动设备、平板电脑、台式机

.col-sm-*通过使用平板电脑类创建更加动态和强大的布局来构建前面的示例。

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4 
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

示例：列换行

如果单行中放置了超过 12 列，则每组额外的列将作为一个单元换行。

.col-xs-9
.col-xs-4
由于 9 + 4 = 13 > 12，这个 4 列宽的 div 作为一个连续单元被换行到一个新行上。
.col-xs-6
后续列沿新行继续。 
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

响应列重置

由于有四层网格可用，您一定会遇到问题，在某些断点处，您的列不能完全正确地清除，因为一个比另一个高。要解决这个问题，请结合使用 a.clearfix和我们的响应式实用程序类。

.col-xs-6 .col-sm-3
调整视口大小或在手机上查看示例。
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3 
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

除了在响应断点处清除列之外，您可能还需要重置偏移、推送或拉取。请参阅网格示例中的实际操作。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

删除排水沟

从一行中删除排水沟，它是.row-no-gutters类的列。

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6 
<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

偏移列

使用类将列向右移动.col-md-offset-*。这些类逐列增加一列的左边距*。例如，.col-md-offset-4移动.col-md-4四列。

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3 
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

您还可以使用.col-*-offset-0类覆盖来自较低网格层的偏移量。

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

嵌套列

要使用默认网格嵌套您的内容，请在现有列中添加一.row组新列。嵌套行应包括一组不超过 12 列的列（不需要使用所有 12 个可用列）。.col-sm-*.col-sm-*

级别 1：.col-sm-9
级别 2：.col-xs-8 .col-sm-6
级别 2：.col-xs-4 .col-sm-6 
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列排序

.col-md-push-*使用和.col-md-pull-*修饰符类轻松更改内置网格列的顺序。

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9 
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

更少的 mixins 和变量

除了用于快速布局的预构建网格类之外，Bootstrap 还包括 Less 变量和 mixin，用于快速生成您自己的简单语义布局。

变量

变量确定列数、装订线宽度和开始浮动列的媒体查询点。我们使用这些来生成上面记录的预定义网格类，以及下面列出的自定义 mixins。

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

混合

Mixin 与网格变量结合使用，为各个网格列生成语义 CSS。

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

示例用法

您可以将变量修改为您自己的自定义值，或者仅使用带有默认值的 mixin。这是一个使用默认设置创建两列布局的示例，其间有间隙。

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

排版

标题

所有 HTML 标题，<h1>通过<h6>，都可用。.h1through.h6类也可用，当您想要匹配标题的字体样式但仍希望您的文本内联显示时。

h1。引导标题

 半粗体 36px

h2。引导标题

 半粗体 30px

h3。引导标题

 半粗体 24px

h4。引导标题

 半粗体 18px
h5。引导标题
 半粗体 14px
h6. 引导标题
 半粗体 12px 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

在任何带有通用<small>标签或.small类的标题中创建更轻的辅助文本。

h1。引导标题辅助文本

h2。引导标题辅助文本

h3。引导标题辅助文本

h4。引导标题辅助文本
h5。引导标题辅助文本
h6. 引导标题辅助文本
 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

正文副本

Bootstrap 的全局默认font-size值为14px，aline-height为1.428。这适用于<body>所有段落。此外，<p>（段落）的下边距为其计算的行高的一半（默认为 10 像素）。

Nullam quis risus eget urna mollis ornare vel eu leo。Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。Nullam id dolor id nibh ultricies 车辆。

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。Donec ullamcorper nulla non metus auctor fringilla。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit。Donec ullamcorper nulla non metus auctor fringilla。

Maecenas sed diam eget risus varius blandit sat amet non magna。Donec id elit non mi porta gravida 在 eget metus。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit。

<p>...</p>

铅正文副本

通过添加使段落脱颖而出.lead。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。Duis mollis, est non commodo luctus。

<p class="lead">...</p>

用更少的东西建造

印刷比例基于variables.less :@font-size-base和中的两个 Less 变量@line-height-base。第一个是始终使用的基本字体大小，第二个是基本行高。我们使用这些变量和一些简单的数学来创建我们所有类型的边距、填充和行高等等。自定义它们，Bootstrap 会适应。

内联文本元素

标记文本

由于在另一个上下文��的相关性而突出显示一系列文本，请使用<mark>标签。

您可以使用标记标签强调文本。

You can use the mark tag to <mark>highlight</mark> text.

删除的文字

要指示已删除的文本块，请使用<del>标签。

这行文本将被视为已删除的文本。

<del>This line of text is meant to be treated as deleted text.</del>

删除线文本

要指示不再相关的文本块，请使用<s>标签。

这行文本将被视为不再准确。

<s>This line of text is meant to be treated as no longer accurate.</s>

插入的文本

为了指示对文档的添加，请使用<ins>标签。

这行文本被视为对文档的补充。

<ins>This line of text is meant to be treated as an addition to the document.</ins>

带下划线的文字

要为文本添加下划线，请使用<u>标签。

这行文本将呈现为下划线

<u>This line of text will render as underlined</u>

使用带有轻量级样式的 HTML 的默认强调标记。

小文本

为了不强调内联或文本块，使用<small>标签将文本设置为父级大小的 85%。标题元素接收自己font-size的嵌套<small>元素。

您也可以使用内联元素.small代替 any <small>。

这行文本应被视为精美印刷品。

<small>This line of text is meant to be treated as fine print.</small>

大胆的

用于强调具有较重字体粗细的文本片段。

以下文本片段呈现为粗体文本。

<strong>rendered as bold text</strong>

斜体

用于强调带有斜体的文本片段。

以下文本片段呈现为斜体文本。

<em>rendered as italicized text</em>

替代元素

随意使用<b>和<i>在 HTML5 中。<b>旨在突出单词或短语而不传达额外的重要性，而<i>主要用于语音、技术术语等。

对齐类

使用文本对齐类轻松将文本重新对齐到组件。

左对齐文本。

居中对齐的文本。

右对齐文本。

对齐文本。

没有换行文本。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

转换类

使用文本大写类转换组件中的文本。

小写文本。

大写文本。

大写的文本。

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

缩写

<abbr>用于缩写和首字母缩略词的 HTML 元素的风格化实现，以在悬停时显示扩展版本。带有属性的缩写title有一个浅点的底部边框和一个悬停时的帮助光标，为悬停和辅助技术的用户提供额外的上下文。

基本缩写

单词属性的缩写是attr。

<abbr title="attribute">attr</abbr>

初始主义

添加.initialism一个略小的字体大小的缩写。

HTML是自切片面包以来最好的东西。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

提供最近的祖先或整个工作的联系信息。通过以 . 结尾的所有行来保留格式<br>。

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103 电话
： (123) 456-7890
全名
[email protected] 
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

块引用

用于引用文档中其他来源的内容块。

默认块引用

环绕<blockquote>任何HTML作为引用。对于直接报价，我们建议使用<p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

块引用选项

标准的简单变化的样式和内容更改<blockquote>。

命名源

添加一个<footer>用于识别来源。将源作品的名称包装在<cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题 中著名的人 
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

备用显示器

添加.blockquote-reverse具有右对齐内容的块引用。

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题 中著名的人 
<blockquote class="blockquote-reverse">
  ...
</blockquote>

列表

无序

顺序无关紧要的项目列表。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • 马萨的整数 molestie lorem
  • pretium nisl aliquet 的促进作用
  • Nulla volutpat aliquam velit
    • 菜豆
    • Purus sodales ultricies
    • 前庭前庭端口扫描仪
    • Ac tristique libero volutpat 在
  • Faucibus porta lacus fringilla vel
  • Aenean sat amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

已订购

顺序确实很重要的项目列表。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. 马萨的整数 molestie lorem
  4. pretium nisl aliquet 的促进作用
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sat amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

无样式

删除list-style列表项的默认值和左边距（仅限直接子项）。这仅适用于直接子列表项，这意味着您还需要为任何嵌套列表添加类。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • 马萨的整数 molestie lorem
  • pretium nisl aliquet 的促进作用
  • Nulla volutpat aliquam velit
    • 菜豆
    • Purus sodales ultricies
    • 前庭前庭端口扫描仪
    • Ac tristique libero volutpat 在
  • Faucibus porta lacus fringilla vel
  • Aenean sat amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

排队

将所有列表项放在一行上，display: inline-block;并带有一些浅色填充。

  • Lorem ipsum
  • 菜豆
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

描述

术语列表及其相关描述。

描述列表
描述列表非常适合定义术语。
欧伊斯莫德
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。
Donec id elit non mi porta gravida 在 eget metus。
马勒苏达门
Etiam porta sem malesuada magna mollis euismod。 
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

横向描述

使术语和描述<dl>并排排列。像 default 一样从堆叠开始<dl>，但是当导航栏展开时，这些也是如此。

描述列表
描述列表非常适合定义术语。
欧伊斯莫德
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。
Donec id elit non mi porta gravida 在 eget metus。
马勒苏达门
Etiam porta sem malesuada magna mollis euismod。
Felis euismod semper eget lacinia
Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut bakerum massa justo sit amet risus。 
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

自动截断

水平描述列表将截断太长而无法放入左列的术语text-overflow。在较窄的视口中，它们将更改为默认的堆叠布局。

代码

排队

用 .包裹内联代码片段<code>。

例如， <section>应包装为内联。 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

用户输入

使用<kbd>表示通常通过键盘输入的输入。

要切换目录，请键入 cd后跟目录的名称。
要编辑设置，请按 ctrl + , 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

基本块

用于<pre>多行代码。请务必转义代码中的任何尖括号以进行正确渲染。

<p>此处为示例文本...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

您可以选择添加.pre-scrollable该类，它将设置最大高度为 350 像素并提供一个 y 轴滚动条。

变量

对于指示变量，请使用<var>标签。

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

样本输出

为了指示程序的块样本输出，请使用<samp>标签。

此文本应被视为计算机程序的示例输出。

<samp>This text is meant to be treated as sample output from a computer program.</samp>

表

基本示例

对于基本样式（浅色填充和仅水平分隔线），将基类添加.table到任何<table>. 它可能看起来超级多余，但鉴于其他插件（如日历和日期选择器）广泛使用表格，我们选择隔离我们的自定义表格样式。

可选的表格标题。
# 名 姓 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特 
<table class="table">
  ...
</table>

条纹行

用于.table-striped将斑马条纹添加到<tbody>.

跨浏览器兼容性

条纹表通过:nth-childCSS 选择器设置样式，这在 Internet Explorer 8 中不可用。

# 名 姓 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特 
<table class="table table-striped">
  ...
</table>

带边框的桌子

.table-bordered在表格和单元格的所有边添加边框。

# 名 姓 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特 
<table class="table table-bordered">
  ...
</table>

悬停行

添加.table-hover以在<tbody>.

# 名 姓 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特 
<table class="table table-hover">
  ...
</table>

精简表

通过将单元格填充减半来添加.table-condensed以使表格更紧凑。

# 名 姓 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
<table class="table table-condensed">
  ...
</table>

上下文类

使用上下文类为表格行或单个单元格着色。

班级 描述
.active 将悬停颜色应用于特定的行或单元格
.success 表示成功或积极的行动
.info 表示中性的信息变化或行动
.warning 表示可能需要注意的警告
.danger 表示危险或潜在的负面行为
# 列标题 列标题 列标题
1 栏目内容 栏目内容 栏目内容
2 栏目内容 栏目内容 栏目内容
3 栏目内容 栏目内容 栏目内容
4 栏目内容 栏目内容 栏目内容
5 栏目内容 栏目内容 栏目内容
6 栏目内容 栏目内容 栏目内容
7 栏目内容 栏目内容 栏目内容
8 栏目内容 栏目内容 栏目内容
9 栏目内容 栏目内容 栏目内容 
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

向辅助技术传达意义

使用颜色为表格行或单个单元格添加含义仅提供视觉指示，不会传达给辅助技术的用户 - 例如屏幕阅读器。确保由颜色表示的信息在内容本身（相关表格行/单元格中的可见文本）中是显而易见的，或者通过替代方式包含在内，例如隐藏在.sr-only类中的附加文本。

响应式表

.table通过包装任何内容来创建响应式表格，.table-responsive使它们在小型设备（768 像素以下）上水平滚动。当查看任何大于 768 像素宽的东西时，您不会在这些表格中看到任何差异。

垂直剪裁/截断

响应式表格使用overflow-y: hidden，它会剪掉超出表格底部或顶部边缘的任何内容。特别是，这可以剪掉下拉菜单和其他第三方小部件。

Firefox 和字段集

Firefox 有一些尴尬width的字段集样式，涉及干扰响应表。如果没有我们在 Bootstrap 中未提供的特定于 Firefox 的 hack，则无法覆盖这一点：

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

有关更多信息，请阅读此 Stack Overflow 答案。

# 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题
1 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格
2 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格
3 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格
# 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题
1 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格
2 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格
3 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

形式

基本示例

单个表单控件会自动接收一些全局样式。默认情况下，所有 textual <input>、<textarea>和<select>元素.form-control都设置为width: 100%;。将标签和控件包裹起来.form-group以获得最佳间距。

此处的示例块级帮助文本。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

不要将表单组与输入组混合

不要将表单组直接与输入组混合。相反，将输入组嵌套在表单组内。

内联表格

为左对齐和内联块控件添加.form-inline到您的表单（不必是 a ）。这仅适用于视口中至少 768 像素宽的表单。<form>

可能需要自定义宽度

width: 100%;Bootstrap 中默认应用了输入和选择。在内联表单中，我们将其重置为width: auto;多个控件可以驻留在同一行。根据您的布局，可能需要额外的自定义宽度。

始终添加标签

如果您没有为每个输入添加标签，屏幕阅读器将无法处理您的表单。对于这些内联表单，您可以使用.sr-only类隐藏标签。还有其他替代方法可以为辅助技术提供标签，例如aria-label、aria-labelledby或title属性。如果这些都不存在，屏幕阅读器可能会使用该placeholder属性（如果存在），但请注意，placeholder不建议使用 of 作为其他标签方法的替代品。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00 
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

水平形式

.form-horizontal使用 Bootstrap 的预定义网格类，通过添加到表单（不一定是） ，在水平布局中对齐标签和表单控件组<form>。这样做会将.form-groups 更改为网格行，因此不需要.row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

支持的控件

示例表单布局中支持的标准表单控件示例。

输入

最常见的表单控件，基于文本的输入字段。包括对所有 HTML5 类型的支持：text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 和color.

需要类型声明

type只有正确声明输入时，输入才会完全设置样式。

<input type="text" class="form-control" placeholder="Text input">

输入组

要在任何基于文本的之前和/或之后添加集成文本或按钮<input>，请查看输入组组件。

文本区域

支持多行文本的表单控件。根据需要更改rows属性。

<textarea class="form-control" rows="3"></textarea>

复选框和收音机

复选框用于在列表中选择一个或多个选项，而单选框用于从多个选项中选择一个。

支持禁用的复选框和单选，但要在 parent 悬停时提供“不允许”光标<label>，您需要将.disabled类添加到 parent .radio、.radio-inline、.checkbox或.checkbox-inline.

默认（堆叠）


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

内联复选框和收音机

对出现在同一行的控件使用一系列复选框或单选框上的.checkbox-inline或类。.radio-inline


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

没有标签文本的复选框和单选框

如果您在 中没有文本<label>，则输入的位置与您期望的一样。目前仅适用于非内联复选框和收音机。请记住仍然为辅助技术提供某种形式的标签（例如，使用aria-label）。

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

选择

请注意，许多原生选择菜单（即在 Safari 和 Chrome 中）具有无法通过border-radius属性修改的圆角。

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

对于<select>具有该属性的控件，multiple默认显示多个选项。

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

静态控制

当您需要在表单中的表单标签旁边放置纯文本时，请.form-control-static使用<p>.

电子邮件@example.com

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

电子邮件@example.com

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

焦点状态

我们删除了某些表单控件上的默认outline样式，并box-shadow在其位置应用了:focus.

演示:focus状态

上面的示例输入使用我们文档中的自定义样式来:focus演示.form-control.

禁用状态

disabled在输入上添加布尔属性以防止用户交互。禁用的输入看起来更亮并添加了一个not-allowed光标。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

禁用的字段集

将disabled属性添加到 a<fieldset>以立即禁用其中的所有控件<fieldset>。

关于链接功能的警告<a>

默认情况下，浏览器会将 a 内的所有原生表单控件（<input>和<select>元素<button>）<fieldset disabled>视为禁用，从而阻止键盘和鼠标在它们上的交互。但是，如果您的表单还包含<a ... class="btn btn-*">元素，则这些元素只会被赋予pointer-events: none. 如关于按钮禁用状态的部分（特别是锚元素的子部分）中所述，此 CSS 属性尚未标准化，并且在 Opera 18 及更低版本或 Internet Explorer 11 中不完全支持，并且赢得了'不要阻止键盘用户能够聚焦或激活这些链接。因此，为了安全起见，请使用自定义 JavaScript 禁用此类链接。

跨浏览器兼容性

disabled虽然 Bootstrap将在所有浏览器中应用这些样式，但 Internet Explorer 11 及更低版本并不完全支持<fieldset>. 使用自定义 JavaScript 禁用这些浏览器中的字段集。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

只读状态

在输入上添加readonly布尔属性以防止修改输入的值。只读输入看起来更轻（就像禁用输入一样），但保留标准光标。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

帮助文本

表单控件的块级帮助文本。

将帮助文本与表单控件相关联

帮助文本应与使用该aria-describedby属性相关的表单控件显式关联。这将确保辅助技术（例如屏幕阅读器）在用户聚焦或进入控件时宣布此帮助文本。

一段帮助文本，换行并可能超出一行。 
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

验证状态

Bootstrap 包括表单控件上的错误、警告和成功状态的验证样式。要使用，添加.has-warning, .has-error, 或.has-success到父元素。该元素内的任何.control-label、.form-control和都将接收验证样式。.help-block

向辅助技术和色盲用户传达验证状态

使用这些验证样式来表示表单控件的状态仅提供基于颜色的视觉指示，不会传达给辅助技术用户（例如屏幕阅读器）或色盲用户。

确保还提供了替代的状态指示。例如，您可以在表单控件的<label>文本本身中包含有关状态的提示（如以下代码示例中的情况），包含Glyphicon（使用.sr-only该类具有适当的替代文本 - 请参阅Glyphicon 示例），或通过提供附加帮助文本块。特别是对于辅助技术，无效的表单控件也可以分配一个aria-invalid="true"属性。

一段帮助文本，换行并可能超出一行。 
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

带有可选图标

您还可以通过添加.has-feedback和右侧图标添加可选的反馈图标。

反馈图标仅适用于文本<input class="form-control">元素。

图标、标签和输入组

对于没有标签的输入和右​​侧有附加组件的输入组，需要手动定位反馈图标。出于可访问性原因，强烈建议您为所有输入提供标签。如果您希望阻止显示标签，请将它们与.sr-only类一起隐藏。如果您必须不使用标签，请调整top反馈图标的值。对于输入组，right根据​​插件的宽度将值调整为适当的像素值。

将图标的含义传达给辅助技术

为确保辅助技术（例如屏幕阅读器）正确传达图标的含义，应在.sr-only类中包含额外的隐藏文本，并与使用它相关的表单控件显式关联aria-describedby。或者，确保以某种其他形式传达含义（例如，特定文本输入字段存在警告的事实），例如更改<label>与表单控件关联的实际文本。

尽管以下示例已经在文本本身中提到了它们各自表单控件的验证状态，但出于说明目的，已包含<label>上述技术（使用.sr-only文本和）。aria-describedby

（成功）
（警告）
（错误）
@
（成功） 
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

水平和内联形式的可选图标

（成功）
@
（成功） 
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>
（成功）

@
（成功） 
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

.sr-only带有隐藏标签的可选图标

如果您使用.sr-only该类来隐藏表单控件<label>（而不是使用其他标签选项，例如aria-label属性），Bootstrap 将在添加图标后自动调整图标的位置。

（成功）
@
（成功） 
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

控制大小

使用类似的类设置高度，使用类似.input-lg的网格列类设置宽度.col-lg-*。

高度尺寸

创建与按钮大小匹配的更高或更短的表单控件。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

水平表单组大小

.form-horizontal通过添加.form-group-lg或快速调整标签和表单控件的大小.form-group-sm。

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

列大小

将输入包装在网格列或任何自定义父元素中，以轻松实施所需的宽度。

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

纽扣

按钮标签

<a>在、<button>或<input>元素上使用按钮类。

关联 
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

特定于上下文的用法

虽然按钮类可以用于<a>和<button>元素，但<button>我们的导航和导航栏组件仅支持元素。

充当按钮的链接

如果<a>元素被用作按钮——触发页面内功能，而不是导航到当前页面中的另一个文档或部分——它们也应该被赋予适当的role="button".

跨浏览器渲染

作为最佳实践，我们强烈建议<button>尽可能使用该元素以确保匹配的跨浏览器呈现。

除此之外，Firefox <30中存在一个错误，它阻止我们设置基于line-heightof<input>的按钮，导致它们与 Firefox 上其他按钮的高度不完全匹配。

选项

使用任何可用的按钮类来快速创建样式按钮。

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

向辅助技术传达意义

使用颜色为按钮添加含义仅提供视觉指示，不会传达给辅助技术的用户 - 例如屏幕阅读器。确保由颜色表示的信息在内容本身（按钮的可见文本）中是显而易见的，或者通过其他方式包含在内，例如隐藏在.sr-only类中的附加文本。

尺寸

喜欢更大或更小的按钮？添加.btn-lg、.btn-sm或.btn-xs用于其他尺寸。

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

通过添加.btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

活动状态

激活时，按钮将显示为按下状态（背景较暗、边框较暗和嵌入阴影）。对于<button>元素，这是通过:active. 对于<a>元素，它是用.active. 但是，如果您需要以编程方式复制活动状态，则可以使用.activeon <button>s（并包含该属性）。aria-pressed="true"

按钮元素

不需要添加:active，因为它是一个伪类，但是如果您需要强制相同的外观，请继续添加.active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

锚元素

将.active类添加到<a>按钮。

主链接 关联 

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

禁用状态

使用 . 使按钮看起来无法点击opacity。

按钮元素

将disabled属性添加到<button>按钮。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

跨浏览器兼容性

如果您将disabled属性添加到 a <button>，Internet Explorer 9 及更低版本将使用我们无法修复的令人讨厌的文本阴影呈现文本灰色。

锚元素

将.disabled类添加到<a>按钮。

主链接 关联 

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

我们.disabled这里作为实用类使用，类似于普通.active类，所以不需要前缀。

链接功能警告

此类pointer-events: none用于尝试禁用<a>s 的链接功能，但该 CSS 属性尚未标准化，并且在 Opera 18 及更低版本或 Internet Explorer 11 中不完全支持。此外，即使在支持的浏览器中pointer-events: none，键盘导航不受影响，这意味着有视力的键盘用户和辅助技术用户仍然能够激活这些链接。因此，为了安全起见，请使用自定义 JavaScript 禁用此类链接。

图片

响应式图像

通过添加类，可以使 Bootstrap 3 中的图像响应友好.img-responsive。这适用于max-width: 100%;,height: auto;和display: block;图像，以便它很好地缩放到父元素。

要使使用.img-responsive该类的图像居中，请使用.center-block而不是.text-center. 有关使用的更多详细信息，请参阅帮助程序类部分.center-block。

SVG 图像和 IE 8-10

在 Internet Explorer 8-10 中，SVG 图像.img-responsive的大小不成比例。要解决此问题，请width: 100% \9;在必要时添加。Bootstrap 不会自动应用它，因为它会导致其他图像格式复杂化。

<img src="..." class="img-responsive" alt="Responsive image">

图像形状

将类添加到<img>元素中，以便在任何项目中轻松设置图像样式。

跨浏览器兼容性

请记住，Internet Explorer 8 不支持圆角。

140x140 140x140 140x140 
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

助手类

上下文颜色

使用少数强调实用程序类通过颜色传达意义。这些也可以应用于链接，并且会在悬停时变暗，就像我们的默认链接样式一样。

Fusce dapibus，tellus ac cursus commodo，tortor mauris nibh。

Nullam id dolor id nibh ultricies vehicula ut id elit。

Duis mollis, est non commodo luctus, nisi erat porttitor ligula。

Maecenas sed diam eget risus varius blandit sat amet non magna。

Etiam porta sem malesuada magna mollis euismod。

Donec ullamcorper nulla non metus auctor fringilla。

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

处理特异性

有时，由于另一个选择器的特殊性，无法应用强调类。在大多数情况下，一个足够的解决方法是将您的文本包装在一个<span>类中。

向辅助技术传达意义

使用颜色来添加含义仅提供视觉指示，不会传达给辅助技术的用户 - 例如屏幕阅读器。确保由颜色表示的信息对于内容本身是显而易见的（上下文颜色仅用于加强文本/标记中已经存在的含义），或者通过其他方式包含在内，例如隐藏在.sr-only类中的附加文本.

背景背景

与上下文文本颜色类类似，可以轻松地将元素的背景设置为任何上下文类。锚组件将在悬停时变暗，就像文本类一样。

Nullam id dolor id nibh ultricies vehicula ut id elit。

Duis mollis, est non commodo luctus, nisi erat porttitor ligula。

Maecenas sed diam eget risus varius blandit sat amet non magna。

Etiam porta sem malesuada magna mollis euismod。

Donec ullamcorper nulla non metus auctor fringilla。

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

处理特异性

有时，由于另一个选择器的特殊性，无法应用上下文背景类。在某些情况下，一个足够的解决方法是将元素的内容包装在一个<div>类中。

向辅助技术传达意义

与上下文颜色一样，确保通过颜色传达的任何含义也以不纯粹的表现形式传达。

关闭图标

使用通用关闭图标来关闭模式和警报等内容。

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

插入符号

使用插入符号指示下拉功能和方向。请注意，默认插入符号将在下拉菜单中自动反转。

<span class="caret"></span>

快速浮动

使用类将元素向左或向右浮动。!important包括在内以避免特异性问题。类也可以用作 mixin。

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

不适用于导航栏

要将导航栏中的组件与实用程序类对齐，请使用.navbar-leftor.navbar-right代替。有关详细信息，请参阅导航栏文档。

中心内容块

通过 将元素设置为display: block并居中margin。可作为 mixin 和 class 使用。

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

清除修复

float通过添加.clearfix 到父元素轻松清除s 。利用Nicolas Gallagher 推广的 micro clearfix 。也可以用作mixin。

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

显示和隐藏内容

使用和类强制显示或隐藏元素（包括屏幕阅读器） 。这些类用于避免特异性冲突，就像快速浮动一样。它们仅可用于块级切换。它们也可以用作 mixin。.show.hidden!important

.hide可用，但它并不总是影响屏幕阅读器，从 v3.0.1 起已弃用。使用.hidden或.sr-only代替。

此外，.invisible可用于仅切换元素的可见性，这意味着它display不会被修改，并且元素仍然可以影响文档的流程。

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

屏幕阅读器和键盘导航内容

将元素隐藏到除屏幕阅读器之外的所有设备.sr-only。结合.sr-only以.sr-only-focusable在元素获得焦点时再次显示元素（例如，仅由键盘用户）。遵循可访问性最佳实践所必需的。也可以用作mixin。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

图像替换

利用.text-hide类或 mixin 帮助将元素的文本内容替换为背景图像。

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  .text-hide();
}

响应式实用程序

为了更快地进行移动友好开发，请使用这些实用程序类通过媒体查询按设备显示和隐藏内容。还包括用于在打印时切换内容的实用程序类。

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

可用课程

使用单个或组合可用的类来跨视口断点切换内容。

超小型设备手机（<768px） 小型设备平板电脑（≥768px） 中型设备台式机（≥992px） 大型设备台式机（≥1200px）
.visible-xs-* 可见的
.visible-sm-* 可见的
.visible-md-* 可见的
.visible-lg-* 可见的
.hidden-xs 可见的 可见的 可见的
.hidden-sm 可见的 可见的 可见的
.hidden-md 可见的 可见的 可见的
.hidden-lg 可见的 可见的 可见的

从 v3.2.0 开始，.visible-*-*每个断点的类有三种变体，一种对应于display下面列出的每个 CSS 属性值。

班组 CSSdisplay
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

因此，例如，对于超小 ( xs) 屏幕，可用的.visible-*-*类是：.visible-xs-block、.visible-xs-inline和.visible-xs-inline-block。

类.visible-xs, .visible-sm,.visible-md和.visible-lg也存在，但从v3.2.0 开始不推荐使用。它们大致相当于.visible-*-block，除了用于切换<table>相关元素的其他特殊情况。

打印类

与常规响应类类似，使用它们来切换打印内容。

课程 浏览器 打印
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		可见的
.hidden-print 可见的

该类.visible-print也存在，但自 v3.2.0 起已弃用。除了 -相关元素.visible-print-block的其他特殊情况外，它大致等价于。<table>

测试用例

调整浏览器大小或在不同设备上加载以测试响应式实用程序类。

可见于...

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

✔ 在 x-small 上可见
✔ 小尺寸可见
中等的 ✔ 在介质上可见
✔ 大尺寸可见
✔ 在 x-small 和 small 上可见
✔ 在中型和大型上可见
✔ 在 x-small 和 medium 上可见
✔ 大小可见
✔ 在 x-small 和 large 上可见
✔ 中小型可见

隐藏在...

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

✔ 隐藏在 x-small 上
✔ 隐藏在小
中等的 ✔ 隐藏在媒体上
✔隐藏在大
✔ 隐藏在 x-small 和 small
✔ 隐藏在大中型
✔ 隐藏在 x-small 和 medium
✔ 隐藏在大小
✔ 隐藏在 x-small 和 large
✔ 隐藏在中小型

少用

Bootstrap 的 CSS 建立在 Less 之上，Less 是一个预处理器，具有变量、mixin 和用于编译 CSS 的函数等附加功能。那些希望使用源 Less 文件而不是我们编译的 CSS 文件的人可以利用我们在整个框架中使用的众多变量和 mixin。

Grid 变量和 mixin 包含在 Grid system 部分中。

编译引导程序

Bootstrap 至少可以通过两种方式使用：使用已编译的 CSS 或使用源 Less 文件。要编译 Less 文件，请参阅入门部分，了解如何设置开发环境以运行必要的命令。

第三方编译工具可能适用于 Bootstrap，但我们的核心团队不支持它们。

变量

变量在整个项目中用作集中和共享常用值（如颜色、间距或字体堆栈）的一种方式。有关完整的细分，请参阅定制器。

颜色

轻松使用两种配色方案：灰度和语义。灰度颜色提供对常用黑色阴影的快速访问，而语义包括分配给有意义的上下文值的各种颜色。

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

按原样使用这些颜色变量中的任何一个，或将它们重新分配给您的项目更有意义的变量。

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

脚手架

一些用于快速自定义站点骨架关键元素的变量。

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

只需一个值即可使用正确的颜色轻松设置链接样式。

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

请注意，它@link-hover-color使用了一个功能，这是来自 Less 的另一个很棒的工具，可以自动创建正确的悬停颜色。您可以使用darken、lighten、saturate和desaturate。

排版

使用一些快速变量轻松设置字体、文本大小、行距等。Bootstrap 也利用这些来提供简单的排版混合。

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

图标

用于自定义图标位置和文件名的两个快速变量。

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

成分

Bootstrap 中的组件使用一些默认变量来设置常用值。这里是最常用的。

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

供应商混合

供应商混合是通过在编译的 CSS 中包含所有相关供应商前缀来帮助支持多种浏览器的混合。

盒子尺寸

使用单个 mixin 重置组件的盒子模型。有关上下文，请参阅Mozilla 的这篇有用的文章。

从 v3.2.0 开始不推荐使用mixin ，并引入了 Autoprefixer。为了保持向后兼容性，Bootstrap 将继续在内部使用 mixin，直到 Bootstrap v4。

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

圆角

今天，所有现代浏览器都支持非前缀border-radius属性。因此，没有.border-radius()mixin，但 Bootstrap 确实包含用于快速圆整对象特定一侧的两个角的快捷方式。

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

框（Drop）阴影

如果您的目标受众正在使用最新最好的浏览器和设备，请务必单独使用该box-shadow属性。如果您需要对旧版 Android（v4 之前）和 iOS 设备（iOS 5 之前）的支持，请使用已弃用的mixin 来获取所需的-webkit前缀。

从 v3.1.0 开始不推荐使用mixin ，因为 Bootstrap 不正式支持不支持标准属性的过时平台。为了保持向后兼容性，Bootstrap 将继续在内部使用 mixin，直到 Bootstrap v4。

一定要rgba()在你的盒子阴影中使用颜色，这样它们就可以尽可能地与背景无缝融合。

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

过渡

多个 mixin 以提高灵活性。将所有转换信息设置为一个，或根据需要指定单独的延迟和持续时间。

从v3.2.0 开始不推荐使用mixin，并引入了 Autoprefixer。为了保持向后兼容性，Bootstrap 将继续在内部使用 mixin，直到 Bootstrap v4。

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

转型

旋转、缩放、平移（移动）或倾斜任何对象。

从v3.2.0 开始不推荐使用mixin，并引入了 Autoprefixer。为了保持向后兼容性，Bootstrap 将继续在内部使用 mixin，直到 Bootstrap v4。

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

动画

一个 mixin 用于在一个声明中使用所有 CSS3 的动画属性，而其他 mixin 用于单个属性。

从v3.2.0 开始不推荐使用mixin，并引入了 Autoprefixer。为了保持向后兼容性，Bootstrap 将继续在内部使用 mixin，直到 Bootstrap v4。

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

不透明度

为所有浏览器设置不透明度并为 IE8 提供filter后备。

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

占位符文本

为每个字段中的表单控件提供上下文。

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

列

通过 CSS 在单个元素中生成列。

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

渐变

轻松将任意两种颜色转换为背景渐变。更高级并设置方向、使用三种颜色或使用径向渐变。使用单个 mixin，您可以获得所需的所有前缀语法。

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

您还可以指定标准双色线性渐变的角度：

#gradient > .directional(#333; #000; 45deg);

如果您需要理发条纹样式的渐变，那也很容易。只需指定一种颜色，我们将覆盖半透明的白色条纹。

#gradient > .striped(#333; 45deg);

提高赌注并改用三种颜色。使用这些 mixin 设置第一种颜色、第二种颜色、第二种颜色的色标（百分比值，例如 25%）和第三种颜色：

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

小心！如果您需要删除渐变，请务必删除filter您可能添加的任何特定于 IE 的内容。您可以通过在.reset-filter()旁边使用 mixin来做到这一点background-image: none;。

实用程序混合

实用程序混合是组合其他不相关的 CSS 属性以实现特定目标或任务的混合。

清除修复

忘记添加class="clearfix"任何元素，而是.clearfix()在适当的地方添加 mixin。使用Nicolas Gallagher的micro clearfix。

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

水平居中

快速居中其父元素中的任何元素。需要width或被max-width设置。

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

尺码助手

更轻松地指定对象的尺寸。

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

可调整大小的文本区域

轻松配置任何文本区域或任何其他元素的调整大小选项。默认为正常浏览器行为 ( both)。

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

截断文本

使用带有单个 mixin 的省略号轻松截断文本。要求元素为block或inline-block水平。

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

视网膜图像

指定两个图像路径和@1x 图像尺寸，Bootstrap 将提供@2x 媒体查询。如果您有许多图像要提供，请考虑在单个媒体查询中手动编写您的视网膜图像 CSS。

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

使用 Sass

虽然 Bootstrap 是基于 Less 构建的，但它也有一个官方的 Sass 端口。我们在单独的 GitHub 存储库中维护它，并使用转换脚本处理更新。

包括什么

由于 Sass 端口有一个单独的 repo 并且服务的受众略有不同，因此该项目的内容与主要的 Bootstrap 项目有很大不同。这确保了 Sass 移植与尽可能多的基于 Sass 的系统兼容。

小路 描述
lib/ Ruby gem 代码（Sass 配置、Rails 和 Compass 集成）
tasks/ 转换器脚本（将上游的 Less 转为 Sass）
test/ 编译测试
templates/ 指南针包清单
vendor/assets/ Sass、JavaScript 和字体文件
Rakefile 内部任务，例如 rake 和 convert

访问Sass 端口的 GitHub 存储库以查看这些文件的运行情况。

安装

有关如何安装和使用 Bootstrap for Sass 的信息，请参阅GitHub 存储库自述文件。它是最新的源代码，包括用于 Rails、Compass 和标准 Sass 项目的信息。

Sass 的引导程序