综述

获取Bootstrap基础设施关键部分的内幕,包括我们让web开发变得更好、更快、更强壮的最佳实践。

HTML5 doctype

Bootstrap的某些HTML元素和CSS属性需要使用HTML5的doctype(文档类型)。在你项目中的每个页面都要包含它。

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

移动设备优先

在Bootstrap 2中,我们对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap 3中,我们重写了整个框架,使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说,Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是一个单一的文件。

为了确保正确的渲染和触摸缩放,需要在<head>之中添加viewport meta(元数据)标签

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

您可以在viewport meta(元数据)标签上添加user-scalable=no来禁用移动设备上的缩放功能。 这将禁用缩放,这意味着用户只能够滚动屏幕,这样您的网站感觉更有点像原生应用。总体而言,我们不推荐每个站点使用这个,你应该谨慎使用!

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

Bootstrap设置了基础全局样式,包括显示、排版和链接。尤其是,我们还:

  • body设置了background-color: #fff;样式
  • 设置了排版的基本属性@font-family-base@font-size-base@line-height-base
  • 通过@link-color设置全局的链接颜色,:hover状态下应用链接下划线

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

Normalize.css

为了增强跨浏览器表现的一致性,我们使用了Normalize,这是由Nicolas GallagherJonathan Neal维护的库。

容器

Bootstrap需要一个.container元素来包包裹页面上的内容 和 容纳我们的栅格系统。您可以在你的项目中使用两个容器中。 两个容器是可嵌套的,我们需要注意 padding或其他因素。

固定宽度的容器,使用.container

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

全屏幕宽度的容器使用 .container-fluid, 填满你视口的整个宽度。

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

栅格系统

Bootstrap包括了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动扩展到最多12列。它包含了方便布局的预定义classes,还有强大的mixin用于生成更具语义的布局

简介

栅格系统用于通过一系列的行(row)与列(column)创建页面布局,你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统是如何工作的:

  • 行(row)必须包含在 .container(固定宽度)或 .container-fluid(全屏宽度)中,以便自身调整或填充。
  • 用行(row)来创建一组水平的列(column)。
  • 内容应放在列(column)中, 只有列(column)可以是行(row)的直接子元素。
  • 预定义的栅格类,像 .rowand .col-xs-4可用于快速创建栅格布局。Less mixins 也可以用来创建更具语义化的布局。
  • 列通过设置 padding来创建列之间的间隔。然后通过在 .row上设置负值的 margin来抵消为第一和最后一列的 padding
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4来创建。
  • 如果一行中超过12列, 各组额外列,将作为一个单元, 换到新的一行。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小型设备覆盖栅格类。 因此,在元素上应用任何 .col-md-类不仅会影响媒体设备,同时如果 .col-lg-不存在, 也影响大型设备。

通过研究案例,可以将这些原理应用到你的代码中。

媒体查询

在栅格系统中,我们在LESS文件中使用下面的媒体查询(media query)来创建关键的分界点阈值。

