内容简介：Bootstrap入门之全局CSS样式
本文是 《玩转Bootstrap》 和 Bootstrap中文网 的学习笔记
Bootstrap简介
Bootstrap是简单、灵活的用于开发响应式布局、移动设备优先的 WEB 项目的HTML，CSS，JavaScript框架。
起步
基本模板
Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本
<!DOCTYPE html>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--在IE运行最新的渲染模式-->
<metaname="viewport"content="width=device-width, initial-scale=1"><!--初始化移动浏览显示，width=device-width让视口宽度等于设备的真实分辨率，initial-scale=1是初始化第一次载入时缩放比例-->
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<linkhref="css/bootstrap.min.css"rel="stylesheet">
<!-- 下面是针对IE版本低于IE9设置，第一个script是让IE8支持HTML5标签，第二个script是让IE8支持媒体查询 -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<scriptsrc="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>
全局CSS样式
移动设备优先
Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放，需要在 `` 之中 添加 viewport 元数据标签 。
<metaname="viewport"content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<divclass="container"> ... </div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<divclass="container-fluid"> ... </div>
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
-
“行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 -
通过“行（row）”在水平方向创建一组“列（column）”。
-
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
-
类似
.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 -
通过为“列（column）”设置
padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 -
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
-
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个
.col-xs-4来创建。 -
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
-
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何
.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-lg-*不存在， 也影响大屏幕设备。
媒体查询
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@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) { ... }
栅格参数
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C |
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | 12 | 12 | 12 |
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | 30px （每列左右均有 15px） | 30px （每列左右均有 15px） | 30px （每列左右均有 15px） |
| 可嵌套 | 是 | 是 | 是 | 是 |
| 偏移（Offsets） | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 |
响应式列重置
在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式 工具 类 。
<divclass="row"> <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <divclass="clearfix visible-xs-block"></div> <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>
除了列在分界点清除响应， 还可以 重置偏移, 后推或前拉某个列 。
<divclass="row"> <divclass="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <divclass="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> <divclass="row"> <divclass="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <divclass="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 元素向右侧偏移了4个列（column）的宽度。
<divclass="row"> <divclass="col-md-4">.col-md-4</div> <divclass="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <divclass="row"> <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <divclass="row"> <divclass="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
还可以使用 .col - * - offset-0 覆盖较低网格层的偏移量。
<divclass="row">
<divclass="col-xs-6 col-sm-4">col-xs-6 col-sm-4
</div>
<divclass="col-xs-6 col-sm-4">col-xs-6 col-sm-4
</div>
<divclass="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0
</div>
</div>
嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12。
<divclass="row">
<divclass="col-sm-9">
Level 1: .col-sm-9
<divclass="row">
<divclass="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<divclass="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
不 排序 的话， col-md-9 居左， col-md-3 居右，如果要互换位置，需要将 col-md-9 向右移动3个列的距离，也就是3个offset ,也就是在 <div class=“col-md-9”> 添加类名 col-md-push-3 ，调用其样式。
<divclass="row"> <divclass="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <divclass="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
Less mixin 和变量
变量
通过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于确定合适让列浮动）。我们使用这些变量生成预定义的栅格类。如： @grid-columns 、 @grid-gutter-width 、 @grid-float-breakpoint 、 @grid-gutter-width 、 @font-family-base 、 @font-size-base 、 @line-height-base 等。
mixin
mixin 用来和栅格变量一同使用，为每个列（column）生成语义化的 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));
}
}
排版
Bootstrap 排版、链接样式设置了基本的全局样式。分别是：
- 为
body元素设置background-color: #fff; - 使用
@font-family-base、@font-size-base和@line-height-base变量作为排版的基本参数 - 为所有链接设置了基本颜色
@link-color，并且当链接处于:hover状态时才添加下划线
这些样式都能在 scaffolding.less 文件中找到对应的源码。
标题
HTML 中的所有标题标签， <h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
<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> <spanclass="h1">.h1</span> <spanclass="h2">.h2</span> <spanclass="h3">.h3</span> <spanclass="h4">.h4</span> <spanclass="h5">.h5</span> <spanclass="h6">.h6</span> <h1>h1. Bootstrap heading <small>small</small></h1> <h2>h2. Bootstrap heading <small>small</small></h2> <h3>h3. Bootstrap heading <small>small</small></h3> <h4>h4. Bootstrap heading <small>small</small></h4> <h5>h5. Bootstrap heading <small>small</small></h5> <h6>h6. Bootstrap heading <small>small</small></h6>
页面主体
Bootstrap 将全局 font-size 设置为 14px ， line-height 设置为 1.428 。这些属性直接赋予 <body> 元素和所有段落元素。另外， <p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
通过添加 .lead 类可以让段落突出显示。
<pclass="lead">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.</p> <p>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.</p>
使用Less工具构件
variables.less文件中定义的两个 Less 变量决定了排版尺寸： @font-size-base 和 @line-height-base 。第一个变量定义了全局 font-size 基准，第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式。
内联文本元素
- 高亮文本：
<mark></mark> - 被删除文本：
<del><del> - 无用文本：
<s></s> - 插入文本：
<ins></ins> - 带下划线的文本：
<u></u> - 小号文本：
<small></small> - 着重：
<strong></strong> - 斜体：
<em></em>（在 HTML5 中可以使用<b>和<i>标签。<b>用于高亮单词或短语，不带有任何着重的意味；而<i>标签主要用于发言、技术词汇等。）
<mark>高亮文本</mark><br> <del>被删除文本</del><br> <s>无用文本</s><br> <ins>插入文本</ins><br> <u>带下划线的文本</u><br> <small>小号文本</small><br> <strong>着重</strong><br> <em>斜体</em><br>
对齐
文本对齐： <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> （在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等）
<pclass="text-left">文本左对齐</p> <pclass="text-center">文本居中</p> <pclass="text-right">文本右对齐</p> <pclass="text-justify">文本两端对齐</p> <pclass="text-nowrap">禁止文字自动换行</p>
改变大小写
改变大小写： <p class="text-lowercase">小写</p> 、 <p class="text-uppercase">大写</p> 、 <p class="text-capitalize">首字母大写</p>
<pclass="text-lowercase">Lowercased小写</p> <pclass="text-uppercase">Uppercased大写</p> <pclass="text-capitalize">capitalize首字母大写</p>
缩略语
缩略语：当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 元素的增强样式。缩略语元素带有 title` 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。
- 基本缩略语：
<abbr title="attribute">attr</abbr> - 首字母缩略语：
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>（为缩略语添加.initialism类，可以让 font-size 变得稍微小些。）
<abbrtitle="缩略语">缩略语</abbr> <abbrtitle="缩略语"class="initialism">缩略语</abbr>
地址
地址： <address></address>
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbrtitle="Phone">P:</abbr> (123) 456-7890 </address>
引用
- 默认样式的引用：
<blockquote></blockquote>（文本建议放在<p>标签内，外层包一层<blockquote>标签） - 引用样式的命名来源：
<footer></footer>（来源的名称可以包裹进<cite>标签中） - 引用内容右对齐：
<blockquote class="blockquote-reverse"></blockquote>
<blockquote>
<p>默认引用样式</p>
</blockquote>
<blockquote>
<p>默认引用样式</p>
<footer>命名来源<citetitle="Source Title">命名来源</cite></footer>
</blockquote>
<blockquoteclass="blockquote-reverse">
引用右对齐
</blockquote>
列表
- 无序列表：
<ul></ul> - 有序列表：
<ol></ol> - 无样式列表：
<ul class="list-unstyled"></ul>（移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。 这是针对直接子元素的 ，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。） - 内联列表：
<ul class="list-inline"></ul> - 描述：
<dl> <dt></dt> <dd></dd> </dl> - 水平排列描述：
<dl class="dl-horizontal"> <dt></dt> <dd></dd> </dl>（通过text-overflow属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。）
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ulclass="list-unstyled">
<li>无样式列表</li>
<li>无样式列表</li>
<li>无样式列表</li>
</ul>
<ulclass="list-inline">
<li>内联列表</li>
<li>内联列表</li>
<li>内联列表</li>
</ul>
<dl>
<dt>描述</dt>
<dd>描述</dd>
</dl>
<dlclass="dl-horizontal">
<dt>水平排列的描述</dt>
<dd>水平排列的描述</dd>
</dl>
代码
- 内联代码：
<code></code> - 用户输入：
<kbd></kbd> - 代码块：
<pre></pre> - 变量：
<var></var> - 程序输出：
<samp></samp>
内联代码: <code><section></code> 用户输入: <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> 代码块: <pre><p>Sample text here...</p></pre> 变量: <var>y</var> = <var>m</var><var>x</var> + <var>b</var> 程序输出: <samp>This text is meant to be treated as sample output from a computer program.</samp>
表格
基本表格
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
<tableclass="table">
<thead>
<tr>
<th>#</th>
<th>first name</th>
<th>last name</th>
<th>username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>cheng</td>
<td>tang</td>
<td>tc9011</td>
</tr>
<tr>
<td>2</td>
<td>jie</td>
<td>zhou</td>
<td>jay</td>
</tr>
<tr>
<td>3</td>
<td>mark</td>
<td>down</td>
<td>md</td>
</tr>
</tbody>
</table>
条纹表格
通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。不支持IE8。
<tableclass="table table-striped">
<thead>
<tr>
<th>#</th>
<th>first name</th>
<th>last name</th>
<th>username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>cheng</td>
<td>tang</td>
<td>tc9011</td>
</tr>
<tr>
<td>2</td>
<td>jie</td>
<td>zhou</td>
<td>jay</td>
</tr>
<tr>
<td>3</td>
<td>mark</td>
<td>down</td>
<td>md</td>
</tr>
</tbody>
</table>
带边框表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
<tableclass="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>first name</th>
<th>last name</th>
<th>username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>cheng</td>
<td>tang</td>
<td>tc9011</td>
</tr>
<tr>
<td>2</td>
<td>jie</td>
<td>zhou</td>
<td>jay</td>
</tr>
<tr>
<td>3</td>
<td>mark</td>
<td>down</td>
<td>md</td>
</tr>
</tbody>
</table>
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
<tableclass="table table-hover">
<thead>
<tr>
<th>#</th>
<th>first name</th>
<th>last name</th>
<th>username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>cheng</td>
<td>tang</td>
<td>tc9011</td>
</tr>
<tr>
<td>2</td>
<td>jie</td>
<td>zhou</td>
<td>jay</td>
</tr>
<tr>
<td>3</td>
<td>mark</td>
<td>down</td>
<td>md</td>
</tr>
</tbody>
</table>
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
<tableclass="table table-condensed"> ... </table>
状态类
- 鼠标悬停在行或单元格上时所设置的颜色：
class="active" - 标识成功或积极的动作：
class="success" - 标识普通的提示信息或动作：
class="info" - 标识警告或需要用户注意：
class="warning" - 标识危险或潜在的带来负面影响的动作：
class="danger"
<tableclass="table">
<tbody>
<tr>
<tdclass="active">...</td>
<tdclass="success">...</td>
<tdclass="warning">...</td>
<tdclass="danger">...</td>
<tdclass="info">...</td>
</tr>
</tbody>
</table>
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。同时这样也会截断下拉菜单和其他第三方组件。
Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中： @-moz-document url-prefix() { fieldset { display: table-cell; }}
<divclass="table-responsive"style="margin: 20px">
<tableclass="table">
<thead>
<tr>
<th>#</th>
<th>first name</th>
<th>last name</th>
<th>username</th>
<th>username</th>
<th>username</th>
<th>username</th>
<th>username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>cheng</td>
<td>tang</td>
<td>tc9011</td>
<td>tang</td>
<td>tc9011</td>
<td>tang</td>
<td>tc9011</td>
</tr>
<tr>
<td>2</td>
<td>jie</td>
<td>zhou</td>
<td>jay</td>
<td>zhou</td>
<td>jay</td>
<td>zhou</td>
<td>jay</td>
</tr>
<tr>
<td>3</td>
<td>mark</td>
<td>down</td>
<td>md</td>
<td>down</td>
<td>md</td>
<td>down</td>
<td>md</td>
</tr>
</tbody>
</table>
</div>
表单
基本表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input> 、 <textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%; 。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
<form>
<divclass="form-group">
<labelfor="exampleInputEmail1">Email address</label>
<inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Email">
</div>
<divclass="form-group">
<labelfor="exampleInputPassword1">Password</label>
<inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password">
</div>
<divclass="form-group">
<labelfor="exampleInputFile">File input</label>
<inputtype="file"id="exampleInputFile">
<pclass="help-block">Example block-level help text here.</p>
</div>
<divclass="checkbox">
<label>
<inputtype="checkbox"> Check me out
</label>
</div>
<buttontype="submit"class="btn btn-default">Submit</button>
</form>
内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。 只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，这些元素的宽度设置为 width: auto; ，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label 、 aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性来替代其他的标记，但要注意，这种方法是不妥当的。
<formclass="form-inline">
<divclass="form-group">
<labelclass="sr-only"for="exampleInputEmail3">Email address</label>
<inputtype="email"class="form-control"id="exampleInputEmail3"placeholder="Email">
</div>
<divclass="form-group">
<labelclass="sr-only"for="exampleInputPassword3">Password</label>
<inputtype="password"class="form-control"id="exampleInputPassword3"placeholder="Password">
</div>
<divclass="checkbox">
<label>
<inputtype="checkbox"> Remember me
</label>
</div>
<buttontype="submit"class="btn btn-default">Sign in</button>
</form>
水平排列的表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<formclass="form-horizontal">
<divclass="form-group">
<labelfor="inputEmail3"class="col-sm-2 control-label">Email</label>
<divclass="col-sm-10">
<inputtype="email"class="form-control"id="inputEmail3"placeholder="Email">
</div>
</div>
<divclass="form-group">
<labelfor="inputPassword3"class="col-sm-2 control-label">Password</label>
<divclass="col-sm-10">
<inputtype="password"class="form-control"id="inputPassword3"placeholder="Password">
</div>
</div>
<divclass="form-group">
<divclass="col-sm-offset-2 col-sm-10">
<divclass="checkbox">
<label>
<inputtype="checkbox"> Remember me
</label>
</div>
</div>
</div>
<divclass="form-group">
<divclass="col-sm-offset-2 col-sm-10">
<buttontype="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 属性的输入控件才能被赋予正确的样式。
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。
<textareaclass="form-control"rows="3"placeholder="111"></textarea> <textareaclass="form-control"rows="5"placeholder="111"></textarea>
多选和单选框
支持禁用复选框（checkbox）和单选框（radio），但是要在父标签 <label> 上提供禁用的鼠标手势，则需要将 .disabled 类添加到父级 .radio ， .radio-inline ， .checkbox ， 或 .checkbox-inline 。
<divclass="checkbox">
<label>
<inputtype="checkbox"value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<divclass="checkbox disabled">
<label>
<inputtype="checkbox"value=""disabled>
Option two is disabled
</label>
</div>
<divclass="radio">
<label>
<inputtype="radio"name="optionsRadios"id="optionsRadios1"value="option1"checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<divclass="radio">
<label>
<inputtype="radio"name="optionsRadios"id="optionsRadios2"value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<divclass="radio disabled">
<label>
<inputtype="radio"name="optionsRadios"id="optionsRadios3"value="option3"disabled>
Option three is disabled
</label>
</div>
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
如果需要 <label> 内没有文字，自有输入框（input），仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label ）。 目前只适用于非内联的 checkbox 和 radio。
<divclass="checkbox">
<label>
<inputtype="checkbox"id="blankCheckbox"value="option1"aria-label="...">
</label>
</div>
<divclass="radio">
<label>
<inputtype="radio"name="blankRadio"id="blankRadio1"value="option1"aria-label="...">
</label>
</div>
下拉列表
很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。
对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。
<selectclass="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <selectmultipleclass="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
焦点状态
将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。
禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。
<inputclass="form-control"id="disabledInput"type="text"placeholder="Disabled input here..."disabled>
被禁用的 fieldset
为 <fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件，但是 <a> 标签的链接功能不受影响，这些元素将只被赋予 pointer-events: none 属性。不支持IE11及其以下的浏览器。
<form>
<fieldsetdisabled>
<divclass="form-group">
<labelfor="disabledTextInput">Disabled input</label>
<inputtype="text"id="disabledTextInput"class="form-control"placeholder="Disabled input">
</div>
<divclass="form-group">
<labelfor="disabledSelect">Disabled select menu</label>
<selectid="disabledSelect"class="form-control">
<option>Disabled select</option>
</select>
</div>
<divclass="checkbox">
<label>
<inputtype="checkbox"> Can't check this
</label>
</div>
<buttontype="submit"class="btn btn-primary">Submit</button>
</fieldset>
</form>
只读状态
为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
<inputclass="form-control"type="text"placeholder="Readonly input here…"readonly>
帮助文本
帮助文本应该与使用 aria-describeby 属性相关的表单控件明确关联。 这将确保辅助技术（例如屏幕阅读器）在用户聚焦或进入控制时正确识别此帮助文本。
<labelclass="sr-only"for="inputHelpBlock">Input with help text</label> <inputtype="text"id="inputHelpBlock"class="form-control"aria-describedby="helpBlock"> <spanid="helpBlock"class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
校验状态
Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning 、 .has-error 或 .has-success 类到这些控件的 父元素 即可。任何包含在此元素之内的 .control-label 、 .form-control 和 .help-block 元素都将接受这些校验状态的样式。
<divclass="form-group has-success">
<labelclass="control-label"for="inputSuccess1">Input with success</label>
<inputtype="text"class="form-control"id="inputSuccess1"aria-describedby="helpBlock2">
<spanid="helpBlock2"class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<divclass="form-group has-warning">
<labelclass="control-label"for="inputWarning1">Input with warning</label>
<inputtype="text"class="form-control"id="inputWarning1">
</div>
<divclass="form-group has-error">
<labelclass="control-label"for="inputError1">Input with error</label>
<inputtype="text"class="form-control"id="inputError1">
</div>
<divclass="has-success">
<divclass="checkbox">
<label>
<inputtype="checkbox"id="checkboxSuccess"value="option1">
Checkbox with success
</label>
</div>
</div>
<divclass="has-warning">
<divclass="checkbox">
<label>
<inputtype="checkbox"id="checkboxWarning"value="option1">
Checkbox with warning
</label>
</div>
</div>
<divclass="has-error">
<divclass="checkbox">
<label>
<inputtype="checkbox"id="checkboxError"value="option1">
Checkbox with error
</label>
</div>
</div>
还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。
对于不带有 label 标签的输入框以及右侧带有附加组件的 输入框组 ，需要手动为其图标定位。为了让所有用户都能访问你的网站，强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来，可以通过添加 .sr-only 类来实现。如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。
<divclass="form-group has-success has-feedback">
<labelclass="control-label"for="inputSuccess2">Input with success</label>
<inputtype="text"class="form-control"id="inputSuccess2"aria-describedby="inputSuccess2Status">
<spanclass="glyphicon glyphicon-ok form-control-feedback"aria-hidden="true"></span>
<spanid="inputSuccess2Status"class="sr-only">(success)</span>
</div>
<divclass="form-group has-warning has-feedback">
<labelclass="control-label"for="inputWarning2">Input with warning</label>
<inputtype="text"class="form-control"id="inputWarning2"aria-describedby="inputWarning2Status">
<spanclass="glyphicon glyphicon-warning-sign form-control-feedback"aria-hidden="true"></span>
<spanid="inputWarning2Status"class="sr-only">(warning)</span>
</div>
<divclass="form-group has-error has-feedback">
<labelclass="control-label"for="inputError2">Input with error</label>
<inputtype="text"class="form-control"id="inputError2"aria-describedby="inputError2Status">
<spanclass="glyphicon glyphicon-remove form-control-feedback"aria-hidden="true"></span>
<spanid="inputError2Status"class="sr-only">(error)</span>
</div>
<divclass="form-group has-success has-feedback">
<labelclass="control-label"for="inputGroupSuccess1">Input group with success</label>
<divclass="input-group">
<spanclass="input-group-addon">@</span>
<inputtype="text"class="form-control"id="inputGroupSuccess1"aria-describedby="inputGroupSuccess1Status">
</div>
<spanclass="glyphicon glyphicon-ok form-control-feedback"aria-hidden="true"></span>
<spanid="inputGroupSuccess1Status"class="sr-only">(success)</span>
</div>
如果你使用 .sr-only 类来隐藏表单控件的 <label> （而不是使用其它标签选项，如 aria-label 属性）， 一旦它被添加，Bootstrap 会自动调整图标的位置。
控件尺寸
通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。
通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
<inputclass="form-control input-lg"type="text"placeholder=".input-lg">
<inputclass="form-control"type="text"placeholder="Default input">
<inputclass="form-control input-sm"type="text"placeholder=".input-sm">
<divclass="row">
<divclass="col-xs-2">
<inputtype="text"class="form-control"placeholder=".col-xs-2">
</div>
<divclass="col-xs-3">
<inputtype="text"class="form-control"placeholder=".col-xs-3">
</div>
<divclass="col-xs-4">
<inputtype="text"class="form-control"placeholder=".col-xs-4">
</div>
</div>
<formclass="form-horizontal">
<divclass="form-group form-group-lg">
<labelclass="col-sm-2 control-label"for="formGroupInputLarge">Large label</label>
<divclass="col-sm-10">
<inputclass="form-control"type="text"id="formGroupInputLarge"placeholder="Large input">
</div>
</div>
<divclass="form-group form-group-sm">
<labelclass="col-sm-2 control-label"for="formGroupInputSmall">Small label</label>
<divclass="col-sm-10">
<inputclass="form-control"type="text"id="formGroupInputSmall"placeholder="Small input">
</div>
</div>
</form>
按钮
为 <a> 、 <button> 、或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。
如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。
最佳实践是： 强烈建议尽可能使用 <button> 元素 来获得在各个浏览器上获得相匹配的绘制效果。
另外， Firefox <30 版本的浏览器上出现的一个 bug ，其表现是：阻止我们为基于 <input> 元素所创建的按钮设置 line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。
通过 .btn-default 、 .btn-primary 、 .btn-success 、 btn-info 、 btn-warning 、 btn-danger 、 btn-link 类来快速创建一个有预定义样式的按钮。
使用 .btn-lg 、 .btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。
为 <button> 元素添加 disabled 属性，使其表现出禁用状态。（原理是通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。）
对 <a> 标签设置 disabled 属性后，使用键盘操作仍然可以工作，为了安全起见，建议通过 JavaScript 代码来禁止链接的原始功能。
<buttontype="button"class="btn btn-default">（默认样式）Default</button>
<buttontype="button"class="btn btn-primary">（首选项）Primary</button>
<buttontype="button"class="btn btn-success">（成功）Success</button>
<buttontype="button"class="btn btn-info">（一般信息）Info</button>
<buttontype="button"class="btn btn-warning">（警告）Warning</button>
<buttontype="button"class="btn btn-danger">（危险）Danger</button>
<buttontype="button"class="btn btn-link">（链接）Link</button>
<p>
<buttontype="button"class="btn btn-primary btn-lg">（大按钮）Large button</button>
<buttontype="button"class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
<buttontype="button"class="btn btn-primary">（默认尺寸）Default button</button>
<buttontype="button"class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
<buttontype="button"class="btn btn-primary btn-sm">（小按钮）Small button</button>
<buttontype="button"class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
<buttontype="button"class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<buttontype="button"class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
<buttontype="button"class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<buttontype="button"class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>
<buttontype="button"class="btn btn-primary btn-lg active">Primary button</button>
<buttontype="button"class="btn btn-default btn-lg active">Button</button>
<ahref="#"class="btn btn-primary btn-lg active"role="button">Primary link</a>
<ahref="#"class="btn btn-default btn-lg active"role="button">Link</a>
<buttontype="button"class="btn btn-lg btn-primary"disabled="disabled">Primary button</button>
<buttontype="button"class="btn btn-default btn-lg"disabled="disabled">Button</button>
<ahref="#"class="btn btn-primary btn-lg disabled"role="button">Primary link</a>
<ahref="#"class="btn btn-default btn-lg disabled"role="button">Link</a>
图片
响应式图片
在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center 。
在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加 width: 100% \9; 即可
<imgsrc="img_8488.jpg"class="img-responsive"alt="Responsive image">
图片形状
通过为 <img> 元素添加 .img-rounded 、 .img-circle 、 .img-thumbnail ，可以让图片呈现不同的形状。
<imgsrc="img.jpg"alt="..."class="img-rounded"> <imgsrc="img.jpg"alt="..."class="img-circle"> <imgsrc="img.jpg"alt="..."class="img-thumbnail">
辅助类
情景文本颜色
通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。
<pclass="text-muted">text-muted</p> <pclass="text-primary">text-primary</p> <pclass="text-success">text-success</p> <pclass="text-info">text-info</p> <pclass="text-warning">text-warning</p> <pclass="text-danger">text-danger</p>
情景背景色
<pclass="bg-primary">bg-primary</p> <pclass="bg-success">bg-success</p> <pclass="bg-info">bg-info</p> <pclass="bg-warning">bg-warning</p> <pclass="bg-danger">bg-danger</p>
关闭按钮
通过使用一个象征关闭的图标，可以让模态框和警告框消失。
<buttontype="button"class="close"aria-label="Close"><spanaria-hidden="true">×</span></button>
三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能。
<spanclass="caret"></span>
快速浮动
通过添加 .pull-left 和 .pull-right 类，可以将任意元素向左或向右浮动。但是不能用在导航组件中。
排列导航条中的组件时可以使用这些工具类： .navbar-left 或 .navbar-right 。
<divclass="pull-left">pull-left</div> <divclass="pull-right">pull-right</div>
让内容块居中
通过添加 .center-block 类，原理是为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。
<divclass="center-block">center-block</div>
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
清除浮动
通过为父元素添加 .clearfix 类可以很容易地清除浮动（ float ）。
<divclass="clearfix">...</div>
显示或隐藏内容
.show 和 .hidden 类可以强制任意元素显示或隐藏( 对于屏幕阅读器也能起效 )。这些类通过 !important 来避免 CSS 样式优先级问题。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。
.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就 不建议使用 了。请使用 .hidden 或 .sr-only 。
另外， .invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。
<divclass="show">...</div> <divclass="hidden">...</div>
屏幕阅读器和键盘导航
.sr-only 类可以对 屏幕阅读器以外 的设备隐藏内容。 .sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。对于遵循 可访问性的最佳实践 很有必要。这个类也可以作为 mixin 使用。
<aclass="sr-only sr-only-focusable"href="#content">Skip to main content</a>
图片替换
使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
<h1class="text-hide">Custom heading</h1>
响应式工具
可用的类
通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。
| 超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
可见 | 隐藏 | 隐藏 | 隐藏 |
.visible-sm-* |
隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md-* |
隐藏 | 隐藏 | 可见 | 隐藏 |
.visible-lg-* |
隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xs |
隐藏 | 可见 | 可见 | 可见 |
.hidden-sm |
可见 | 隐藏 | 可见 | 可见 |
.hidden-md |
可见 | 可见 | 隐藏 | 可见 |
.hidden-lg |
可见 | 可见 | 可见 | 隐藏 |
从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：
| 类组 | CSS display |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
因此，以超小屏幕（ xs ）为例，可用的 .visible-*-* 类是： .visible-xs-block 、 .visible-xs-inline 和 .visible-xs-inline-block 。
.visible-xs 、 .visible-sm 、 .visible-md 和 .visible-lg 类也同时存在。但是 从 v3.2.0 版本开始不再建议使用 。除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。
打印类
和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。
| class | 浏览器 | 打印机 |
|---|---|---|
.visible-print-block``.visible-print-inline``.visible-print-inline-block |
隐藏 | 可见 |
.hidden-print |
可见 | 隐藏 |
.visible-print 类也是存在的，但是从 v3.2.0 版本开始 不建议使用 。它与 .visible-print-block 类大致相同，除了 <table> 相关元素的特殊情况外。
以上所述就是小编给大家介绍的《Bootstrap入门之全局CSS样式》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 1.6 常用CSS样式2：其它样式
- 1.5 常用CSS样式1：文本样式
- 全局变量，静态全局变量，局部变量，静态局部变量
- Thrift RPC 系列教程（2）——全局变量&全局常量
- CSS 样式防御
- 代码样式的另类风格！开眼
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
