CSS
设置全局CSS样式，基本的HTML元素均可以通过class设置样式并得到增强效果，还有先进的栅格系统。
概览
深入了解Bootstrap底层结构的关键部分，包括我们让web开发变得更好、更快、更强壮的最佳实践。
HTML5文档类型
Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>移动设备优先
在Bootstrap 2中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap 3中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是一个单一的文件。
为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">响应式图片
通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%; 和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸。
<img src="..." class="img-responsive" alt="Responsive image">排版和链接
Bootstrap设置了全局样式，包括显示、排版和链接。尤其是，我们还：
- 将body标签的
margin清零 - 为
body标签设置了background-color: white;样式 - 设置了排版的基本属性
@font-family-base、@font-size-base和@line-height-base - Set the global link color via
@link-colorand apply link underlines only on:hover
这些样式可以在scaffolding.less文件中找到。
Normalize
为了增强跨浏览器表现的一致性，我们使用了Normalize，这是由Nicolas Gallagher和 Jonathan Neal维护的一个reset库。
Containers
用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了max-width，用以匹配栅格系统。
<div class="container">
...
</div>栅格系统
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
媒体查询
在栅格系统中，我们在LESS文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
/* 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) { ... }We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.
@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) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，超过这些阈值将变为水平排列 | ||
最大.container宽度 |
None (自动) | 750px | 970px | 1170px |
| class前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列数 | 12 | |||
| 最大列宽 | 自动 | 60px | 78px | 95px |
| 槽宽 | 30px (每列左右均有15px) | |||
| 可嵌套 | Yes | |||
| Offsets | N/A | Yes | ||
| 列排序 | N/A | Yes | ||
案例：从堆叠到水平排列
使用单一的一组.col-md-*栅格class，你就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。
.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>案例：移动设备和桌面
是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的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-sm-6 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
.col-xs-6 .col-sm-4 .col-md-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-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>Responsive column resets
即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用.clearfix和响应式工具classe。
<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"></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>In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier. See this in action in the grid example.
<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-md-9
Level 2: .col-md-6
Level 2: .col-md-6
<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-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-small) {
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-small) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-small) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-small) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-small) {
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-medium) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-medium) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-medium) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-medium) {
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-large) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-large) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-large) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-large) {
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. 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>元素。可以用来标记副标题。
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设置为14px，line-height为1.428。这些属性直接赋给<body>和所有段落元素。另外，<p>（段落）还被设置了等于1/2行高的底部外边距（margin）（即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 body copy
通过添加.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的默认样式。
强调
直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。
小号文本
对于不需要强调的inline或block类型的文本，使用<small>标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。
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
通过文本对齐class，可以简单方便的将文字重新对齐。
Left aligned text.
Center aligned text.
Right aligned 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>强调class
这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。
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>Dealing with specificity
Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.
缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
基本缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
An abbreviation of the word attribute is attr.
<abbr title="attribute">attr</abbr>Initialism
为缩略语添加.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
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>标签来注明引用来源。来源名称可以放在<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>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>另一种展示风格
使用.pull-right可以让引用展现出向右侧移动、对齐的效果。
<blockquote class="pull-right">
...
</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>有序列表
顺序至关重要的一组元素。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- 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;并添加少量的内补，将所有元素放置于同一列。
- 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>标签包裹内联样式的代码片段。
For example,
<section> should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.基本代码块
多行代码可以使用<pre>标签。为了正确的展示代码，注意将尖括号做转义处理。
<p>Sample text here...</p>
<pre><p>Sample text here...</p></pre>还可以使用.pre-scrollable class，其作用是设置max-height为350px，并在垂直方向展示滚动条。
表格
基本案例
为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将其样式独立出来。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<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 |
<table class="table table-striped">
...
</table>带边框的表格
利用.table-bordered为表格和其中的每个单元格增加边框。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | ||
<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 | ||
<table class="table table-condensed">
...
</table>状态class
通过这些状态class可以为行货单元格设置颜色。
| Class | 描述 |
|---|---|
.active
|
鼠标悬停在行或单元格上时所设置的颜色 |
.success
|
标识成功或积极的动作 |
.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 |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
</tr>响应式表格
将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。
| # | 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中可以获得最好的排列。
<form role="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>内联表单
为左对齐和inline-block级别的控件设置.form-inline，可以将其排布的更紧凑。
需要设置宽度
在Bootstrap中，input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。
一定要设置label
如果你没有为每个输入控件设置label，屏幕阅读器将无法正确识读。对于这些内联表单，你可以通过为label设置.sr-only已将其隐藏。
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" 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>水平排列的表单
通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。
<form class="form-horizontal" role="form">
<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>被支持的控件
在表单布局案例中展示了其所支持的标准表单控件。
Input
大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。
必须添加类型声明
只有正确设置了type的input控件才能被赋予正确的样式。
<input type="text" class="form-control" placeholder="Text input">Textarea
支持多行文本的表单控件。可根据需要改变rows属性。
<textarea class="form-control" rows="3"></textarea>Checkbox 和 radio
Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。
默认外观(堆叠在一起)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—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>Inline checkboxes
通过将.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>Select
使用默认选项或添加multiple属性可以显示多个选项。
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<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即可。
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>控件状态
通过为控件和label设置一些基本状态，可以为用户提供回馈。
输入焦点
我们移除了某些表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式。
<input class="form-control" id="focusedInput" type="text" value="This is focused...">被禁用的输入框
为输入框设置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代码禁用链接功能。
跨浏览器兼容性
虽然Bootstrap会将这些样式应用到所有浏览器上，Internet Explorer 9及以下浏览器中的<fieldset>并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset
<form role="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>校验状态
Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
</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>调整列尺寸
用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>帮助文本
用于表单控件的块级帮助文本。
<span class="help-block">自己独占一行或多行的块级帮助文本。</span>按钮
选项
使用下面列出的class可以快速创建一个带有样式的按钮。
<!-- 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>尺寸
需要让按钮具有不同尺寸吗？使用.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可以使其充满父节点100%的宽度，而且按钮也变为了块级（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>活动状态
当按钮处于活动状态时，其表现为被按压下（底色更深，边框夜色更深，内置阴影）。对于B<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 class。
<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>禁用状态
通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。
按钮元素
为<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 class。
<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 class一样，因此不需要增加前缀。
链接功能不受影响
上面提到的class只是改变<a>的外观，不影响功能。在此文档中，我们通过JavaScript代码禁用了链接的默认功能。
可作按钮使用的HTML标签
可以为<a>、<button>或<input>元素添加按钮class。
<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">跨浏览器表现
作为最佳实践，我们强烈建议尽可能使用<button>元素以确保跨浏览器的一致性样式。
出去其它原因，这个Firefox的bug让我们无法为基于<input>标签的按钮设置line-height，这导致在Firefox上，他们与其它按钮的高度不一致。
图片
为<img>元素增加不同的class，就可以轻松的改变其样式。
跨浏览器兼容性
你要知道，Internet Explorer 8是不支持圆角矩形的。
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">响应式图片
想要知道如何让图片具有响应式特性吗？请看响应式图片一节。
工具class
关闭按钮
通过使用一个象征关闭的图标，可以用来让模式对话框和警告框消失。
<button type="button" class="close" aria-hidden="true">×</button>快速设置浮动
通过这两个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>// 作为classe使用
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// 作为mixin使用
.element {
.center-block();
}清除浮动
使用.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 和 .hide设置display属性可以强行显示或隐藏任一页面元素。这两个class使用了!important以避免冲突，原因和快速浮动类似。这两个class只能用于块级元素，也可以作为mixin使用。
<div class="show">...</div>
<div class="hide">...</div>// Classes
.show {
display: block !important;
}
.hide {
display: none !important;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hide();
}针对屏幕阅读器的内容
使用.sr-only可以在任何地方隐藏页面元素，包括屏幕阅读器。其也可以作为mixin使用。
<div class="hidden"></div>// Usage as a Mixin
.example {
.hidden();
}Hide an element to all devices except screen readers with .sr-only. Necessary for following accessibility best practices. Can also be used as a mixin.
<a class="sr-only" href="#content">Skip to content</a>// Usage as a Mixin
.skip-navigation {
.sr-only();
}图片替换
使用.text-hide class（也可作为mixin使用）可以将页面元素所包含的文本内容替换为背景图。
<h1 class="text-hide">Custom heading</h1>// Usage as a Mixin
.heading {
.text-hide();
}响应式工具
通过使用这些工具class可以根据屏幕和不同的媒体查询显示或隐藏页面内容，加速针对移动设备的开发。
尝试使用这些class并避免创建同一个网站的不同版本，从而能够完善不同设备上的显示效果。响应式工具目前只是针对块级元素， 不支持inline元素和表格元素。
可用的class
通过单独或联合使用以下列出的class，可以针对不同屏幕尺寸隐藏或显示页面内容。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面 (≥992px) | 大屏幕 桌面 (≥1200px) | |
|---|---|---|---|---|
.visible-xs |
可见 | 隐藏 | 隐藏 | 隐藏 |
.visible-sm |
隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md |
隐藏 | 隐藏 | 可见 | 隐藏 |
.visible-lg |
隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xs |
隐藏 | 可见 | 可见 | 可见 |
.hidden-sm |
可见 | 隐藏 | 可见 | 可见 |
.hidden-md |
可见 | 可见 | 隐藏 | 可见 |
.hidden-lg |
可见 | 可见 | 可见 | 隐藏 |
打印class
和常规的响应式class一样，使用下面的class可以针对打印机隐藏或显示某些内容。
| Class | 浏览器 | 打印机 |
|---|---|---|
.visible-print |
隐藏 | 可见 |
.hidden-print |
可见 | 隐藏 |
测试用例
调整你的浏览器窗口的尺寸或者在不同的设备上加载此页面，均可测试上面提到的工具class。
在...上可见
带有绿色标记的元素表示其在当前浏览器窗口中是可见的。
超小
✔ Visible on x-small
小
✔ Visible on small
中等
✔ Visible on medium
大
✔ 大屏幕可见
✔ Visible on x-small and small
✔ Visible on medium and large
✔ Visible on x-small and medium
✔ Visible on small and large
✔ Visible on x-small and large
✔ Visible on small and medium
在...上隐藏
带有绿色标记的元素表示其在当前浏览器窗口中是隐藏的。