/* 特别小的设备 (phones, less than 768px) */ 
/* 没有媒体查询, 因为在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)
栅格系统行为 总是水平排列 开始是堆叠在一起的,超过这些阈值将变为水平排列
容器的宽度 None (auto) 750px 970px 1170px
class前缀 .col-xs- .col-sm- .col-md- .col-lg-
# 列数 12
列宽 Auto ~62px ~81px ~97px
间隔宽度 30px (每列左右均有15px)
可嵌套 Yes
偏移 Yes
列排序 Yes

案例:从堆叠到水平排列

使用单一的一组.col-md-*栅格class,你就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。将列(col-*-*)放置于任何.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>

案例:移动设备和桌面

是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的class吧,即.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-* classe我们来创建更加动态和强大的布局吧。

.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-column-wide 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>

响应列重置

即便有上面给出的四组栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用.clearfix响应式工具classe

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.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>

位移列

使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如,.col-md-offset-4.col-md-4向右移动了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>

嵌套列

为了使用内置的栅格将内容嵌套,通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 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>

LESS mixin和变量

预置栅格class快速布局之外,Bootstrap包含了一组LESS变量和mixin用于快速生成你自己的语义化栅格布局。

变量

通过变量来定义列数、列间隔宽、媒体查询阈值。我们使用这些变量生成预定义的栅格class,如上所示,还有如下所示的定制mixin。

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

Mixins

Mixin用来和栅格变量一同使用生成栅格中纵列的定义。

// 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> 均是可用的。另外,还提供了.h1.h6 class,你可以使用这些匹配标题的文本样式,但还是希望您的文字内联显示。

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 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. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
<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设置为14pxline-height1.428。这些直接赋给<body>和所有段落元素。另外,<p>(段落)还被设置了一半行高的底部外边距(愚人码头注:margin-bottom)(默认情况下是10px)。

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 vehicula.

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 sit amet non magna. Donec id elit non mi porta gravida at 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>

使用Less构建

排版尺寸是基于variables.less文件中定义的两个LESS变量:@font-size-base@line-height-base。第一个变量定义了基本的全局font-size(愚人码头注:字体大小 ),第二个变量定义基本的line-height(愚人码头注:行高)。 我们使用这些变量和一些简单的公式计算出其它所有类型的margin、 padding和line-height。自定义这些变量即可改变Bootstrap的默认样式。

内联文本元素

标记文本

在某种情况下,高亮显示文本,使用<mark> 标签。

You can use the mark tag to highlight text.

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

删除文本

用于指示文本已删除的块,使用 <del> 标签。

This line of text is meant to be treated as deleted text.

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

加删除的文本

用于指示文本不再相关块,使用 <s> 标签。

This line of text is meant to be treated as no longer accurate.

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

附加文本

用于指示附加到文档 , 使用 <ins> 标签。

This line of text is meant to be treated as an addition to the document.

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

带下划线的文本

加带下划线的文本, 使用 <u> 标签。

This line of text will render as underlined

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

Make use of HTML's default emphasis tags with lightweight styles.

小号文本

对于不需要强调的inline或block类型的文本,使用<small>标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size

你还可以给行内元素赋予.small以代替任何<small>标签。

This line of text is meant to be treated as fine print.

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

着重

通过增加font-weight强调一段文本。

下面的这段文本进行了着重处理

<strong>rendered as bold text</strong>

斜体

用斜体强调一段文本。

下面的这段文本就是通过斜体进行强调的

<em>rendered as italicized text</em>

可选元素

还可以使用HTML5中定义的<b><i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示,<i>大部分用于发言、技术短语等情况。

文本对齐样式

通过文本对齐class,可以简单方便的将文字重新对齐。

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<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>

改变大小写

通过这几个类可以改变文本的大小写。

Lowercased text.

Uppercased text.

Capitalized text.

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

缩写

当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

基本缩略

如想看完整的内容可把鼠标悬停在缩略语上, 但需要在 <abbr> 元素上包含title属性。

An abbreviation of the word attribute is attr.

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

首字母缩写

为缩略语添加.initialism可以将其font-size设置的更小些。

HTML is the best thing since sliced bread.

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

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

引用

在你的文档中引用其他来源的内容。

默认引用

将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用,我们建议用<p>标签。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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

引用选项

对于标准样式的<blockquote>,可以通过几个简单的变体就能改变风格和内容。

命名来源

添加<small>标签或.small class 来注明引用来源。来源名称可以放在<cite>标签里面。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<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>

另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

列表

无序列表

列表中各个项的顺序 没有明确关系。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

有序列表

列表中各个项的顺序 明确关系。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

无样式列表

移除了默认的list-style样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素,也就是说,你需要对所有嵌套的列表都添加此class才能具有同样的样式。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

内联列表

通过设置display: inline-block;并添加少量的padding值,将所有元素放置于同一行。

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

描述

带有描述的短语列表。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平排列的描述

.dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起,随着导航条逐渐展开而排列在一样。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

自动截断

通过text-overflow,水平排列的描述列表将会截断左侧太长的短语。在较窄的可视窗口(viewport)内,列表将变为默认堆叠排列的布局方式。

代码

内联代码

在正文中通过<code>标签包裹内联样式的代码片段。

举个例子, <section> 应该内联包裹.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

用户输入代码

使用 <kbd> 标签标记那些用户通过键盘输入的内容。

To switch directories, type cd followed by the name of the directory.
To edit settings, press 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>Sample text here...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

你还可以使用.pre-scrollable 样式,其作用是设置max-height为350px,并显示垂直滚动条。

变量

使用<var>标签用于指示代码中的变量。

y = mx + b

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

简单的输出

For indicating blocks sample output from a program use the <samp> tag.

使用<samp>标签,用于指示从程序项目中输出的内容 。

This text is meant to be treated as sample output from a computer program.

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

表格

基本案例

为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将其样式独立出来。

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table>

条纹间隔的行

利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。

跨浏览器兼容性

条纹状表格是通过:nth-child CSS选择器实现的,而这一功能不被Internet Explorer 8支持。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  ...
</table>

带边框的表格

.table-bordered样式,为表格和其中的每个单元格增加边框。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

鼠标悬停状态下的行

利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table>

紧凑的表格

利用.table-condensed可以让表格更加紧凑,单元格中的padding均会减半。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  ...
</table>

状态类

通过这些状态类可以为行或单元格设置颜色。

Class Description
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 表示硬格普通信息改变或行动
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<!-- 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中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。

Firefox 和 fieldset 元素

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式,导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码,否则无解:

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

更多信息请参考 this Stack Overflow answer.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

表单

基本案例

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control<input><textarea><select>元素都将被默认设置为width: 100%;。将label元素和前面提到的这些控件包裹在.form-group中可以呈现很好的的排列布局。

Example block-level help text here.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter 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>元素添加.form-inline样式类,可使其内容左对齐,并且表现为inline-block级的控件。只适用于浏览器窗口不小于 768px 宽度时(窗口宽度再小的话就会使表单折叠)。

需要手动设置宽度

在Bootstrap中,input和select的宽度默认被设置为width: 100%; 。 在内联表单,我们需要将这些元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,额外的自定义宽度可能是很有必要的。

总是添加label标签

如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于那些内联表单,你可以通过为label设置.sr-only已将其隐藏。还有一些辅助技术提供label标签的替代方案,比如aria-label, aria-labelledbytitle属性。如果这些都不存在,屏幕阅读器可能会采取使用占位符属性,如果存在的话,使用占位符来替代其他的标记,但要注意,这种方法是不妥当的。

<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="jane.doe@example.com">
  </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="Enter 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预置的栅格样式类,可以将label和控件组水平并排布局。这样做将改变.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再使用.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>

支持的控件

在表单布局案例中展示了其所支持的标准表单控件。

Inputs

大部分表单控件、文本输入域控件。包括HTML5支持的所有类型:text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

必须添加类型声明

只有正确设置了type的input控件才能被赋予正确的样式。

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

输入组合

要添加完整的文本或按钮 之前和/或 之后的任何基于文本的<input>检查输入组件

Textarea

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

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

Checkboxes 和 radios

Checkbox用于选择列表中的一个或多个选项,而radio用于从多个选项中只选择一个。

设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签,如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式,请将 .radio.radio-inline.checkbox.checkbox-inline<fieldset> 赋予 .disabled 类。

默认外观(堆叠在一起)


<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>

内联的 checkboxes 和 radios

通过将.checkbox-inline.radio-inline应用到一系列的checkbox或radio控件上,可以使这些控件排列在一行。


<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文本的Checkboxes 和 radios

如果需要<label>内没有文字,input的定位又是你说期望的。目前只适用于非内联的checkboxes和radios。请记住,仍然需要提供某种形式的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>

Selects

请注意,许多原生的 select 菜单呈现为圆角,即使是Safari和Chrome,都无法通过border-radius属性修改。

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

使用默认选项或添加multiple属性可以显示多个选项。

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

静态控件

在水平布局的表单中,当你需要将一行纯文本放置于label的同一行,为<p>元素添加.form-control-static即可。

email@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@example.com</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>

email@example.com

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</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样式,并对其:focus状态赋予了box-shadow样式。

演示 :focus 状态

在本文档中,我们为上面实例中的输入框赋予了自定义的样式,用于演示 .form-control 元素的 :focus 状态。

被禁用的状态

为输入框设置disabled属性可以防止用户输入,并能改变一点外观,使其更直观。

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

被禁用的fieldset(控件组)

<fieldset>设置disabled属性可以禁用<fieldset>中包含的所有控件。

需要注意的有关<a>链接功能

这个class只改变<a class="btn btn-default">按钮的外观,并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。

默认情况下,浏览器会将在<fieldset disabled>内的所有原生表单控件(<input>, <select><button>元素)设为为禁用,防止键盘和鼠标跟他们发生交互。然而,如果你的表单也包括<a ... class="btn btn-*">元素,这些<a>元素只会被赋予 pointer-events: none。正如在关于 禁用状态的按钮 章节中(和sub-section中锚定元素)所描述的那样,该CSS属性尚不规范,而且在Opera18及以下,或在Internet Explorer11中并未得到全面支持,并且不会阻止键盘用户能够获取焦点或激活这些链接。所以为了安全起见,建议使用自定义JavaScript来禁用这些链接。

跨浏览器兼容性

虽然Bootstrap会将这些样式应用到所有浏览器上,Internet Explorer 9及以下浏览器中的<fieldset>并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset

<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>

校验状态

Bootstrap对表单控件的校验状态,如error、warning和success状态,都定义了样式。使用时,添加.has-warning.has-error.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label.form-control.help-block都将接受这些校验状态的样式。

输送验证状态到辅助技术

使用这些验证样式来表示一个表单控件的状态,只有提供一个视觉指示,不会被输送给辅助技术的使用者 - 如屏幕阅读器。

Bootstrap 还提供状态的另一种指示。例如,您可以在表单控件的<label> 标签文本上显示状态(如在下面示例代码中的情况),或表单控件使用aria-describedby属性,来关联具有验证状态文字信息的附加元素(见下一节的例子)。在error(错误状态)的情况下,你也可以在表单控件上使用 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">
</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"> 元素上

Icons, labels, 和 输入控件组

对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组,需要手动为其图标定位。为了让所有用户都能访问你的网站,我们强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来,可以通过添加 sr-only 类来实现。如果的确不能添加 label 标签,请调整图标的 top 值。对于输入框组,请根据你的实际情况调整 right 值。

输送图标的意义到辅助技术

为了确保辅助技术- 如屏幕阅读器 - 正确传达一个图标的含义,额外的隐藏的文本应包含在.sr-only类中,并明确关联使用了aria-describedby的表单控件。或者,以某些其他形式(例如,文本输入字段有一个特定的警告信息)传达含义,例如改变与表单控件实际相关联的<label>的文本。

虽然下面的例子已经提到各自表单控件本身的<label>文本的验证状态,上述技术(使用.sr-only 文本 和aria-describedby)已经包括用于说明的目的。

(success)
(warning)
(error)
<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>

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

(success)
<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>
</form>
(success)
<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>

可选的图标与设置 .sr-only 类的 label

如果你使用.sr-only类来隐藏表单控件的<label> (而不是使用其它标签选项,如 aria-label属性), 一旦它被添加,Bootstrap 会自动调整图标的位置。

(success)
<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>

控件尺寸

通过.input-lg之类的class可以为控件设置高度,通过.col-lg-*之类的class可以为控件设置宽度。

高度尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸。

<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-group-lg.form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

<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>

列尺寸

用栅格系统中的列包裹input或其任何父元素,都可很容易的为其设置宽度。

<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>

帮助文本

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

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

帮助文本应明确地与使用了aria-describedby 属性的表单控件关联,这将确保辅助技术- 如屏幕阅读器 - 当用户获取控件焦点或进入控制时将显示这个帮助文本。

A block of help text that breaks onto a new line and may extend beyond one line.
<label class="sr-only" 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>

按钮

按钮标签

<a>, <button>, 或<input>元素上使用button样式类。

Link
<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)的bug, 我们无法设定的<input>型按钮的 line-height, 在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样式类可以创建块级按钮(display: block;)—按钮宽度为父元素100%的宽度。

<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实现的。然而,你还可以结合使用.active应用到<button>上,并通过编程的方式使其处于活动状态。

按钮元素

由于: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>

链接元素

可以给<a>按钮添加.active 样式类。

Primary link Link

<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(愚人码头注:opacity: .65;) 属性,就可以使按钮呈现出无法点击的效果。

按钮元素

<button>添加disabled属性。

<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>

跨浏览器的兼容性

如果为<button>添加disabled属性,Internet Explorer 9及更低版本的浏览器将会把按钮中的文本设置为灰色,并带有恶心的阴影,目前还没有办法解决。

链接元素

可以给<a>按钮添加.disabled 样式类。

Primary link Link

<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作为工具class使用,就像.active 样式类一样,因此不需要增加前缀。

链接功能不受影响

这个类的使用 pointer-events: none尝试禁用<a>中的链接功能, 但这个CSS属性尚未标准化, 在Opera 18及以下,或在Internet Explorer11并不完全支持。 所以,为了安全起见,使用自定义JavaScript来禁用此类链接的功能。

图片

响应式的图片

图片在Bootstrap 3 中通过图片上添加.img-responsive样式类能友好的支持响应式自适应。 它应用max-width: 100%;height: auto;到图片上,使其很好地根据父元素缩放。

SVG 图像 和 IE 8-10

在 Internet Explorer 8-10 中,设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题,在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性,因为这会导致其他图像格式出现错乱。

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

图片形状

<img>元素增加不同的样式类,就可以在任何项目中轻松的改变其样式。

跨浏览器兼容性

记住,Internet Explorer 8是不支持圆角的。

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<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 sit 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 sit 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>

三角符号

使用三角符号来表示下拉功能和方向。 注意,默认三角符号将在 dropup菜单中自动反转。

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

快速设置浮动

通过这两个class让页面元素左右浮动。 !important被用来避免某些问题。也可以像mixin一样使用这两个class。

<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-left.navbar-right。查看导航条文档以获取详情。

内容区域居中

将页面元素设置为 display: block并通过设置margin使其居中。可以作为mixin或class使用。

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

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

清除浮动(Clearfix)

使用.clearfix清除任意页面元素的浮动。我们使用了Nicolas Gallagher的the 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();
}

显示和隐藏内容

通过.show.hidden可以强制显示或隐藏任一页面元素(包括在屏幕阅读器上)。这两个class使用了!important以避免冲突,原因和快速浮动类似。这两个class只能做用于块级元素,也可以作为mixin使用。

.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;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

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

针对屏幕阅读器的内容

使用.sr-only可以针对除了屏幕阅读器之外的所有设备隐藏一个元素。当它获取焦点时候(例如,键盘用户),结合 .sr-only.sr-only-focusable 将再次显示该元素。 对于可访问性最佳实践也很有用。此class还可以作为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();
}

响应式工具

通过使用这些工具class可以根据屏幕和不同的媒体查询显示或隐藏页面内容,加速针对移动设备的开发。

尝试使用这些class并避免创建同一个网站的不同版本,从而能够完善不同设备上的显示效果。响应式工具目前只是针对块级元素, 不支持inline元素和表格元素。

可用的class

通过单独或联合使用以下列出的class,可以针对不同屏幕尺寸隐藏或显示页面内容。

超小屏幕 Phones (<768px) 小屏幕 Tablets (≥768px) 中等屏幕 Desktops (≥992px) 大屏幕 Desktops (≥1200px)
.visible-xs-* 可见
.visible-sm-* 可见
.visible-md-* 可见
.visible-lg-* 可见
.hidden-xs 可见 可见 可见
.hidden-sm 可见 可见 可见
.hidden-md 可见 可见 可见
.hidden-lg 可见 可见 可见

从v3.2.0开始,.visible-*-*有3中变化,下面是一个列出每个CSS display属性值的列表。

Group of classes CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

所以,举个例子,对超小屏幕(xs)(<768px),可用的.visible-*-*样式是:.visible-xs-block, .visible-xs-inline, 和 .visible-xs-inline-block.

.visible-xs.visible-sm.visible-md.visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外,它们与 .visible-*-block 大体相同。

打印类

和常规的响应式样式类一样,使用下面的样式类可以针对打印机隐藏或显示某些内容。

Classes 浏览器 打印
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Visible
.hidden-print Visible

.visible-print 也同样存在,但是从v3.2.0开始不赞成使用。 他们类似相当于.visible-print-block,除非有额外的特殊情况 切换<table>相关 元素。

测试用例

调整你的浏览器窗口的尺寸或者在不同的设备上加载此页面,均可测试上面提到的工具class。

在...上可见

带有绿色标记的元素表示其在当前浏览器窗口中 是可见的

✔ 在超小屏幕上可见
✔ 在小屏幕上可见
中等屏幕 ✔ 在中等屏幕上可见
✔ 在大屏幕上可见
✔ 在超小屏幕和小屏幕上可见
✔ 在中等屏幕和大屏幕上可见
✔ 在超小屏幕和中等屏幕上可见
✔ 在小屏幕和大屏幕上可见
✔ 在超小屏幕和大屏幕上可见
✔ 在小屏幕和中等屏幕上可见

在...上隐藏

带有绿色标记的元素表示其在当前浏览器窗口中是隐藏的

✔ 在超小屏幕上隐藏
✔ 在小屏幕上隐藏
中等屏幕 ✔ 在中等屏幕上隐藏
✔ 在大屏幕上隐藏
✔ 在超小屏幕和小屏幕上隐藏
✔ 在 medium 和 large 上隐藏
✔ 在超小屏幕和中等屏幕上隐藏
✔ 在小屏幕和大屏幕上隐藏
✔ 在超小屏幕和大屏幕上隐藏
✔ 在小屏幕和中等屏幕上隐藏

使用 Less

Bootstrap 的 CSS 文件是通过 Less 源码编译出来的。Less 是一门预处理语言,支持变量、mixin、函数等额外功能。对于希望使用 Less 源码而非编译出来的 CSS 文件的用户,Bootstrap 框架中包含的大量变量、mixin 将非常有价值。

栅格变量和mixins 包含在栅格系统部分中

编译 Bootstrap

Bootstrap至少可以通过两种方式使用:编译后的CSS或或Less的源文件。 要编译Less文件,可以通过README来了解如何设置您的开发环境中来运行必要的命令。

第三方编译工具可能可以编译Bootstrap, 但我们的核心团队的不提供支持和维护。

变量

变量用于整个项目,以此来集中共享常用的值,如颜色,间距,或字体栈。 完整的分解, 请参阅定制

颜色

很容易使用两种颜色命名方案:灰度(grayscale)和语言(semantic)。 颜色灰度(grayscale)提供快速访问黑色的常用色调, 而语言(semantic)包括多种不同的颜色。

@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

少数几个变量,用于快速定制 您的网站关键要素。

// 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利用这些提供简单的排版混入(typographic mixins)。

@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;

浏览器供应商的 mixins

浏览器供应商的 mixins是 在你编译通过的CSS中加入相关浏览器供应商的前缀,用来支持多种浏览器。

Box-sizing

使用单独的mixin重置您的组件盒模型。了解详情请查看Mozilla的帮助文档

这个mixin(混入)在V3.2.0中被弃用,引进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;
}

盒子 (下拉框) 阴影

如果你的目标用户是使用的是最新的和最好的浏览器和设备,一定要只使用box-shadow属性自身。如果您需要支持老版本的Android(低于-V4)和iOS(低于-iOS5)设备, 那么使用这个废弃mixin(混入),他会提供你所需-webkit前缀。

这个mixin(混入)在V3.1.0中被弃用,因为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;
}

过渡(Transitions)

灵活多重的mixin(混入)。可以设置全部的过度(transition)信息在一个transition中,或根据需要指定一个独立的延迟和持续时间。

这个mixin(混入)在V3.2.0中被弃用,引进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;
}

变形(Transformations)

旋转,缩放,平移(移动)或倾斜的任何对象。

这个mixin(混入)在V3.2.0中被弃用,引进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;
}

动画(Animations)

一个单一的mixin(混入)在一个声明中使用所有的CSS3的动画属性,其他的mixin(混入)使用个别属性。

这个mixin(混入)在V3.2.0中被弃用,引进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;
}

Opacity

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

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

占位符(Placeholder)文本

为表单控件中每个文本域提供占位符(Placeholder)文本的颜色。

.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
}

Columns

通过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;
}

渐变(Gradients)

很容易把任何两种颜色变成背景渐变。想要使他更高级些,可以设置一个direction(方向),使用三种颜色,也可以使用径向(radial)渐变。使用一个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);

小心! 如果你想要删除一个渐变,那么一定要删除您可能已添加任何IE特有的 filter。你可以通过使用.reset-filter()mixin(混入)将背景重置background-image: none;

实用的 mixins

实用的 mixins可以结合其它不相关的CSS属性来实现特定目标或任务。

Clearfix

任何元素上可以忽略添加 class="clearfix",在适当地方添加.clearfix() mixin(混入)。使用来自Nicolas Gallaghermicro clearfix

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

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

水平居中

快速居中父元素内的任何元素。需要设置 widthmax-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) {
  // 选项: 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 移植版存放于单独的仓库,并针对不同的使用群体,这个项目中的内容与 Bootstrap 主项目有很大不同。这也是为了保证 Sass 移植版与更多基于 Sass 的系统相兼容。

Path Description
lib/ Ruby gem code (Sass configuration, Rails and Compass integrations)
tasks/ Converter scripts (turning upstream Less to Sass)
test/ Compilation tests
templates/ Compass package manifest
vendor/assets/ Sass, JavaScript, 和 font 文件
Rakefile Internal tasks, such as rake and convert

请访问 Sass 移植版在 GitHub 上的仓库 来了解这些文件。

安装

关于如何安装并使用 Bootstrap 的 Sass 移植版,请参考GitHub 仓库中的 readme 文件。 此仓库中包含了最新的源码以及如何与 Rails、Compass 以及标准 Sass 项目一同使用的详细信息。

Bootstrap for Sass