CSS
全局的CSS设定,基本的HTML元素样式和增强的扩展类,一个先进的栅格系统.
目录
概述
了解Bootstrap的基本关键原理,有助于引领我们更好,更快,更强地进行web开发.
HTML5 doctype
Bootstrap需要使用 HTML5 doctype 才能有效地使用HTML元素以及CSS属性.将如下包含到你的所有工程中.
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>移动设备优先
在Bootstrap 2 , 我们将添加移动设备优先的样式作为框架的一个关键面.在Bootstrap 3 ,我们重写了工程来使得总是移动设备优先,这个贯穿整个系统.事实上, Bootstrap是移动设备优先的.移动设备优先样式可以在整个lib中处处可见.
为了正确的表述以及缩放接触, 在你的<head> 标签中添加 viewport meta 标签.
<meta name="viewport" content="width=device-width, initial-scale=1">你可以禁用移动设备的缩放功能通过添加 user-scalable=no 到viewport meta 标签.禁用缩放意味着用户只能滚动,这使得你的网站看起来更像原生应用.纵观所有,我们不推荐每个站点都这样做,谨慎使用!
<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 attributes来作为排版的基准. - 通过
@link-color和仅当经过时才显示下划线来设置全局链接颜色.
这些样式可以在scaffolding.less中找到.
Normalize.css
为了提高跨屏幕一致性,我们使用 Normalize.css , 它是由Nicolas Gallagher和Jonathan Neal创建的.
Containers
Bootstrap 需要一个容器元素来包含网页内容以及作为我们的栅格系统的基础.你可以选择两种容器之一来应用于你的工程.记住,由于 padding 以及别的原因, 它们不用嵌套使用.
使用 .container 来作为一个响应式的固定宽度容器.
<div class="container">
...
</div>使用 .container-fluid 来作为一个百分百宽度, 占据你的视口的所有宽度的容器.
<div class="container-fluid">
...
</div>概述小结
通用模版
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>头文件必须添加的内容
<meta name="viewport" content="width=device-width, initial-scale=1">需要禁止缩放
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">固定宽度容器
<div class="container">
...
</div>百分比宽度容器
<div class="container-fluid">
...
</div>栅格系统
Bootstrap 包含了一个响应式,移动设备优先的栅格系统,它适当地将尺寸分为了12列作为设备或者视口的尺寸增量.它包含了易于分层参数的预定义类,以及强大的用于产生更多不同语义层次的混合类型.
介绍
栅格系统可以通过一些列的行和列来创建页面布局,以此来装住你的内容.这是一些Bootstrap栅格系统的工作原理:
- 行必须放置在上述两种容器中用于适当的对齐以及
padding. - 使用行来创建水平列分组
- 内容应当放置在列中,并且只有列才能作为行的直接孩子
- Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
- 预定义的栅格类如
.row以及.col-xs-4可以用来快速栅格分层.更少的混合物也可以被用来创建更多语义的分层. - 列通过
padding产生gutter(列内容之间的间隔).通过在rows上使用负值的margin可以抵消第一个和最后一个列的padding. - 负值的
margin就是如下例子升级的原因.正因如此,内容在栅格列中会被线性排列. - 栅格系统是用来指定你想要占据的十二个可用列数字而被创建的.例如, 三个相等的列可以使用三个
.col-xs-4 - 当一行多于十二列时,多于的列会另起一行.
- 当移动设备宽度大于等于临界点时,栅格类才凑效, 并会覆盖用于更小尺寸的栅格类.因此,例如,使用
.col-md会在中等尺寸设备上凑效并且会在那些没有.col-lg-*栅格类的大型尺寸设备上凑效.
看下面的例子,将这些原则应用到你的代码中.
媒体查询
我们在我们的Less文件中使用如下媒体需求来创建栅格系统的临界点.
/* 超小型设备 (手机, 小于 768px) */
/* 没有媒体查询因为这是Bootstrap默认的 */
/* 小型设备(平板,大于等于768px) */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备(台式,大于等于992px) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
/* 大型设备 (大型台式, 大于等于1200px) */
@media (min-width: @screen-lg-min) { ... }我们偶然会扩展这些媒体查询来包含一个大宽度来使得这些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) | 中型设备如台式(≥768px) | 大型设备如大型台式(≥1200px) |
|---|---|---|---|---|
| 栅格行为 | 开始是堆叠,大于临界值后水平排列 | 同左 | 同左 | 同左 |
| 容器宽度 | 无 (自动) | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数量 | 12 | 同左 | 同左 | 同左 |
| 列宽度 | Auto | ~62px | ~81px | ~97px |
| 槽宽度 | 30px (列的两边分别是15px) | 同左 | 同左 | 同左 |
| 能否嵌用 | 能 | 同左 | 同左 | 同左 |
| 能否偏移 | 能 | 同左 | 同左 | 同左 |
| 能否列排序 | 能 | 同左 | 同左 | 同左 |
例子,从堆叠到水平排列
使用一个单独的设定 — .col-md-* , 你可以创建一个基本的栅格系统, 这个系统开始是在移动设备和平板设备上是堆叠的(超小型设备会更小),而在台式(中型设备上)开始变得水平.将这些栅格列放置在任意的行中 .row .
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>例子:流式容器
通过将.container 改成 .container-fluid 来将固定宽度的栅格改为百分比宽度的栅格.
<div class="container-fluid">
<div class="row">
...
</div>
</div>例子:手机与台式
不想让你的列只是堆叠在小型设备?分别使用 .col-xs-* 和 .col-md-* 在你的列上.来看看下面例子,这是不是一个更好的注意?
<!-- 通过设置一个百分比宽度和另一个一半宽度来实现列堆叠 -->
<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>
<!-- 列在手机上是50%的宽度,在台式上是33.3.% -->
<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>
<!-- 无论在手机上还是台式上,列永远都是50% -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>例子:手机,平板,台式
基于前面的例子来创建更多动态和强势的分层通过使用 .col-sm-*
<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>
<!-- 可选: 删掉XS的列样式如果它不适用于大尺寸 -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>例子:列包裹
如果放置在一个行中的列超过12个,多于的列会另起一行.
<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 > 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>响应式列重置
尽管有了上面四种例子,你也一定会遇到一些问题—在一些特定的临界点,你的列表述不是很清楚因为它们一高一低.为了解决这个,组合使用 .clearfix 以及我们的响应式工具类.
<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>
<!-- 在需要的视口那里添加这个,这会使得上面的两列在一行,下面的列会在另一行,效果如下图 -->
<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>下图在宽度为767px(小于临界点768px)中,上面的两个列另起一行,下面的列另起另一行
当删掉 .clearfix .visible-xs-block 的时候,效果如下图
除了列在响应临界点清除外,你可能还需要重置偏移,列推以及列压.详参下面的例子.
<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-* 类来使列右偏移.这些类增加了列的左边的 margin .例如, .col-md-offset-4 移动了一个 .col-md-4 的距离.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>你也可以在小型列中覆盖偏移通过使用 .col-*-offset-0 , 下图在超小型设备上取消了偏移,而在小型设备以及以上实现偏移.
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>嵌套使用列
为了使用默认的栅格来嵌套你的内容,在一个已经存在的 .col-sm-*增加一个新的行和设置.col-sm-* 列.嵌套使用行应该包含一个列(0-12尺寸)(也不是说你非得全部使用12列的).
<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-* 可以快速改变已有栅格系统中列的排序.
Less混合类型与变量
除了预先定义好的以用于快速使用的栅格类, Bootstrap提供了Less变量以及混合类型用于快速生成你自己的简单的符合语义的层面.
变量
变量决定了列的数量, 槽宽,以及媒体查询点(该从哪个点开始浮动列).我们使用这些来产生预定义的上文提及的栅格类,以及自定义的下文提及的混合类型.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;混合类型
混合类型用于和栅格变量连接来产生用于单独栅格列的语义上的CSS.
下文因较少用到,不翻译
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}栅格系统小结
基本栅格系统模版
<div class="container">
...
<div class="row">
<div class="col-*-*">
你的列内容
</div>
</div>
...
</div>或
<div class="container-fluid">
...
<div class="row">
<div class="col-*-*">
你的列内容
</div>
</div>
...
</div>不同设备显示的列排列方式不同
<div class="container-fluid">
...
<div class="row">
<div class="col-md-1 col-sm-6">
你的列内容
</div>
</div>
...
</div>多于十二行时另起一行
<div class="container-fluid">
...
<div class="row">
<div class="col-md-9">
你的列内容
</div>
<div class="col-md-4">
你的列内容
</div>
<div class="col-md-6">
你的列内容
</div>
</div>
...
</div>固定尺寸设备块可见
<div class="row">
...
<!-- 仅在xs尺寸可见,在sm,md,lg隐藏 -->
<div class="clearfix visible-xs-block"></div>
...
</div>列偏移
<div class="row">
...
<div class="col-md-* col-*-offset-*"></div>
...
</div>列嵌套
<!-- 列的行的唯一直接孩子 -->
<div class="row">
<div class="col-md-10">
你的内容1
<div class="row">
<div class="col-md-8">
你的内容3
</div>
</div>
你的内容2
</div>
</div>列排序
<div class="col-md-* col-md-push-*"></div>
<!-- 以及 -->
<div class="col-md-* col-md-pull-*"></div>排版
标题
所有的HTML标题,从<h1>到<h6>都是可用的. .h1 到 .h6 类也是可以使用的,因为你有时候想使用h1到h6的字体样式但你又想让你的文字保持内联.
<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>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的全局默认字体大小为14px,行高是1.428.这被应用到<body> 以及所有的段落.除此之外, <p> (段落)底边距是行高的一半(默认是10px).
<p>...</p>突出页面主题
通过使用 .lead 来使一个段落突出.
<p class="lead">...</p>使用Less来bulit
排版尺寸基于两个Less变量: @font-size-base 以及 @line-height-base . 第一个是 font-size 贯穿的基准, 第二个是 line-height 贯穿的基准. 我们使用它们以及一些简单的算法来创建我们所有样式并且更多的外边距,内边距以及行高.你可以自定义它们并使Bootstrap适应它们.
内联文本元素
高亮
通过使用 <mark> 标签来高亮它们.
You can use the mark tag to <mark>highlight</mark> text.删除
通过使用 <del> 标签来删除它们.
<del>This line of text is meant to be treated as deleted text.</del>贯穿
通过使用 <s> 标签来贯穿它们.
<s>This line of text is meant to be treated as no longer accurate.</s>插入
通过使用 <ins> 标签来插入它们.
<ins>This line of text is meant to be treated as an addition to the document.</ins>下划线
通过使用 <u> 标签来下划线它们.
<u>This line of text will render as underlined</u>上面的例子都是利用HTML的默认元素来强调文本
小字体文本
通过使用<small> 来实现字体大小等于父容器的85%,可以嵌套使用.
你可以使用 .small 或者 <small>
<small>This line of text is meant to be treated as fine print.</small>加粗
通过使用 <strong> 标签来加粗它们.
<strong>rendered as bold text</strong>斜体
通过使用 <em> 标签来加粗它们.
<em>rendered as italicized text</em>可选的元素
<b>与i
<b>意味着强调但不表达额外的重要性而<i>大多用于语态,术语等.
用于对齐的类
通过使用文本对齐类组件很容易重新对齐文本.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>用于转换的类
通过使用文本大写类来实现文本转换.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>缩略语
用于缩略语的HTML元素abbr 在Bootstrap中增强了样式表达, 而且当鼠标经过的时候会显示该缩略语的全称.缩略语具有 title 属性,这种属性的特点是有细点下划线以及当经过时有帮助光标,给予额外的上下文指引.
基本缩略语
<abbr title="attribute">attr</abbr>首字母缩略语
通过添加 .initialism 到缩略语上来使字体稍微变小.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>地址
以最接近日常的方式来显示联系方式.通过 每行结束时使用 br 来保持格式.
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>引用
在你的文档中通过块引用来引用别的文章.
默认引用
用<blockquote> 包裹住任意的HTML内容作为引用.如果是直接引用, 我们推荐使用 <p>.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>引用参数
相对于标准标准的 <blockquote> , 样式和内容改变了一些.
命名引用来源
通过添加 <footer> 来定义引用的来源. 在来源文字中用 <cite> 来包含名称.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>另一种显示方式
通过为块引用添加 .blockquote-reverse 来实现内容右对齐
<blockquote class="blockquote-reverse">
...
</blockquote>列表
无序列表
无序列表的特点是列表项没有明确的顺序
<ul>
<li>...</li>
</ul>有序列表
有序列表的特点是列表项具有明确的顺序
<ol>
<li>...</li>
</ol>无样式
无样式列表删除了默认的列表样式以及第一代孩子的外边距.这个仅仅作用于列表项的直接孩子,意味着你需要嵌套使用这个样式到嵌套的列表中.
<ul class="list-unstyled">
<li>...</li>
</ul>内联
使得所有的列表项在一行中显示.
<ul class="list-inline">
<li>...</li>
</ul>描述
关于相关描述内容的列表项
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>水平描述
使得列表头与描述内容一行行的显示.小视口的时候是像默认的 <dl> 那样堆叠显示, 但当导航扩展变长的时候,会变成水平的.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>自动截断
水平描述列表将通过使用text-overflow来截断那些过长的内容以适应左边的列.在一些小的视口中,它们会变成堆叠状.
排版小结
标题
主标题
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
<!-- 或 -->
<span class="h1">...</span>
<span class="h2">...</span>
<span class="h3">...</span>
<span class="h4">...</span>
<span class="h5">...</span>
<span class="h6">...</span>副标题
<small>...</small>
<!-- 或 -->
<span class="small">...</span>页面主体
简单段落
<p>...</p>突出
<p class="lead">...</p>高亮
<mark>...</mark>删除
<del>...</del>贯穿
<s>...</s>插入
<ins>...</ins>下划线
<u>...</u>小文本
<small>...</small>加粗
<strong>...</strong>斜体
<em>...</em>对齐类
<p class="text-left">...</p>
<p class="text-center">...</p>
<p class="text-right">...</p>
<p class="text-justify">...</p>
<p class="text-nowrap">...</p>转换类
<p class="text-lowercase">...</p>
<p class="text-uppercase">...</p>
<p class="text-capitalize">...</p>缩略语
基本
<abbr title="...">...</abbr>首字母缩略
<abbr title="..." class="initialism">...</abbr>地址
<address>
<!-- 注意每行以<br>结束 -->
...
</address>引用
默认引用
<blockquote>
<p>...</p>
</blockquote>来源命名
<blockquote>
<p>...</p>
<footer>...<cite title="...">...</cite></footer>
</blockquote>右对齐
<blockquote class="blockquote-reverse">
...
</blockquote>列表
无序列表
<ul>
<li>...</li>
</ul>有序列表
<ol>
<li>...</li>
</ol>默认样式取消
<ul class="list-unstyled">
<li>...</li>
</ul>内联
<ul class="list-inline">
<li>...</li>
</ul>描述
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>水平描述
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>代码
内联
使用 <code> 来包含内联代码片段.
For example, <code><section></code> should be wrapped as inline.用户输入
使用 <kbd> 来暗示是需要通过键盘输入的
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> 来包含多行的代码.注意使用转义符.
<pre><p>Sample text here...</p></pre>你可以选择添加 .pre-scrollable 类,它会设置最大高度为350px,并提供y轴滚动条
变量
使用 <var> 标签来表示变量.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>案例输出
使用 <samp> 来表示由程序输出的案例块.
<samp>This text is meant to be treated as sample output from a computer program.</samp>代码小结
单行代码
<!-- 注意使用转义符 -->
<code>...</code>提醒用户输入
<kbd>...</kbd>多行代码
<!-- 注意使用转义符 -->
<pre>...</pre>变量
<var>...</var>程序控制台输出
<samp>...</samp>表格
基本样式
通过添加 .table 到 <table> 来实现基本样式 — 轻微的内边距以及只有水平分割线.这看起来相当多余,但这使用表格被普遍使用于其他如日历,日期选择等插件.我们可以选择自己喜欢的表格样式.
<table class="table">
...
</table>条纹间隔的行
通过添加 .table-striped 来使得任意表格的<tbody> 呈现出斑马条纹状.
跨浏览器兼容性
这个样式的原理是使用:nth-child类选择器, 这种类选择器不能在IE8中使用
<table class="table table-striped">
...
</table>边框表格
通过添加 table-bordered 来实现所有边存在边框
<table class="table table-bordered">
...
</table>经过行时有颜色变化
通过添加 .table-hover 来实现
<table class="table table-hover">
...
</table>紧凑表格
通过添加 .table-condensed 来让单元格内边距减半,借此来使得表格更加紧凑.
<table class="table table-condensed">
...
</table>情景类
使用情景类来让表格的行或者单独的单元格呈现出颜色.
| Class | 描述 |
|---|---|
.active | 将表格经过的颜色应用到特定的行或者单元格 |
.success | 表示一个成功的或者确认的动作 |
.info | 表示一个中立的消息性的改变或者动作 |
.warning | 表示一个需要注意的警告 |
.danger | 表示一个危险或者潜在取消的动作 |
例子
<!-- 在行上使用 -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- 在单元格 <th>或者<td>使用 -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>给无障碍技术传递上述意思
给表格的行或者单元格使用颜色来表示不同的含义只能在看得见的情况下凑效,这意味着将不能在无障碍技术中有效,如何屏幕阅读器.确认不仅是颜色而且更多的是内容本身是能够表达准确的意思,即词能达意.
响应式表格
响应式表格使用
overflow-y:hidden,它能够裁掉任意在表格底部或者顶部边缘的内容.特别是,能够裁掉下拉菜单以及其他第三方插件.火狐与域设定
火狐在域设定样式上存在缺陷,会干扰响应式表格.如果不用火狐工具不能重写,因此我们不提供在Bootstrap中.
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
<div class="table-responsive">
<table class="table">
...
</table>
</div>表格小结
基本样式
<table class="table">
...
</table>条纹间隔
<table class="table table-striped">
...
</table>边框
<table class="table table-bordered">
...
</table>鼠标悬停
<table class="table table-hover">
...
</table>紧凑
<table class="table table-condensed">
...
</table>情景类
<!-- 作用于行 -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- 作用于单元格 (<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>响应式
<div class="table-responsive">
<table class="table">
...
</table>
</div>表单
基本样式
单独的表单控件自动接收某些全局样式.所有的文本控件 <input> <textarea> select 如果带有 .form-control 会被设置成百分百宽度(默认).将标签以及控件包含在 .form-group 中可以实现最优空间配置.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>不要混乱表单组和输入框组
不要混乱表单组和输入框组,相反,应当将输入框组嵌到表单组
内联表单
通过添加 .form-inline 到你的表单中(不一定非得用于<form>),用于实现左对齐以及控件内联(≥768px下凑效)
可能需要自定义宽度
输入框和下拉框在Bootstrap中默认是width:100%.在内联表单中,我们重置成width:auto,因此多行控件会在一行中显示.取决于你的层次,自定义的宽度可能是需要的.
记得总是添加标签
当你的表单的每个输入框都没有标签的时候,屏幕阅读器读取是很困难的.对于这些内联表单,你可以通过使用.sr-only来隐藏标签.对于无障碍技术,还有更多的方式, 例如使用aria-label,aria-labelledby或者title属性.如果上述的你一个都没有用到的话,屏幕阅读器会使用placeholder属性,但并不建议这么做.
<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="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><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>水平表单
通过使用Bootstrap预定义的栅格类在水平层上来对齐标签以及控件组通过添加 .form-horizontal 到表单(不一定非得是<form>).从而使得 .form-group 表现得更像栅格的行,所以并不需要用 .row
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>支持的控件
下面是一些支持的表单控件的例子.
输入框
许多普通的表单控件都是基于文本的.包含所有HTML5类型: text , password, datetime, datetime-local , date , month, time , week , number , email , url ,search ,.tel 以及 color.
type属性是必须的
如果输入框没有明确的type是难以表现出特有的形态的.
<input type="text" class="form-control" placeholder="Text input">输入框组
可以将文字或者按钮集成到<input>的前或后边,下文会讲述
文本域
支持多行文本的控件.根据需要来改变 rows 属性
<textarea class="form-control" rows="3"></textarea>单选多选
多选用于多选,而单选用于单选.禁用单选和多选中的某项也是支持的,但为了使得当鼠标经过的时候呈现出禁用,你应当添加 .disabled 到 .radio , .radio-inline , .checkbox 或者 .checkbox-inline
默认堆叠
<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="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—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>内联的单选和多选
使用 .checkbox-inline 或者 .radio-inline 来实现内联显示.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>不带有标签的单选和多选
当你的 <label> 没有任何文字, 输入框会如你所想的那样显示.当前仅仅在非内联的单选和多选中凑效.记住还是得为了无障碍技术添加标签.(例如,使用 aria-label)
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>下拉
记住许多本地选择菜单,在Safari以及Chrome中,通过 border-radius 属性无法修改边框圆角.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>对于带有 multiple 属性的下拉框, 多选属性按照默认方式显示.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>静态控件
当你需要在表单中将纯文本放置在标签中时,在<p> 中使用 .form-control-static
<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><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
禁用状态
使用 boolean 属性到 disabled 来避免用户迷惑.禁用的输入框会呈现浅色以及禁用光标.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>域禁用
通过添加 disable 属性来让 <fieldset> 所有的控件禁用
关于
<a>标签作用的警告
默认地,浏览器会将所有在<fieldset disabled>中的本地表单控件包括<input>,<select>以及<button>禁用(包括键盘和鼠标).然而,如果你的表单里面含有<<a ... class="btn btn-*">,这只会引起pointer-events: none. 正如 在 ” disabled state for buttons”一节中所说的那样,这个CSS属性还没有标准化,并在Opera18以下,ITE11不支持,并不能禁止键盘用户获取链接焦点或者激活链接.因此,为了安全起见,我们还是使用JavaScript来禁用这样的链接.
跨屏幕兼容性
尽管Bootstrap会应用这些样式到所有的浏览器,IE11以及以下不能完全支持<fieldset>中的disabled属性.在这些浏览器中使用自定义的JavaScript来实现域禁用.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>只读状态
通过使用 readonly 来放置修改输入框的值.只读状态的输入框呈现浅色,但保持标准鼠标的光标.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>帮助文本
块级帮助文本用于表单控件
关联帮助文本与表单控件
帮助文本应当精确地与表单控件关联,它应当关联使用aria-describedby属性.这样,诸如屏幕阅读器之类的无障碍技术将在用户聚焦或进入这控件的时候呈现该帮助文本.
<label 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>验证状态
Bootstrap包含了错误,警告,以及成功状态.为了凑效,使用 .has-error , .has-warning , has-success 到父元素.任意的 .control-label , .form-control 以及 .help-block 会接受这个验证样式.
为无障碍技术或色盲用户传递验证状态
这些验证样式只能用于可见,无色盲状态下,并不能为无障碍技术用户,例如屏幕阅读器或者色盲用户表达.
确保提供一个可选的表示.例如,你可以包含一个关于控件<label>状态的hint,包括Glyphicon 或者通过提供一个帮助文本块.对于无障碍技术,也可以通过aria-invalid = "true"使表单控件失效.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>可以带有图标
你也可以通过添加 .has-feedback 来使右边有图标
反馈图标只能在 <input class="form-control"> 中凑效.
图标,标签以及输入框组
为没有标签的输入框以及输入框组人为的设定反馈图标的位置是必须的.强烈建议为为了能够实现可访问性为所有输入框提供标签.如果你希望禁用标签,你可以使用.sr-only.如果你一定要没有标签,调整反馈图标的top值.对于输入框组,根据你的插件的宽度调整right值到一个适当的像素.传递图标的含义给无障碍技术
为了让无障碍技术例如屏幕阅读器正确的传递图标的含义,应当添加带有.sr-only类的隐藏文本,并准确地关联使用aria-describedby的表单控件.可选地,确保其他表单也是正确表达含义,例如改变控件的标签的文本.
尽管接下来的例子已经在<label>的文本中准确地提及有效状态,上述的技巧依旧为了说明而被包含.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>在水平以及内联表单中图标也是可选的
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>在标签隐藏中图标也是可选的
如果你使用 .sr-only 类来隐藏表单控件的<label> ,Bootstrap会自动调整图标的位置(如果你添加的话)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>控件尺寸
通过使用类似于.input-lg 之类的类还设置高度,通过使用类似于.col-lg-* 之类的类来设置宽度.
高度尺寸
创建更高或更矮的表单控件以适应按钮尺寸
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>水平表单组尺寸
通过为 .form-horizontal 添加 .form-group-lg 或者 .form-group-sm 来快速调整控件以及标签的尺寸
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>列尺寸
用栅格列包含输入框,或者任意自定义的父元素,来轻松实现调整宽度.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>表单小结
基本样式
<form>
<!-- 线性叠加.form-group容器实现垂直表单 -->
<div class="form-group">
<label for="控件的id">...</label>
<input type="控件类型" class="form-control" id="控件的id" placeholder="...">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> ...
</label>
</div>
<button type="..." class="btn btn-default">...</button>
</form>内联
<!-- 将控件在一行,唯一的一行显示,控件数量越多,各控件分得的列宽越少 -->
<form class="form-inline">
<div class="form-group">
<label for="控件的id1">...</label>
<input type="控件类型" class="form-control" id="控件的id1" placeholder="...">
</div>
<div class="form-group">
<label for="控件的id2">...</label>
<input type="控件类型" class="form-control" id="控件的id2" placeholder="...">
</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="控件id1">...</label>
<input type="控件类型" class="form-control" id="控件id1" placeholder="...">
</div>
<div class="form-group">
<label class="sr-only" for="控件id2">...</label>
<input type="控件类型" class="form-control" id="控件id2" placeholder="...">
</div>
<div class="checkbox">
<label>
<input type="checkbox">...
</label>
</div>
<button type="submit" class="btn btn-default">...</button>
</form><!-- 输入框前后添加文字 -->
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="控件id1">...</label>
<div class="input-group">
<div class="input-group-addon">...</div>
<input type="控件类型" class="form-control" id="控件id1" placeholder="...">
<div class="input-group-addon">...</div>
</div>
</div>
<button type="submit" class="btn btn-primary">...</button>
</form>水平
<!-- 使.form-group表现得像.row -->
<form class="form-horizontal">
<div class="form-group">
<label for="控件id1" class="列宽 control-label">...</label>
<div class="列宽">
<input type="控件类型" class="form-control" id="控件id1" placeholder="...">
</div>
</div>
</form>输入文本框
<input type="text" class="form-control" placeholder="...">文本域
<textarea class="form-control" rows="..."></textarea>单选
<div class="radio">
<label>
<input type="radio" name="单选组" id="单选组中的项目id" value="单选中的项目值" checked>
单选中的项目键
</label>
</div><div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div><!-- 禁用，注意需要两处添加disabled -->
<div class="radio disabled">
<label>
<input type="radio" name="单选组" id="单选组中的项目id" value="单选组中的项目键" disabled>
单选组中的项目键
</label>
</div>多选
<div class="checkbox">
<label>
<input type="checkbox" value="">
多选中的项目键
</label>
</div><!-- 禁用，注意需要两处添加disabled -->
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
多选中的项目键
</label>
</div>内联单选与多选
<label class="checkbox-inline">
<input type="checkbox" id="内联多选id" value="内联多选项目值"> 内联多选项目键
</label><label class="radio-inline">
<input type="radio" name="内联单选id" id="内联单选项目id" value="内联单选项目值"> 内联单选项目键
</label>不带有标签的单选与多选
<!-- 仅用于非内联 -->
<div class="checkbox">
<label>
<input type="checkbox" id="多选组项目id" value="多选组项目值" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="单选组名" id="单选组项目id" value="单选组项目值" aria-label="...">
</label>
</div>下拉框
<select class="form-control">
<option>选项名</option>
</select>多选
<select multiple class="form-control">
<option>选项名</option>
</select>静态控件
<!-- 通过在<p>中添加 .form-control-static 来实现 -->
<form class="form-horizontal">
<div class="form-group">
<label class="列宽 control-label">...</label>
<div class="列宽">
<p class="form-control-static">...</p>
</div>
</div>
</form><!-- 通过在<p>中添加 .form-control-static 来实现 -->
<!-- 标签隐藏 -->
<form class="form-inline">
<div class="form-group">
<label class="sr-only">...</label>
<p class="form-control-static">...</p>
</div>
</form>禁用状态
<input class="form-control" id="控件id" type="text" placeholder="..." disabled>域禁用
<!-- 建议使用JavaScript实现引用较好 -->
<form>
<fieldset disabled>
...
</fieldset>
</form>只读状态
<!-- 保留鼠标原型 -->
<input class="form-control" type="text" placeholder="..." readonly>表单提示
<label class="sr-only" for="输入框id">...</label>
<input type="text" id="输入框id" class="form-control" aria-describedby="帮助文字id">
...
<span id="帮助文字id" class="help-block">...</span>基本验证状态
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-*">
<label class="control-label" for="输入框id">...</label>
<input type="text" class="form-control" id="输入框id">
</div>
<!-- 和 -->
<div class="has-*">
<div class="checkbox">
<label>
<input type="checkbox" id="id" value="值">
...
</label>
</div>
</div>带有图标的验证状态
<div class="form-group has-* has-feedback">
<label class="control-label" for="输入框id">...</label>
<input type="text" class="form-control" id="输入框id" aria-describedby="无障碍文字id">
<span class="glyphicon glyphicon-* form-control-feedback" aria-hidden="true"></span>
<span id="无障碍文字id" class="sr-only">(success)</span>
</div>
<!-- 和 -->
<div class="form-group has-* has-feedback">
<label class="control-label" for="输入框id">...</label>
<div class="input-group">
<span class="input-group-addon">...</span>
<input type="text" class="form-control" id="输入框id" aria-describedby="无障碍文字id">
</div>
<span class="glyphicon glyphicon-* form-control-feedback" aria-hidden="true"></span>
<span id="无障碍文字id" class="sr-only">(success)</span>
</div>带有图标的验证状态(水平)
<!-- 水平表单 -->
<form class="form-horizontal">
<div class="form-group has-* has-feedback">
<label class="control-label col-sm-*" for="输入框id">...</label>
<div class="col-sm-*">
<input type="text" class="form-control" id="输入框id" aria-describedby="无障碍文字id">
<span class="glyphicon glyphicon-* form-control-feedback" aria-hidden="true"></span>
<span id="无障碍文字id" class="sr-only">...</span>
</div>
</div>
<!-- 和 -->
<div class="form-group has-* has-feedback">
<label class="control-label col-sm-3" for="输入框id">...</label>
<div class="col-sm-*">
<div class="input-group">
<span class="input-group-addon">...</span>
<input type="text" class="form-control" id="输入框id" aria-describedby="无障碍文字id">
</div>
<span class="glyphicon glyphicon-* form-control-feedback" aria-hidden="true"></span>
<span id="无障碍文字id" class="sr-only">...</span>
</div>
</div>
</form>带有图标的验证状态(内联)
<!-- 内联表单 -->
<form class="form-inline">
<div class="form-group has-* has-feedback">
<label class="control-label" for="输入框id">...</label>
<input type="text" class="form-control" id="输入框id" aria-describedby="无障碍文字id">
<span class="glyphicon glyphicon-* form-control-feedback" aria-hidden="true"></span>
<span id="无障碍文字id" class="sr-only">...</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-* has-feedback">
<label class="control-label" for="输入框id">...</label>
<div class="input-group">
<span class="input-group-addon">...</span>
<input type="text" class="form-control" id="输入框id" aria-describedby="无障碍文字id">
</div>
<span class="glyphicon glyphicon-* form-control-feedback" aria-hidden="true"></span>
<span id="无障碍文字id" class="sr-only">...</span>
</div>
</form>带有图标的验证状态(标签隐藏)
<!-- 标签隐藏 -->
<div class="form-group has-* has-feedback">
<label class="control-label sr-only" for="输入框id">...</label>
<input type="text" class="form-control" id="输入框id" aria-describedby="无障碍文字id">
<span class="glyphicon glyphicon-* form-control-feedback" aria-hidden="true"></span>
<span id="无障碍文字id" class="sr-only">...</span>
</div>
<div class="form-group has-* has-feedback">
<label class="control-label sr-only" for="输入框id">...</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="输入框id" aria-describedby="无障碍文字id">
</div>
<span class="glyphicon glyphicon-* form-control-feedback" aria-hidden="true"></span>
<span id="无障碍文字id" class="sr-only">...</span>
</div>
高度控件尺寸(基本)
<input class="form-control input-sm" type="text" placeholder="...">
<input class="form-control" type="text" placeholder="...">
<input class="form-control input-lg" type="text" placeholder="...">
<!-- 和 -->
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>高度控件尺寸(水平表单组)
<!-- 水平表单 -->
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-* control-label" for="输入框id">...</label>
<div class="col-sm-*">
<input class="form-control" type="text" id="输入框id" placeholder="...">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-* control-label" for="输入框id">...</label>
<div class="col-sm-*">
<input class="form-control" type="text" id="输入框id" placeholder="...">
</div>
</div>
</form>列宽尺寸
<!-- 通过在 .row 中利用 .col-*-* 来实现,更推荐使用 .form-group -->
<div class="row">
<div class="col-xs-*">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
</div>按钮
按钮标签
可以将按钮类应用于 <a> , <button> , input 元素.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">根据上下文准确使用
虽然按钮类可以用于<a>和<button>元素,但只有<button>元素支持我们的nav以及navbar.让链接表现得像按钮
如果<a>元素用来作为按钮, 用于触发页面内事件而不是链接到其他页面,那样的话应当给予属性role="button"
跨浏览器表现
为了最佳的表现,我们强烈推荐尽可能使用元素来保证跨浏览器表现.
除了这个,在火狐30以下存在一个bug,这个bug妨碍我们设置 基于按钮的<input>的line-height,这导致它们不是很适应其他火狐中按钮的高度.
参数
使用任意的按钮类来快速创建按钮样式
<!-- 标准按钮 -->
<button type="button" class="btn btn-default">Default</button>
<!-- 表示一个重要的操作 -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- 表示一个成功或者积极的操作 -->
<button type="button" class="btn btn-success">Success</button>
<!-- 表示当前情景的相关信息-->
<button type="button" class="btn btn-info">Info</button>
<!-- 表示应当注意的操作 -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- 表示一个危险或者潜在消极的操作 -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- 不强调它是一个按钮而是一个链接 -->
<button type="button" class="btn btn-link">Link</button>为无障碍技术传递正确的意思
使用颜色来传递按钮的含义只能在看得见的情况下凑效,然而这并不能作用于例如屏幕阅读器之类的无障碍技术上.确保无论在什么情况下都能传递正确的意思,例如添加附加的带有.sr-only类的隐藏文字.
尺寸
想要超大或者小一点的按钮?通过添加 .btn-lg, .btn-sm 或者 .btn-xs 来实现.
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>通过添加 .btn-block 来实现块级按钮
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>激活状态
按钮当被激活时将呈现被按下状态.对于 <button> 元素,这通过 :active 实现. 对于<a> 元素,这通过 .active 实现.然而, 你可以使用.active 在<button> 上来说明这个按钮是被激活的.
<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 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>禁用状态
通过降低按钮的透明度来让它看起来是不能按的
通过添加 disabled 属性到 <button> 来实现.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>跨屏幕兼容性
如果你在<button>上使用disabled属性, IE9以及以下将会出现难看的不能修复的文本阴影.
通过添加 .disabled 属性到 <a> 来实现.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>链接作用警告
这个类试图通过使用point-events: none来禁用<a>的链接作用,但这个CSS属性并未标准化,并且在Opera18以及以下,IE11中不支持. 此外, 即使浏览器支持point-events: none, 键盘导航同样是凑效的,这意味着可视化键盘用户以及无障碍技术用户将依旧能够激活这些链接.因此为了安全起见,我们还是得使用JavaScript来禁用这些链接.
按钮小结
基本样式
<a class="btn btn-*" href="#" role="button">...</a>
<button class="btn btn-*" type="submit">...</button>
<input class="btn btn-*" type="button" value="...">
<input class="btn btn-*" type="submit" value="...">不同的颜色
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>尺寸
<!-- 超大 -->
<button type="button" class="btn btn-* btn-lg">...</button>
<!-- 一般 -->
<button type="button" class="btn btn-*">...</button>
<!-- 小 -->
<button type="button" class="btn btn-* btn-sm">...</button>
<!-- 超小 -->
<button type="button" class="btn btn-* btn-xs">...</button>块级
<button type="button" class="btn btn-primary btn-lg btn-block">...</button>激活
<button type="button" class="btn btn-* btn-lg active">...</button>
<a href="#" class="btn btn-* active" role="button">...</a>禁用
<button type="button" class="btn btn-primary" disabled="disabled">...</button>
<!-- 或 -->
<!-- 推荐使用JavaScript禁用链接 -->
<a href="#" class="btn btn-primary disabled" role="button">...</a>图片
响应式图片
在Bootstrap3中图片可以通过添加 .img-responsive 实现友好的自适应.把max-width: 100% , height:auto 以及 display:block 应用到图片上使得它的尺寸很好的适应父容器.
为了让使用了 .img-responsive的图片居中,可以
扫一扫
1407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
