目录
简介
1. Bootstrap3中重写了整个框架，使其一开始就是对移动设备友好的。
2. Bootstrap是完全开源的。它的代码托管、开发、维护都依赖GitHub平台。
3. Bootstrap的源码都是基于最流行的CSS预处理脚本-Less和Sass开发的。可以采用预编译的CSS文件快速开发，也可以从源码定值自己需要的样式。
4. Bootstrap通过CSS媒体查询（Media Query）快速、有效适配手机、平板、PC设备。
5. Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以jQuery文件引入应放在bootstrap.js文件引入前面。
6. 为了增强跨浏览器表现的一致性，Bootstrap3使用了Normalize.css【一个CSS重置样式库】。
7. 可以通过检测用户代理（user agent）的特征串来保障终端页面的功能正常。
例如：
如果 <select> 元素应用了 border-radius 和/或 border 样式，Android 系统默认的浏览器可能不会显示侧边栏控件。
参考解决方案：
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>全局css样式
开发规范
1. Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在项目中的每个页面都需要参照下面的格式进行设置。
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>2. Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到页面中：
<meta http-equiv="X-UA-Compatible" content="IE=edge">3. 为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">如果禁用缩放功能，则用户只能滚动屏幕，这样网站看起来更像原生应用。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1, user-scalable=no" />注意：
????????是否需要禁用缩放，需要视自己的情况而定。
栅栏系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin【混合】用于生成更具语义的布局。
参数
?
容器类
Bootstrap为页面内容和栅栏系统提供了.container【固定宽度】和.container-fluid【100% 宽度】两种容器类，这两种容器类不能互相嵌套。
行必须包含在 .container或 .container-fluid容器类中，以便为其添加合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”,只有列【class="col-*-n"】可以作为行【class="row"】的直接子元素，网页内容应当放置于列内。
代码示例:
<div class="container-fluid">
<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>
</div>通过为列设置padding属性，从而创建列与列之间的间隔。通过为.row元素设置负值margin从来抵消掉为.container元素设置的padding，也就间接为行所包含的列抵消掉了padding。
如果一行中的列数大于12，那么多余的列将被作为一个整体另起一行排列。
行内等高列
在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。
修改前代码(摘要):
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example. </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 class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
</div>修改前效果图：
修改后代码(摘要):
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example. </div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
</div>修改后效果图：
消除槽宽
每列默认会留有槽宽【左右内边距各为15px】，如果需要消除列之间的槽宽，那么可以给行加上"row-no-gutters"属性。
代码示例:
<div class="container">
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距【margin】。
高网格偏移量可以覆盖低网格偏移量【如偏移量设置优先级sm>xs】，但要注意lg|md|sm|xs偏移量设置生效的范围是适用终端设备屏幕宽度的范围。
实例：中等屏幕时三列均分，小屏幕时第三列居中对齐。
代码：
<div class="container">
<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>
<div class="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>
</div>嵌套列
代码示例：
<div class="container">
<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>
</div>列排序
通过使用 .col-md-push-num1?和 .col-md-pull-num2?类就可以很容易的改变列（column）的顺序。注意num1和num2要跟元素移位的列宽对应。
col-md-push-3样式相当于left: 25%;
col-md-pull-9样式相当于right: 75%;
代码示例：
<div class="container">
<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>
</div>媒体查询
1.在栅栏系统中，创建关键分界点阀值分别是：
(1).超小屏幕【xs，手机，小于768px，默认通用样式，移动设备优先】。
(2).小屏幕【sm，平板，大于等于768px】。
(3).中等屏幕【md，桌面显示器，大于等于992px】。
(4).大屏幕【lg，大桌面显示器，大于等于1200px】。
2.也可以在媒体查询代码中包含max-width从而将css的影响限制在更小范围的屏幕大小之内。
如果不希望在小屏幕设备上所有的列都堆叠到一起，那么就使用针对超小屏幕和中等屏幕设备所定义的类。即.col-xs-*和.col-md-*。
媒体查询示例一：
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（ Bootstrap 是移动设备优先） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }媒体查询示例二：
@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) { ... }排版
列表
<dl>、<dt>、<dd>
.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
示例代码:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<dl class="dl-horizontal">
<dt>dt列表项名称</dt>
<dd>dd列表项内容描述文本</dd>
<dt>dt列表项名称</dt>
<dd>dd列表项内容描述文本</dd>
</dl>
</div>
</div>
</div>添加class="dl-horizontal"前效果图：
?添加class="dl-horizontal"后效果图：
表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
table
.table ???????????????????为?表格 添加少量的内补（padding）和水平方向的分隔线。
.table-striped ?????? 给表格主体之内的每一行增加斑马条纹样式【！IE8】。
.table-bordered ?? 为表格和其中的每个单元格增加边框。
.table-hover ??????? 让表格主体中的每一行对鼠标悬停状态作出响应。
.table-condensed 让表格更加紧凑，单元格中的内补均会减半。
tr
.active ????????鼠标悬停在行或单元格上时所设置的颜色
.success ? ? 标识成功或积极的动作
.info ?????????? 标识普通的提示信息或动作
.warning???? 标识警告或需要用户注意
.danger????? 标识危险或潜在的带来负面影响的动作
实例
示例代码：
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<tr>
<th>tr样式名</th>
<th>该样式的含意</th>
</tr>
<tr class="active">
<td>.active</td>
<td>鼠标悬停在行或单元格上时所设置的颜色</td>
</tr>
<tr class="success">
<td>.success</td>
<td>标识成功或积极的动作</td>
</tr>
<tr class="info">
<td>.info</td>
<td>标识普通的提示信息或动作</td>
</tr>
<tr class="warning">
<td>.warning</td>
<td>标识警告或需要用户注意</td>
</tr>
<tr class="danger">
<td>.danger</td>
<td>标识危险或潜在的带来负面影响的动作</td>
</tr>
</table>
</div>
</div>
</div>
</div>效果图展示
电脑端：
?手机端【.table-responsive 导致出现滚动条】：
表单
单独的表单控件会被自动添加一些全局样式。
所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
规范
1. 为每个输入控件设置 label 标签，方便屏幕阅读器将无法正确识别。
?? 可以为 label 设置 .sr-only 类将其隐藏，或者使用 aria-label、aria-labelledby、title 属性及placeholder 属性。
代码示例：
<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>2. 不要将表单组直接和输入框组混合使用，建议将输入框组嵌套到表单组中使用。
3. 帮助文本应该与它相关的表单控件显式关联使用 aria-describedby属性。 这将确保辅助技术（例如屏幕阅读器）在用户聚焦或进入控件时会宣布此帮助文本。
代码示例：
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" aria-describedby="helpBlock" class="form-control">
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
在内联表单，输入框和单选/多选框控件 这些元素的宽度被设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。
水平排列表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
支持的控件
输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
注意：
????????只有正确设置了 type 属性的输入控件才能被添加正确的样式。
文本域
textarea 表单控件可通过设置rows属性值改变该控件的高度。
单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
下拉列表
对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。
静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
代码示例：
<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 属性。
禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态【显示图标为红色圆圈里一红色反斜杠，方便让用户明白该项是禁用的】。
代码示例：
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>注意：
为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件，但里面的<a> 标签的链接功能不受影响。
Internet Explorer 11 及以下浏览器中的 <fieldset> 元素并不完全支持 disabled 属性。因此建议在这些浏览器上通过 JavaScript 代码来禁用 <fieldset>。
只读状态
为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
校验状态?
Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、 .has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、 .form-control 和 .help-block 元素都将接受这些校验状态的样式。
使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户 - 例如屏幕阅读器 - 或者色盲用户。
为了确保所有用户都能获取正确信息，Bootstrap 还提供了另一种提示方式。例如，可以在表单控件的 <label> 标签上以文本的形式显示提示信息（就像下面代码中所展示的）；包含一个 Glyphicon 字体图标 （还有赋予 .sr-only 类的文本信息 - 参考 Glyphicon 字体图标实例 ）；或者提供一个额外的 辅助信息 块。另外，对于使用辅助设备的用户，无效的表单控件还可以赋予一个 aria-invalid="true" 属性。
控件尺寸
用栅格系统中的列（column）包裹输入框或其任何父元素，可以很容易地为其设置宽度。
可通过? .input-lg 类似的类【控件的class】可以为控件设置高度。
可通过? .col-lg-* 类似的类【包裹控件div的class】可以为控件设置宽度。
可通过 .form-group-lg 或 .form-group-sm 类【 <div class="form-group form-group-lg">】，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
添加额外的图标
可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。
帮助文本
表单控件的块级帮助文本【class="help-block"】。
实例
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<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">
<label for="inputAddress" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<textarea class="form-control" id="inputAddress" placeholder="Address">
</textarea>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile" class="col-sm-2 control-label">File input</label>
<div class="col-sm-10">
<input type="file" class="form-control" id="exampleInputFile" placeholder="File input">
<p class="help-block">Example block-level help text here.</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">radios</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> radio text1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> radio text2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> radio text3
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">checkboxs</label>
<div class="col-sm-10">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox text1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> checkbox text2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> checkbox text3
</label>
</div>
</div>
<div class="form-group">
<label for="select1" class="col-sm-2 control-label">select</label>
<div class="col-sm-10">
<select class="form-control" id="select1">
<option>option one</option>
<option>option two</option>
<option>option three</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputtext2" class="col-sm-2 control-label">disabled</label>
<div class="col-sm-10">
<input type="text" class="form-control input-lg " id="inputtext2" placeholder="Disabled Input" disabled>
</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>
</div>
</div>
</div>效果图：
按钮
按钮元素
为 <a>、 <button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
代码示例：
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>尺寸
使用 .btn-lg、 .btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
激活状态?
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。
对于 <button> 元素，是通过 :active 状态实现的。
对于 <a> 元素，是通过 .active 类实现的。
还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。
禁用状态?
为 <button> 元素添加 disabled 属性，就可以使其表现出禁用状态。
对于 <a> 元素按钮，则需要添加 .disabled 类。
注意
1. 虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。
2. 如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。
3. 强烈建议尽可能使用 <button> 元素 来获得在各个浏览器上获得相匹配的绘制效果。
图片
响应式图片
在 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; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。
代码示例：
<img src="..." class="img-responsive" alt="Responsive image">图片形状
通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。
img-rounded??? 小圆角 方形图片。
img-circle???????? 小圆角 圆形图片。
img-thumbnail? 小圆角 带方框 方框内有一点空白内边距 方形图片。
辅助类
文本颜色
通过颜色来展示意图，Bootstrap 提供了一组工具类。
text-muted|text-primary|text-success|text-info|text-warning|
text-danger
代码示例：
<p class="text-muted">muted 有 “静静的，暗淡的” 意思。</p>背景色
bg-primary|bg-success|bg-info|bg-warning|bg-danger
注意：
????????背景类和文字类建议不要同时在一个文本标签里使用，避免因为色彩的过于丰富干扰了用户对内容的关注。
关闭按钮
【class="close"】通过使用一个象征关闭的图标，可以让模态框和警告框消失。
代码示例：
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>三角符号
【class="caret"】通过使用三角符号可以指示某个元素具有下拉菜单的功能。
代码示例：
<span class="caret"></span>注意：
????????向上弹出式菜单 中的三角符号是反方向的。
快速浮动
通过添加一个类【class="pull-left|pull-right"】，可以将任意元素向左或向右浮动。
注意：
????????此类不能用于导航条组件中 ，排列导航条中的组件时可以使用.navbar-left 或 .navbar-right 这些工具类。
让内容块居中
【class="center-block"】为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。
清除浮动
通过为父元素 添加 .clearfix 类可以很容易地清除浮动（ float）。
显示或隐藏内容
.show 和 .hidden 类可以强制任意元素显示或隐藏( 对于屏幕阅读器也能起效 )。这些类通过 !important 来避免 CSS 样式优先级问题。
另外， .invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。
注意：
????????.show 和 .hidden 类只对块级元素起作用。
屏幕阅读器和键盘导航
.sr-only 类可以对 屏幕阅读器以外 的设备隐藏内容。
.sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。
代码示例：
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>图片替换
使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
响应式工具
利用媒体查询功能并使用一些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。
显示类和隐藏类
通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。
从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：
| 类组 | CSS display |
| .visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
打印类
和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。
尾语
至于 组件 和 JavaScript插件 可以直接在bootstrap V3官网上挑拣使用，做出自己需要的模板。