bootstrap整理-1
基本的HTML模板
小伙伴们，上一小节的视频课程已经对Bootstrap提供的模板作了详细的介绍，在这一小节中咱们把这个模板代码粘贴过来，以供大家学习查看，大家能够根据实际状况在此基础上进行扩展，只须要确保文件引用顺序一致便可。css
如右侧代码编辑器中就是最基本的HTML模板。html
咱们来简单解释一下其中几条的重要代码：前端
bootstrap模板为使IE六、七、8版本（IE9如下版本）浏览器兼容html5新增的标签，引入下面代码文件便可。html5
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
同理为使IE六、七、8版本浏览器兼容css3样式，引入下面代码：jquery
全局样式
在制做Web页面时，前端人员都习惯为网站设置一个全局样式（reset.css）。那么在Bootstrap框架中也不例外。Bootstrap框架的核心是轻量的CSS基础代码库，他并无一味的重置样式，而是注重各浏览器基础表现，下降开发难度。大部分前端人员都具备归零的思想，但实际你会发现，归零以后的样式在开发过程当中会存在着潜在的问题，例如，在全局样式表中将em变成一个普通标记，明明应该是斜体，怎么就没效果了呢？ios
Bootstrap框架在这一部分作了必定的变动，再也不一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提高一些细节的体验，具体说明以下：css3
- 移除body的margin声明
- 设置body的背景色为白色
- 为排版设置了基本的字体、字号和行高
- 设置全局连接颜色，且当连接处于悬浮“:hover”状态时才会显示下划线样式
小伙伴们，大家能够单击查看右侧“style.css”文件，来查看上面所说的全局样式（这个是从下载的boostrap.css中摘取出来的）。web
其实Bootstrap的全局样式采用了“normalize.css”，但并无一味的所有使用此重置样式，而是在此基础上进行了一些改良，让其更适合Bootstrap的设计思想。bootstrap
你能够经过“normalize.less”（LESS版本）或“_normalize.scss”（Sass版本）进行深刻的了解。浏览器
标题（一）
Bootstrap和普通的HTML页面同样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在全部浏览器下显示的效果同样，具体定义的规则能够以下表所示：
经过比较能够发现，Bootstrap标题样式进行了如下显著的优化重置：
一、从新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
二、全部标题的行高都是1.1（也就是font-size的1.1倍）,并且文本颜色和字体都继承父元素的颜色和字体。
三、固定不一样级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
标题的具体运用很是简单，和咱们平时运用是同样的，使用<h1>~<h6>标签，分别表示标题一至标题六，h 后面的数字越大，表示级别越小，文本也越小。来看一个简单的效果：右侧代码编辑器中的10-16行的代码。
在Bootstrap中为了让非标题元素和标题使用相同的样式，还特地定义了.h1~.h6六个类名。如右侧代码编辑器中 18-23行代码所示：
标题（二）
除此以外，咱们在Web的制做中，经常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果，使用了<small>标签来制做副标题。这个副标题具备其本身的一些独特样式：
一、行高都是1，并且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
二、因为<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
详细代码请参阅bootstrap.css文件中第407行~第443行。
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin-top: 10px;
margin-bottom: 10px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
font-size: 75%;
}
段落（正文文本）
段落是排版中另外一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：
一、全局文本字号为14px(font-size)。
二、行高为1.42857143（line-height），大约是20px(你们看到一串的小数或许会有疑惑，其实他是经过LESS编译器计算出来的，固然Sass也有这样的功能)。
三、颜色为深灰色（#333）；
四、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或许这样的字体对咱们中文并不太合适，但在实际项目中，你们能够根据本身的需求进行重置，在此咱们不作过多阐述，咱们回到这里。该设置都定义在<body>元素上，因为这几个属性都是继承属性，因此Web页面中文本（包括段落p元素）如无重置都会具备这些样式效果。
/*源码请查看bootstrap.css文件中第274行~280行*/
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
另外在Bootstrap中，为了让段落p元素之间具备必定的间距，便于用户阅读文本，特地设置了p元素的margin值（默认状况之下，p元素具备一个上下外边距，而且保持一个行高的高度）：
/*源码请查看bootstrap.css文件中第467行~469行*/
p {
margin: 0 0 10px;
}
若是你对CSS预处理器有所了解，那么你彻底能够根据Bootstrap提供的预编译版本LESS(或者Sass)进行自定义排版设置。在Bootstrap中，排版设置的默认值都存在variables.less文件中(Sass版本存在_variables.scss中)的两个变量：
LESS版本：
@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14
Sass版本：
$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14
强调内容
在实际项目中，对于一些重要的文本，但愿突出强调的部分都会作另外的样式处理。Bootstrap一样对这部分作了一些轻量级的处理。
若是想让一个段落p突出显示，能够经过添加类名“.lead”实现，其做用就是增大文本字号，加粗文本，并且对行高和margin也作相应的处理。用法以下：
<p>我是普通文本，个人样子长成这样我是普通文本，个人样子长成这样我是普通文本，</p> <p class="lead">我是特地要突出的文本，个人样子成这样。我是特地要突出的文本，个人样子长成这样。</p>
效果查看最右侧结果窗口。
“.lead”对应的样式以下：
/*源码查看bootstrap.css文件第470行~480行*/
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型浏览器字体稍大*/
.lead {
font-size: 21px;
}
}
除此以外，Bootstrap还经过元素标签:<small>、<strong>、<em>和<cite>给文本作突出样式处理。
/*源码查看bootstrap.css文件第55行~第58行*/
b,strong {
font-weight: bold; /*文本加粗*/
}
/*源码查看bootstrap.css文件第481行~第484行*/
small,.small {
font-size: 85%; /*标准字体的85%,也就是14px * 0.85px，差很少12px*/
}
/*源码查看bootstrap.css第485行~第487行*/
cite {
font-style: normal;
}
粗体
粗体就是给文本加粗，在普通的元素中咱们通常经过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可使用<b>和<strong>标签让文本直接加粗。
/*源码查看bootstrap.css文件第55行~第58行*/
b,strong {
font-weight: bold; /*文本加粗*/
}
例如，下面的代码使用<strong>标签订义了强调文本：
<p>我在学习<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的全部知识。</p>
斜体
在排版中，除了用加粗来强调突出的文本以外，还可使用斜体。斜体相似于加粗同样，除了能够给元素设置样式font-style值为italic实现以外，在Bootstrap中还能够经过使用标签<em>或<i>来实现。
例如，下面的代码使用了<em>和<i>标签订义了强调文本：
<p>我在慕课网上跟<em>大漠</em>一块儿学习<i>Bootstrap</i>的使用。我必定要学会<i>Bootstrap</i>。</p>
强调相关的类
在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（相似前面说的“.lead”）,这些强调类都是经过颜色来表示强调，具本说明以下：
- .text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（#a94442）
具本源码查看bootstrap.css文件第500行~第532行：
.text-muted {
color: #999;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}
强调相关的类
在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（相似前面说的“.lead”）,这些强调类都是经过颜色来表示强调，具本说明以下：
- .text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（#a94442）
具本源码查看bootstrap.css文件第500行~第532行：
.text-muted {
color: #999;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}
文本对齐风格
在排版中离不开文本的对齐方式。在CSS中经常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：
☑ 左对齐，取值left
☑ 居中对齐，取值center
☑ 右对齐，取值right
☑ 两端对齐，取值justify
为了简化操做，方便使用，Bootstrap经过定义四个类名来控制文本的对齐风格：
☑ .text-left：左对齐
☑ .text-center：居中对齐
☑ .text-right：右对齐
☑ .text-justify：两端对齐
具体源码查看bootstrap.css文件第488行~第499行：
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
例以下面的四行代码，分别定义文本的四种不一样的对齐风格：
<p class="text-left">我居左</p> <p class="text-center">我居中</p> <p class="text-right">我居右</p> <p class="text-justify">我两端对齐</p>
列表--简介
在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明以下：
无序列表
<ul>
<li>…</li>
</ul>
有序列表
<ol>
<li>…</li>
</ol>
定义列表
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
Bootstrap根据平时的使用情形提供了六种形式的列表：
☑ 普通列表
☑ 有序列表
☑ 去点列表
☑ 内联列表
☑ 描述列表
表单控件(输入框input)
每个表单都是由表单控件组成。离开了控件，表单就失去了意义。接下来的咱们简单的来了解Bootstrap框架中表单控件的相关知识。
单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，若是没有指定type类型，将没法获得正确的样式，由于Bootstrap框架都是经过input[type=“?”](其中?号表明type类型，好比说text类型，对应的是input[type=“text”])的形式来定义样式的。
为了让控件在各类表单风格中样式不出错，须要添加类名“form-control”，如：
<form role="form"> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter email"> </div> </form>
表单控件(下拉选择框select)
Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。如：
<form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form>
表单控件(文本域textarea)
文本域和原始使用方法同样，设置rows可定义其高度，设置cols能够设置其宽度。但若是textarea元素中添加了类名“form-control”类名，则无需设置cols属性。由于Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
<form role="form"> <div class="form-group"> <textarea class="form-control" rows="3"></textarea> </div> </form>
表单控件(复选框checkbox和单选择按钮radio)
Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们作了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。使用Bootstrap框架，开发人员无需考虑太多，只须要按照下面的方法使用便可。
<form role="form"> <div class="checkbox"> <label> <input type="checkbox" value=""> 记住密码 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked> 喜欢 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate"> 不喜欢 </label> </div> </form>
运行效果以下或查看右侧结果窗口（案例1）：
从上面的示例，咱们能够得知：
一、无论是checkbox仍是radio都使用label包起来了
二、checkbox连同label标签放置在一个名为“.checkbox”的容器内
三、radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。源码请查看bootstrap.css文件第1742行～第1762行：
.radio,
.checkbox {
display: block;
min-height: 20px;
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
display: inline;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}
表单控件(复选框和单选按钮水平排列)
有时候，为了布局的须要，将复选框和单选按钮须要水平排列。Bootstrap框架也作了这方面的考虑：
一、若是checkbox须要水平排列，只须要在label标签上添加类名“checkbox-inline”
二、若是radio须要水平排列，只须要在label标签上添加类名“radio-inline”
以下所示：
<form role="form"> <div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" value="option1">游戏 </label> <label class="checkbox-inline"> <input type="checkbox" value="option2">摄影 </label> <label class="checkbox-inline"> <input type="checkbox" value="option3">旅游 </label> </div> <div class="form-group"> <label class="radio-inline"> <input type="radio" value="option1" name="sex">男性 </label> <label class="radio-inline"> <input type="radio" value="option2" name="sex">女性 </label> <label class="radio-inline"> <input type="radio" value="option3" name="sex">中性 </label> </div> </form>
运行效果以下或查看右侧结果窗口：
实现源码请查看bootstrap.css文件第1767行～第1780行：
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
表单控件(按钮)
按钮也是表单重要控件之一,制做按钮一般使用下面代码来实现：
☑ input[type=“submit”]
☑ input[type=“button”]
☑ input[type=“reset”]
☑ <button>
在Bootstrap框架中的按钮都是采用<button>来实现。
有关于Bootstrap中按钮如何制做，在这里不作过多阐述，由于按钮也是Bootstrap框架中核心部分之一，后面咱们专门有一节内容来介绍Bootstrap的按钮。
这里先让你们看看Bootstrap的按钮长成什么样：
表单控件大小
前面看到的表单控件都正常的大小。能够经过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不一样的类名，用来控制表单控件的高度。这两个类名是：
一、input-sm:让控件比正常大小更小
二、input-lg:让控件比正常大小更大
这两个类适用于表单中的input，textarea和select控件，具体使用以下：
<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大"> <input class="form-control" type="text" placeholder="正常大小"> <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">
运行效果以下或查看右侧结果窗口：
源码请查阅bootstrap.css文件第1795~第1824行：
.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg {
height: 46px;
line-height: 46px;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
}
从上面的源码中不难发现，无论是“input-sm”仍是“input-lg”仅对控件高度作了处理。但每每不少时候，咱们须要控件宽度也要作必定的变化处理。这个时候就要借住Bootstrap框架的网格系统。因此你要控制表单宽度，能够像下面这样使用：
<form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> </div> … </form>
注：网格布局在后面章节中会进行详细讲解。
运行效果以下或查看右侧结果窗口：
前面介绍水平表单时说过，若是表单使用了类名“form-horizontal”，其中“form-group”就至关于网格系统中的“row”。换句话说，若是没有这样作，要经过网格系统来控制表单控件宽度，就须要这样使用：
<div class="row"> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> </div>
表单控件状态(焦点状态)
表单主要用来与用户沟通，好的表单就能更好的与用户进行沟通，而好的表单必定离不开表单的控件状态。
表单状态的做用：
每一种状态都能给用户传递不一样的信息，好比表单有焦点的状态能够告诉用户能够输入或选择东西，禁用状态能够告诉用户不能够输入或选择东西，还有就是表单控件验证状态，能够告诉用户的操做是否正确等。那么在Bootstrap框架中的表单控件也具有这些状态。
焦点状态是经过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，从新添加阴影效果。
源码请查阅bootstrap.css文件第1707行～第1712行：
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
从源码中咱们能够看出，要让控件在焦点状态下有上面样式效果，须要给控件添加类名“form-control”：
<form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果"> </div> <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果"> </div> </div> </form>
运行效果以下或查看右侧结果窗口：
（鼠标单击输入框，使其得到焦点就能够看到加入蓝色边框效果）
在Bootstrap框架中，file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太同样，主要是由于Bootstrap对他们作了一些特殊处理：
/*源码查看boostrap.css文件第1676行～第1682行*/
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
表单控件状态(禁用状态)
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是同样的，在相应的表单控件上添加属性“disabled”。和其余表单的禁用状态不一样的是，Bootstrap框架作了一些样式风格的处理：
/*源码请查看bootstrap.css文件第1723行～第1729行*/
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
使用方法为：只须要在须要禁用的表单控件上加上“disabled”便可：
<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>
运行效果以下或查看右侧结果窗口：
在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，并且手型变成了不许输入的形状。若是控件中不使用类名“form-control”，禁用的控件只会有一个不许输入的手型出来。
/*源码请查阅bootstrap.css文件第1781行～第1794行*/
input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
在Bootstrap框架中，若是fieldset设置了disabled属性，整个域都将处于被禁用状态。
<form role="form"> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">禁用的输入框</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入"> </div> <div class="form-group"> <label for="disabledSelect">禁用的下拉框</label> <select id="disabledSelect" class="form-control"> <option>不可选择</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox">没法选择 </label> </div> <button type="submit" class="btnbtn-primary">提交</button> </fieldset> </form>
运行效果以下或查看右侧结果窗口：
听说对于整个禁用的域中，若是legend中有输入框的话，这个输入框是没法被禁用的。咱们一块儿来验证一下：
<form role="form"> <fieldset disabled> <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，可是我没被禁用，不信？单击试一下" /></legend> … </fieldset> </form>
运行效果以下或查看右侧结果窗口：
表单控件状态(验证状态)
在制做表单时，难免要作表单验证。一样也须要提供验证状态样式，在Bootstrap框架中一样提供这几种效果。
一、.has-warning:警告状态（黄色）
二、.has-error：错误状态（红色）
三、.has-success：成功状态（绿色）
使用的时候只须要在form-group容器上对应添加状态类名。
<form role="form"> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">警告状态</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">错误状态</label> <input type="text" class="form-control" id="inputError1" placeholder="错误状态"> </div> </form>
运行效果以下或查看右侧结果窗口：
从效果能够看出，三种状态下效果都是同样的，只是颜色不同而以。
源码请查阅bootstrap.css文件第1481行～第1918行。
其余两种状态省略源码不在此展现。
不少时候，在表单验证的时候，不一样的状态会提供不一样的icon，好比成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。若是你想让表单在对应的状态下显示icon出来，只须要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一块儿：
<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="glyphiconglyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning1">警告状态</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"> <span class="glyphiconglyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">错误状态</label> <input type="text" class="form-control" id="inputError1" placeholder="错误状态"> <span class="glyphiconglyphicon-remove form-control-feedback"></span> </div> </form>
运行效果以下或查看右侧结果窗口：
从效果图中能够看出，图标都居右。在Bootstrap的小图标都是使用@font-face来制做（后面的内容中将会着重用一节内容来介绍）。并且必须在表单中添加了一个span元素：
<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>
经过定位来实现，具体源码请查阅bootstrap.css文件第1825行～第1840行。
表单提示信息
日常在制做表单验证时，要提供不一样的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，而且显示在控件底部。
<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="help-block">你输入的信息是正确的</span> <span class="glyphiconglyphicon-ok form-control-feedback"></span> </div> … </form>
运行效果以下或查看右侧结果窗口：
具体样式代码请查看bootstrap.css文件第1922行～第1927行：
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。通常让提示信息显示在控件的后面，也就是同一水平显示。若是你想在BootstrapV3.x版本也有这样的效果，你能够添加这段代码：
.help-inline{
display:inline-block;
padding-left:5px;
color: #737373;
}
若是你不想为bootstrap.css增长本身的代码，并且设计又有这种样的需求，那么只能借助于Bootstrap的网格系统。(网格系统在后面的章节中会详细讲解)
<form role="form"> <div class="form-group"> <label class="control-label" for="inputSuccess1">成功状态</label> <div class="row"> <div class="col-xs-6"> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > </div> <span class="col-xs-6 help-block">你输入的信息是正确的</span> </div> </div> </form>
运行效果以下或查看右侧结果窗口：
结束语：有关于Bootstrap框架中表单的运用除了按钮部分，到此就算是介绍完了。若是你以为这样的表单效果并非你须要的，你彻底能够经过forms.less或者_forms.scss文件进行定制，而后从新编译就能够获得你须要的表单效果。在接下来的一节中，咱们Bootstrap框架中另外一个核心内容——按钮。
按钮
按钮也是Bootstrap框架核心内容之一。由于按钮是Web制做中不可缺乏的东西。并且不一样的Web页面具备不一样的按钮风格，甚至说同一个Web网站或应用程序具备多种按钮风格，好比说不一样的按钮颜色、大小和状态等。那么Bootstrap框架也考虑了这些因素，接下来的内容咱们一块儿来探讨Bootstrap框架中的另外一核心部份内容——按钮。
Bootstrap框架的按钮也是一个独立部分，咱们一样在不一样的版本之中能找到对应的代码：
- LESS版本：查看源文件buttons.less
- Sass版本：查看源文件_buttons.scss
- 已编译版本：查看源文件bootstrap.css文件第1992行～第2353行
基本按钮
Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮同样，都是经过类名“btn”来实现。不一样的是在V3.x版本要简约不少，去除了V2.x版本中的大量的CSS3中的部分特效，好比说文本阴影（text-shadow）、渐变背景（background-image）、边框阴影（box-shadow）等。
难能难得的是，Bootstrap框架中的考虑了不一样浏览器的解析差别，进行了比较安全的兼容性处理，使按钮效果在不一样的浏览器中所呈现的效果基本相同。
源码请查阅bootstrap.css文件第1992行～第2010行：
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
Bootstrap框架的按钮使用很是的简单，使用方式以下：
<button class="btn" type="button">我是一个基本按钮</button>
运行效果以下或查看右侧结果窗口：
默认按钮
Bootstrap框架首先经过基础类名“.btn”定义了一个基础的按钮风格，而后经过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。
/*源码请查阅bootstrap.css文件第2040行～第2044行*/
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
使用默认按钮风格也很是的简单，只须要在基础按钮“btn”的基础上增长类名“btn-default”便可：
<button class="btn btn-default" type="button">默认按钮</button>
运行效果以下或查看右侧结果窗口：
多标签支持
通常制做按钮除了使用<button>标签元素以外，还可使用<input type="submit">和<a>标签等。一样，在Bootstrap框架中制做按钮时，除了刚才所说的这些标签元素以外，还可使用在其余的标签元素上，惟一须要注意的是，要在制做按钮的标签元素上添加类名“btn”。若是不添加是不会有任何按钮效果。
咱们一块儿来看看其余标签制做的基本按钮效果：
<button class="btn btn-default" type="button">button标签按钮</button> <input type="submit" class="btn btn-default" value="input标签按钮"/> <a href="##" class="btn btn-default">a标签按钮</a> <span class="btn btn-default">span标签按钮</span> <div class="btn btn-default">div标签按钮</div>
运行效果以下或查看右侧结果窗口：
注意：虽然在Bootstrap框架中使用任何标签元素均可以实现按钮风格，但我的并不建议这样使用，为了不浏览器兼容性问题，我的强烈建议使用button或a标签来制做按钮。
定制风格
在介绍按钮开篇就说过，Web页面可能会有不一样的按钮风格。那么在Bootstrap框架也考虑了。在Bootstrap框架中除了默认的按钮风格以外，还有其余六种按钮风格，每种风格的其实都同样，不一样之处就是按钮的背景颜色、边框颜色和文本颜色。
在Bootstrap框架中不一样的按钮风格都是经过不一样的类名来实现，在使用过程当中，开发者只须要选择不一样的类名便可：
使用起来就很简单，就像前面介绍的默认按钮同样的使用方法，只须要在基础按钮“.btn”基础上追加对应的类名，就能够获得须要的按钮风格。如：
<button class="btn" type="button">基础按钮.btn</button> <button class="btn btn-default" type="button">默认按钮.btn-default</button> <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <button class="btn btn-success" type="button">成功按钮.btn-success</button> <button class="btn btn-info" type="button">信息按钮.btn-info</button> <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <button class="btn btn-link" type="button">连接按钮.btn-link</button>
运行效果以下或查看右侧结果窗口：
有关于按钮风格定制的源码能够查阅bootstrap.css文件第2081行～第2318行。
按钮大小
上一节介绍了按钮的定制风格，也就是如何实现Web页面中多种风格按钮。在Bootstrap框架中，对于按钮的大小，也是能够定制的。相似于input同样，经过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。
在Bootstrap框架中提供了三个类名来控制按钮大小：
从上表中不难发现，在Bootstrap框架中控制按钮的大小都是经过修改按钮的padding、line-height、font-size和border-radius几个属性。
/*源码查阅bootstrap.css文件中第2319行～第2339行*/
.btn-lg,
.btn-group-lg> .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
那么在实际使用中，这几个类名能够配合按钮中其余颜色类名一块儿使用，但惟一一点不能缺乏“.btn”类名：
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> <button class="btn btn-primary" type="button">正常按钮</button> <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button> <button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>
效果以下图或查看右侧结果窗口：
块状按钮
从前面几节的内容中，你们可能发现了，每一个示例中的按钮宽度都是依靠按钮文本和padding的值来决定。但有时候在制做按钮的时候须要按钮宽度充满整个父容器（width:100%），特别是在移动端的制做中。那么前面的方法咱们都没法很好的实现，除非从新定义按钮的宽度。其实在Bootstrap中并不须要这样作，Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可让按钮充满整个容器，而且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。具体源码请查阅bootstrap.css文件第2340行～第2353行：
.btn-block {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.btn-block + .btn-block {
margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%;
}
使用方法和前面的相似，只须要在原按钮类名上添加“.btn-block”类名，固然“.btn”类名是不可或缺的：
<button class="btnbtn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button> <button class="btnbtn-primary btn-block" type="button">正常按钮</button> <button class="btnbtn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button> <button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>
运行效果以下：
按钮状态——活动状态
Bootstrap框架针对按钮的状态作了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种：活动状态和禁用状态。
Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。
/*源码请查看bootstrap.css文件第2011行～第2029行*/
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus {
color: #333;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
并且不一样风格下的按钮都具备这几种状态效果，只是颜色作了必定的调整，咱们以默认风格（btn-default）为例：
/*源码请查看bootstrap.css文件第2045行～第2058行*/
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
background-image: none;
}
当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于<button>元素是经过“:active”伪类实现，而对于<a>这样的标签元素则是经过添加类名“.active”来实现。
按钮状态——禁用状态
和input等表单控件同样，在Bootstrap框架的按钮中也具备禁用状态的设置。禁用状态与其余状态按钮相比，就是背景颜色的透明度作了必定的处理，opcity的值从100%调整为65%。
在Bootstrap框架中，要禁用按钮有两种实现方式：
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”
二者的主要区别是：
“.disabled”样式不会禁止按钮的默认行为，好比说提交和重置行为等。若是想要让这样的禁用按钮也能禁止按钮的默认行为，则须要经过JavaScript这样的语言来处理。对于<a>标签也存在相似问题，若是经过类名“.disable”来禁用按钮，其连接行为是没法禁止。而在元素标签中添加“disabled”属性的方法是能够禁止元素的默认行为的。
下面是两种方法的举例：
<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">经过disabled属性禁用按钮</button> <button class="btnbtn-primary btn-block disabled" type="button">经过添加类名disabled禁用按钮</button> <button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按钮</button>
运行效果以下或查看右侧结果窗口：
对应的样式代码请查阅bootstrap.css文件第2030行～第2039行：
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
一样的，其余风格按钮也具备这样的效果，只是颜色作了必定的调整，好比信息按钮(.btn-info)所示：
/*源码请查看bootstrap.css文件第2182行～第2199行*/
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
background-color: #5bc0de;
border-color: #46b8da;
}
图像
图像在网页制做中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供如下几种风格：
一、img-responsive：响应式图片，主要针对于响应式设计
二、img-rounded：圆角图片
三、img-circle：圆形图片
四、img-thumbnail：缩略图片
使用方法：
使用方法很是简单，只须要在<img>标签上添加对应的类名，以下代码：
<img alt="140x140" src="http://placehold.it/140x140"> <img class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> <img class="img-circle" alt="140x140" src="http://placehold.it/140x140"> <img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> <img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">
运行效果以下或查看右侧结果窗口：
每种状态对应的源码能够查阅bootstrap.css文件第306行～第335行：
img {
vertical-align: middle;
}
.img-responsive,
.thumbnail>img,
.thumbnail a >img,
.carousel-inner > .item >img,
.carousel-inner > .item > a >img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
设置图片大小：
因为样式没有对图片作大小上的样式限制，因此在实际使用的时候，须要经过其余的方式来处理图片大小。好比说控制图片容器大小。（注意不能够经过css样式直接修改img图片的大小，这样操做就不响应了）
注意：
对于圆角图片和圆形图片效果，由于是使用了CSS3的圆角样式来实现的，因此注意对于IE8以及其如下版本不支持，是没有圆角效果的。
Bootstrap框架为了你们更好的维护图像的样式，一样将这部分样式独立出来：
一、LESS版本，能够查阅scaffolding.less
二、Sass版本，能够查阅_scaffolding.scss
你们能够修改其中之一，从新编译就能够获得本身须要的图片样式效果。
图标（一）
200个icon：
这里说的图标就是Web制做中常看到的小icon图标，能够说这些小icon图标是一个优秀Web中不可缺乏的一部分，起到画龙点睛的效果。在Bootstrap框架中也为你们提供了近200个不一样的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。
放心使用：
在具体介绍Bootstrap的icon图标以前，咱们首先要感谢glyphicons.com网站，由于Bootstrap框架中图标都是glyphicons.com这个商业网站提供的，而且免费受权给Bootstrap框架使用，因此你们能够放心使用在本身的项目当中。
Bootstrap框架将内部样式也提取出来：
一、LESS版本：对应源文件为glyphicons.less文件
二、Sass版本：对应源文件为_glyphicons.scss文件
三、编译后的Bootstrap版本：查看bootstrap.css文件第2375行～第2992行
原理分析：
Bootstrap框架中的图标都是字体图标，其实现原理就是经过@font-face属性加载了字体。
/*源码请查看bootstrap.css文件第2357行～第2380行*/
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
你们或许会问，这些字体我去哪里获取。若是你是从前面一直阅读过来，咱们在介绍文件结构那一节就已介绍过。在Bootstrap框架中有一个fonts的目录，这个目录中提供的字体文件就是用于制做icon的字体文件。
自定义完字体以后，须要对icon设置一个默认样式，在Bootstrap框架中是经过给元素添加“glyphicon”类名来实现，而后经过伪元素“:before”的“content”属性调取对应的icon编码：
/*源码请查看bootstrap.css文件第2381行～第2992行*/
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
….
图标（二）
在网页中使用图标也很是的简单，在任何内联元素上应用所对应的样式便可：
<span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-asterisk"></span> <span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-cloud"></span>
运行效果以下或查看右侧结果窗口：
全部icon都是以”glyphicon-”前缀的类名开始，而后后缀表示图标的名称。具体说明以下：
全部名称查看：
请点击：http://getbootstrap.com/components/#glyphicons 连接查阅或根据bootstrap.css文件第2393行～第2992行查阅。
特别说明：
除了使用glyphicon.com提供的图标以外，还可使用第三方为Bootstrap框架设计的图标字体，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介绍的同样，不过记得将字体下载到你本地。 感兴趣的能够阅读官网相关介绍。
实现原理
网格系统的实现原理很是简单，仅仅是经过定义容器大小，平分12份(也有平分红24份或32份，但12份是最多见的)，再调整内外边距，最后结合媒体查询，就制做出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分红12份。
在使用的时候你们能够根据实际状况从新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，固然你也能够分红更多，但不建议这样使用）。
（这一章节注意效果要在全屏状态下查看，鼠标滑过结果窗口时可单击出现的全屏按钮）
工做原理
Bootstrap框架的网格系统工做原理以下：
一、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：
<div class="container"> <div class="row"></div> </div>
二、在行(.row)中能够添加列(.column)，但列数之和不能超过平分的总列数，好比12。如：
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div>
三、具体内容应当放置在列容器（column）以内，并且只有列（column）才能够做为行容器(.row)的直接子元素
四、经过设置内距（padding）从而建立列与列之间的间距。而后经过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响
为了更好的理解Bootstrap框架的网格系统工做原理，咱们来看一张草图：
简单对图解释一下：
一、最外边框，带有一大片白色区域，就是至关于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果，其带有四种类型的浏览器（超小屏，小屏，中屏和大屏），其断点（像素的分界点）是768px、992px和1220px。
二、第二个边框(1)至关于容器(.container)。针对不一样的浏览器分辨率，其宽度也不同：自动、750px、970px和1170px。在bootstrap.css的第736行～第756行进行设置：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 768px) {
.container {
width: 750px;
}
@media (min-width: 992px) {
.container {
width: 970px;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
三、２号横条阐述的是，将容器的行（.row）平分了12等份，也就是列。每一个列都有一个“padding-left:15px”(图中粉红色部分)和一个“padding-right:15px”(图中紫色部分)。这样也致使了第一个列的padding-left和最后一列的padding-right占据了总宽度的30px，从而导致页面不美观，固然，若是你须要留有必定的间距，这个作法是不错的。如bootstrap.css中第767行~第772行所示：
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
四、３号横条就是行容器(.row),其定义了“margin-left”和”margin-right”值为”-15px”，用来抵消第一个列的左内距和最后一列的右内距。在bootstrap.css的第763行~第767行能够看到：
.row {
margin-right: -15px;
margin-left: -15px;
五、将行与列给合在一块儿就能看到横条4的效果。也就是咱们指望看到的效果，第一列和最后一列与容器（.container）之间没有间距。
横条５只是想向你们展现，你能够根据须要，任意组合列与列，只是他们的组合数之和不要超过总列数。
基本用法
网格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。因为Bootstrap框架在不一样屏幕尺寸使用了不一样的网格样式，在这一节中所涉及到的示例，咱们都以中屏（970px）为例进行介绍，其余屏幕的使用也相似这一种。关于屏幕尺寸以下图：
一、列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点相似于表格的colspan属性，例如：
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</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-3">.col-md-3</div> <div class="col-md-6">.col-md-6</div> <div class="col-md-3">.col-md-3</div> </div> </div>
使用上面的结构，你将看到下图的效果：
(在右侧结果窗口中查看时须要设置为全屏)
实现列组合方式很是简单，只涉及两个CSS两个特性：浮动与宽度百分比。在bootstrap.css文件的第1088行～1126行：
/*确保全部列左浮动*/
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
/*定义每一个列组合的宽度（使用的百分比）*/
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
列偏移
有的时候，咱们不但愿相邻的两个列紧靠在一块儿，但又不想使用margin或者其余的技术手段来。这个时候就可使用列偏移（offset）功能来实现。使用列偏移也很是简单，只须要在列元素上添加类名“col-md-offset-*”(其中星号表明要偏移的列组合数)，那么具备这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div> <div class="col-md-2">.col-md-3</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div> </div> </div>
如上面的示例代码，获得的效果以下或在最右侧结果窗口中能够看到(鼠标移到结果窗口，单击出现的全屏按钮):
实现原理很是简单，就是利用十二分之一（1/12）的margin-left。而后有多少个offset，就有多少个margin-left。在bootstrap.css中第1205行～1241行所示：
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}
注意：
不过有一个细节须要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，否则会致列断行显示，如：
<div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3 col-md-offset-3">col-md-offset-3</div> <div class="col-md-4">col-md-4</div> </div>
上面代码中列和偏移列总数为3+3+3+4 = 13>12，因此发生了列断行。
如上面的示例代码，获得的效果以下或在最右侧结果窗口中能够看到(鼠标移到结果窗口，单击出现的全屏按钮):
列排序
列排序其实就是改变列的方向，就是改变左右浮动，而且设置浮动的距离。在Bootstrap框架的网格系统中是经过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号表明移动的列组合数)。
咱们来看一个简单的示例：
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> </div>
默认状况之下，上面的代码效果以下：
“col-md-4”居左，“col-md-8”居右，若是要互换位置，须要将“col-md-4”向右移动８个列的距离，也就是8个offset ,也就是在“<div class=“col-md-4”>”添加类名“col-md-push-8”，调用其样式。
也要将“col-md-8”向左移动４个列的距离，也就是4个offset，在“<div class=”col-md-8”>”上添加类名“col-md-pull-4”：
Bootstrap仅经过设置left和right来实现定位效果。在boostrap.css文件的第1127行~第1204行能够看到具体的代码：
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: 0;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: 0;
}
列的嵌套
Bootstrap框架的网格系统还支持列的嵌套。你能够在一个列中添加一个或者多个行（row）容器，而后在这个行容器中插入列（像前面介绍的同样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。来看一个简单示例：
<div class="container"> <div class="row"> <div class="col-md-8"> 个人里面嵌套了一个网格 <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </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-8"> 个人里面嵌套了一个网格 <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> </div> </div>
效果以下：
注意：嵌套的列总数也须要遵循不超过12列。否则会形成末位列换行显示。
下拉菜单（基本用法）
小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不一样的版本，它对应的文件：
☑ LESS版本：对应的源码文件为 dropdowns.less
☑ Sass版本：对应的源码文件为 _dropdowns.scss
☑ 编译后的Bootstrap版本：查看bootstrap.css文件第3004行～第3130行
在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。固然，若是你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也能够调用这个js文件。不过在咱们的教程中，咱们统一调用压缩好的“bootstrap.min.js”文件：
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
特别声明：由于Bootstrap的组件交互效果都是依赖于jQuery库写的插件，因此在使用bootstrap.min.js以前必定要先加载jquery.min.js才会生效果。
咱们先来看官网上一个简单的示例：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> … <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>
使用方法：
在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否很是的重要，若是结构和类名未使用正确，直接影响组件是否能正常运用。咱们来简单的看看：
一、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:
<div class="dropdown"></div>
二、使用了一个<button>按钮作为父菜单，而且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:
data-toggle="dropdown"
三、下拉菜单项使用一个ul列表，而且定义一个类名为“dropdown-menu”，此示例为:
<ul class="dropdown-menu">
下拉菜单（原理分析）
Bootstrap框架中的下拉菜单组件，其下拉菜单项默认是隐藏的，以下所示：
由于“dropdown-menu”默认样式设置了“display:none”，其详细源码请查看bootstrap.css文件第3010行～第3029行：
.dropdown-menu {
position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/
top: 100%;/*让下拉菜单项在父菜单项底部，若是父元素不设置相对定位，该元素相对于body元素*/
left: 0;
z-index: 1000;/*让下拉菜单项不被其余元素遮盖住*/
display: none;/*默认隐藏下拉菜单项*/
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
当用户点击父菜单项时，下拉菜单将会被显示出来，以下所示：
当用户再次点击时，下拉菜单将继续隐藏，以下所示：
原理分析：
如今咱们来分析一下实现原理，很是简单，经过js技术手段，给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说，默认状况，“div.dropdown”没有类名“open”，当用户第一次点击时，“div.dropdown”会添加类名“open”；当用户再次点击时，“div.dropdown”容器中的类名“open”又会被移除。咱们能够经过浏览器的firebug查看整个过程：
默认状况：
用户第一次点击：
用户再次点击：
在bootstrap.css文件第3076行～第3078行，咱们能够很容易发现：
.open > .dropdown-menu {
display: block;
}
下拉菜单（下拉分隔线）
在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间能够经过添加一个空的<li>，而且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。对应的样式代码：
/*源码bootstrap.css文件第3034行～第3039行*/
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
效果以下：
下拉菜单（菜单标题）
上一小节讲解经过添加“divider”能够将下拉菜单分组，为了让这个分组更明显，还能够给每一个组添加一个头部（标题）。以下：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">第一部分菜单头部</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> … <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜单头部</li> … <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>
对应的样式以下：
/*查看bootstrap.css文件第3090行～第3096行*/
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #999;
}
运行效果以下：
下拉菜单（对齐方式）
实现右对齐方法：
Bootstrap框架中下拉菜单默认是左对齐，若是你想让下拉菜单相对于父容器右对齐时，能够在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，以下所示：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1"> … </ul> </div>
上面代码中的“pull-right”类能够用“dropdown-menu-right”代替，两个类的做用是同样的，可从下面的源代码中看出。
实现原理：
对应的样式以下：
/*源码请查看bootstrap.css文件第3030行～第3033行和3082行～第3085行*/
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
同时必定要为.dropdown添加float:leftcss样式。
.dropdown{
float: left;
}
运行效果以下所示：
下拉菜单与父容器左边对齐:
与此同时，还有一个类名恰好与“dropdown-menu-right”相反的类名“dropdown-menu-left”，其效果就是让下拉菜单与父容器左边对齐，其实就是默认效果。
/*请查看bootstrap.css文件第3086行～第3089行*/
.dropdown-menu-left {
right: auto;
left: 0;
}
下拉菜单（菜单项状态）
下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）：
/*查看bootstrap.css文件第3049行～第3054行*/
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只须要在对应的菜单项上添加对应的类名：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> …. <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>
运行效果以下：
对应的样式代码也很是简单：
/*请查看bootstrap.css文件第3055行～第3075行*/
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
text-decoration: none;
background-color: #428bca;
outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
按钮（按钮组）
单个按钮在Web页面中的运用有时候并不能知足咱们的业务需求，经常会看到将多个按钮组合在一块儿使用，好比富文本编辑器里的一组小图标按钮等。那么在这一节中，咱们主要向你们介绍Bootstrap框架为你们提供的按钮组组件。
源码查询：
按钮组也是一个独立的组件，因此能够找到对应的源码文件：
☑ LESS版本：对应的源文件为buttons.less
☑ Sass版本：对应的源文件为_buttons.scss
☑ CSS版本：对应bootstrap.css文件第3131行～第3291行
使用方法：
按钮组和下拉菜单组件同样，须要依赖于button.js插件才能正常运行。不过咱们一样能够直接只调用bootstrap.js文件。由于这个文件已集成了button.js插件功能。
对于结构方面，很是的简单。使用一个名为“btn-group”的容器，把多个按钮放到这个容器中。以下所示：
<div class="btn-group"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step-backward"></span> </button> … <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step-forward"></span> </button> </div>
运行效果以下所示：
除了可使用<button>元素以外，还可使用其余标签元素，好比<a>标签。惟一要保证的是：无论使用什么标签，“.btn-group”容器里的标签元素须要带有类名“.btn”。
按钮组实现源码以下：
/*查看bootstrap.css文件第3131行～第3161行*/
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}
从效果图上咱们能够看出，按钮组四个角都是圆角（支持CSS3的浏览器），但有的小伙伴会问，咱们日常制做网页时每一个按钮都是带有圆角，而在按钮组中的按钮，除了第一个和最后一个具备边上的圆角以外，其余的按钮没有圆角，它是怎么实现的呢？其实实现方法很是简单：
一、默认全部按钮都有圆角
二、除第一个按钮和最后一个按钮（下拉按钮除外），其余的按钮都取消圆角效果
三、第一个按钮只留左上角和左下角是圆角
四、最后一个按钮只留右上角和右下角是圆角
对应的源码以下：
/*查看bootstrap.css文件第3174行～第3203行*/
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group > .btn:first-child {
margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
按钮（按钮工具栏）
在富文本编辑器中，将按钮组分组排列在一块儿，好比说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组，以下图所示：
那么Bootstrap框架按钮工具栏也提供了这样的制做方法，你只须要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，以下所示：
<div class="btn-toolbar"> <div class="btn-group"> … </div> <div class="btn-group"> … </div> <div class="btn-group"> … </div> <div class="btn-group"> … </div> </div>
实现原理主要是让容器的多个分组“btn-group”元素进行浮动，而且组与组以前保持5px的左外距。代码以下：
/*源码请查阅bootstrap.css文件第3162行～第3173行*/
.btn-toolbar {
margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
margin-left: 5px;
}
注意在”btn-toolbar”上清除浮动。
/*源码请查阅bootstrap.css文件第5062行*/
.btn-toolbar:before,
.btn-toolbar:after｛
display: table;
content: " ";
｝
.btn-toolbar:after{
clear: both;
}
运行效果以下：
按钮组大小设置
在介绍按钮一节中，咱们知道按钮是经过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小，咱们也能够经过相似的方法：
☑ .btn-group-lg:大按钮组
☑ .btn-group-sm:小按钮组
☑ .btn-group-xs:超小按钮组
只须要在“.btn-group”类名上追加对应的类名，就能够获得不一样大小的按钮组。以下所示：
<div class="btn-toolbar"> <div class="btn-group btn-group-lg"> … </div> <div class="btn-group"> … </div> <div class="btn-group btn-group-sm"> … </div> <div class="btn-group btn-group-xs"> … </div> </div>
运行效果以下所示：
实现上图效果样式代码以下：
/*源码请查阅bootstrap.css文件第2320行～第2340行*/
.btn-lg,
.btn-group-lg> .btn{
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn{
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
按钮（嵌套分组）
不少时候，咱们常把下拉菜单和普通的按钮组排列在一块儿，实现相似于导航菜单的效果。以下所示：
使用的时候，只须要把当初制做下拉菜单的“dropdown”的容器换成“btn-group”，而且和普通的按钮放在同一级。以下所示：
<div class="btn-group"> <button class="btnbtn-default" type="button">首页</button> <button class="btnbtn-default" type="button">产品展现</button> <button class="btnbtn-default" type="button">案例分析</button> <button class="btnbtn-default" type="button">联系咱们</button> <div class="btn-group"> <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于咱们<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> </div>
实现的样式代码：
/*查看bootstrap.css文件第3192行～第3223行*/
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-box-shadow: none;
box-shadow: none;
}
按钮（垂直分组）
前面看到的示例，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。咱们只须要把水平分组的“btn-group”类名换成“btn-group-vertical”便可。以下所示：
<div class="btn-group-vertical"> <button class="btnbtn-default" type="button">首页</button> <button class="btnbtn-default" type="button">产品展现</button> <button class="btnbtn-default" type="button">案例分析</button> <button class="btnbtn-default" type="button">联系咱们</button> <div class="btn-group"> <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于咱们<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> </div>
运行的效果以下：
实现垂直分组的样式代码：
/*请查看bootstrap.css文件第3234行～第3276行*/
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
和水平分组按钮不同的是：
☑ 水平分组按钮第一个按钮左上角和左下角具备圆角以及最后一个按钮右上角和右下角具备圆角
☑ 垂直分组按钮第一个按钮左上角和右上角具备圆角以及最后一个按钮左下角和右下角具备圆角
按钮（等分按钮）
等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每一个按钮平分整个容器宽度。例如，若是你按钮组里面有五个按钮，那么每一个按钮是20%的宽度，若是有四个按钮，那么每一个按钮是25%宽度，以此类推。
等分按钮也常被称为是自适应分组按钮，其实现方法也很是的简单，只须要在按钮组“btn-group”上追加一个“btn-group-justified”类名，以下所示：
<div class="btn-wrap"> <div class="btn-group btn-group-justified"> <a class="btnbtn-default" href="#">首页</a> <a class="btnbtn-default" href="#">产品展现</a> <a class="btnbtn-default" href="#">案例分析</a> <a class="btnbtn-default" href="#">联系咱们</a> </div> </div>
运行效果以下：
实现原理很是简单，把“btn-group-justified”模拟成表格（display:table），并且把里面的按钮模拟成表格单元格（display:table-cell）。具体样式代码以下：
/*源码请查看bootstrap.css文件第3277行～第3291行*/
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
}
特别声明：在制做等分按钮组时，请尽可能使用<a>标签元素来制做按钮，由于使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。
按钮下拉菜单
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是同样的。不一样的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。
按钮下拉菜单其实就是普通的下拉菜单，只不过把“<a>”标签元素换成了“<button>”标签元素。惟一不一样的是外部容器“div.dropdown”换成了“div.btn-group”。以下所示：
<div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> </ul> </div>
实现样式代码以下：
/*查看bootstrap.css文件第3204行～第3223行*/
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-box-shadow: none;
box-shadow: none;
}
运行的效果以下：
按钮的向下向上三角形
按钮的向下三角形，咱们是经过在<button>标签中添加一个“<span>”标签元素，而且命名为“caret”:
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
这个三角形彻底是经过CSS代码来实现的：
/*源码请查看bootstrap.css文件第2994行～第3003行*/
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
另外在按钮中的三角形“caret”作了必定的样式处理：
/*源码查看bootstrap.css文件第3224行～第3233行*/
.btn .caret {
margin-left: 0;
}
.btn-lg .caret {
border-width: 5px 5px 0;
border-bottom-width: 0;
}
.dropup .btn-lg .caret {
border-width: 0 5px 5px;
}
有的时候咱们的下拉菜单会向上弹起（接下来一个小节会介绍），这个时候咱们的三角方向须要朝上显示，实现方法：须要在“.btn-group”类上追加“dropup”类名（这也是作向上弹起下拉菜单要用的类名）。
/*源码请查看bootstrap.css文件第3109行～第3114行*/
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px solid;
}
上面代码中能够看出，向上三角与向下三角的区别：其实就是改变了一个border-bottom的值。
下面是向上弹起菜单的例子：
<div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> </ul> </div>
运行效果以下：
向上弹起的下拉菜单
有些菜单是须要向上弹出的，好比说你的菜单在页面最底部，而这个菜单正好有一个下拉菜单，为了让用户有更好的体验，不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示，只须要在“btn-group”上添加这个类名（固然，若是是普通向上弹出下拉菜单，你只须要在“dropdown”类名基础上追加“dropup”类名便可）。
<div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> </ul> </div>
运行的效果以下：
/*源码请查阅bootstrap.css文件第3115行～第3120行*/
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
从上面的例子中能够看出，实现方法为：主要将“dropdown-menu”的top值变成了auto，而把bottom值换成了100%：
导航（基础样式）
导航对于一位前端人员来讲并不陌生。能够说导航是一个网站重要的元素组件之一，能够便于用户查找网站所提供的各项功能服务。导航的制做方法也是千奇百怪，五花八门。在这一节中将向你们介绍如何使用Bootstrap框架制做各式各样的导航。
在Bootstrap框架将导航独立出来成为一个导航组件，根据不一样的版本，能够找到对应的源码：
☑ LESS版本：对应的源文件是navs.less
☑ Sass版本：对应的源文件是_navs.scss
☑ 编译后版本：对应源码是bootstrap.css文件第3450行～第3641行
导航基础样式
Bootstrap框架中制做导航条主要经过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另一个样式才会有效，好比“nav-tabs”、“nav-pills”之类。好比右侧代码编辑器中就有一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式。
/*源码请查阅bootstrap.css文件第3450行~第3493行*/
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav> li {
position: relative;
display: block;
}
.nav> li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav> li >a:hover,
.nav> li >a:focus {
text-decoration: none;
background-color: #eee;
}
.nav>li.disabled> a {
color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
color: #999;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
background-color: #eee;
border-color: #428bca;
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nav> li > a >img {
max-width: none;
}
导航（标签形tab导航）
标签形导航，也称为选项卡导航。特别是在不少内容分块显示的时，使用这种选项卡来分组十分适合。
标签形导航是经过“nav-tabs”样式来实现。在制做标签形导航时须要在原导航“nav”上追加此类名，如：
<ul class="nav nav-tabs"> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
运行的效果以下所示：
实现原理很是的简单，将菜单项（li）按块显示，而且让他们在同一水平上排列，而后定义非高亮菜单的样式和鼠标悬浮效果。代码以下：
/*源码请查阅bootstrap.css文件第3494行～第3509行*/
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}
其实上例的效果和咱们平时看到的选项卡效果并不一致。通常状况之下，选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设咱们想让“Home”项为当前选中项，只须要在其标签上添加类名“class="active"”便可：
<ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> … </ul>
运行效果以下：
对应样式代码以下：
/*源码请查阅bootstrap.css文件第3510行～第3518行*/
.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
除了当前项以外，有的选项卡还带有禁用状态，实现这样的效果，只须要在标签项上添加“class="disabled"”便可：
<ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> … <li class="disabled"><a href="##">Responsive</a></li> </ul>
运行效果以下：
实现这个效果的样式，在默认样式“.nav”中就带有：
/*源码请查看bootstrap.css文件第3469行～第3478行*/
.nav>li.disabled> a {
color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
color: #999;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
导航（胶囊形(pills)导航）
胶囊形（pills）导航听起来有点别扭，由于其外形看起来有点像胶囊形状。但其更像咱们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”相似，一样的结构，只须要把类名“nav-tabs”换成“nav-pills”便可：
<ul class="nav nav-pills"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
实现效果样式代码：
/*源码请查阅bootstrap.css文件第3563行～第3577行*/
.nav-pills > li {
float: left;
}
.nav-pills > li > a {
border-radius: 4px;
}
.nav-pills > li + li {
margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
background-color: #428bca;
}
导航（垂直堆叠的导航）
在实际运用当中，除了水平导航以外，还有垂直导航，就相似前面介绍的垂直排列按钮同样。制做垂直堆叠导航只须要在“nav-pills”的基础上添加一个“nav-stacked”类名便可：
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
运行效果以下：
垂直堆叠导航与胶囊形导航相比，主要是让导航项不浮动，让其垂直排列，而后给相邻导航项留有必定的间距：
/*源码请查阅bootstrap.css文件第3578行～第3584行*/
.nav-stacked > li {
float: none;
}
.nav-stacked > li + li {
margin-top: 2px;
margin-left: 0;
}
你们是否还记得，在下拉菜单一节中，下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具备这样的效果，只须要添加在导航项之间添加“<li class=”nav-divider”></li>”便可：
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="nav-divider"></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
运行效果以下：
实现样式：
/*源码请查阅bootstrap.css文件第3485行～3490行*/
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
自适应导航（使用）
自适应导航指的是导航占据容器所有宽度，并且菜单项能够像表格的单元格同样自适应宽度。自适应导航和前面使用“btn-group-justified”制做的自适应按钮组是同样的。只不过在制做自适应导航时更换了另外一个类名“nav-justified”。固然他须要和“nav-tabs”或者“nav-pills”配合在一块儿使用。如：
<ul class="nav nav-tabs nav-justified"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
运行效果以下：(可单击全屏查看)
自适应导航（实现原理）
实现原理并不难，列表（<ul>）上设置宽度为“100%”，而后每一个菜单项(<li>)设置了“display:table-cell”，让列表项以模拟表格单元格的形式显示：
/*源码请查阅bootstrap.css文件第3585行～第3607行*/
.nav-justified {
width: 100%;
}
.nav-justified > li {
float: none;
}
.nav-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: 768px) {
.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
margin-bottom: 0;
}
}
这里有一个媒体查询条件：“@media (min-width:768px){…}”表示自适应导航仅在浏览器视窗宽度大于768px才能按上图风格显示。当你的浏览器视窗宽度小于768px的时候，将会按下图的风格展现：
注：在最右侧代码窗口中设置全屏能够切换效果。
从上图效果能够得知，“nav-tabs”和“nav-justified”配合在一块儿使用，也就是自适应选项卡导航，浏览器视窗宽度小于768px时，在样式上作了另外的处理。
/*源码请查阅bootstrap.css文件第3519行～第3562行*/
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nav-tabs.nav-justified > li {
float: none;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
.nav-tabs.nav-justified > li > a {
margin-right: 0;
border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
border: 1px solid #ddd;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li > a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
border-bottom-color: #fff;
}
}
导航加下拉菜单（二级导航）
前面介绍的都是使用Bootstrap框架制做一级导航，但不少时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制做二级导航就更容易了。只须要将li看成父容器，使用类名“dropdown”，同时在li中嵌套另外一个列表ul，使用前面介绍下拉菜单的方法就能够：
<ul class="nav nav-pills"> <li class="active"><a href="##">首页</a></li> <li class="dropdown"> <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> … </ul> </li> <li><a href="##">关于咱们</a></li> </ul>
运行效果以下：
经过浏览器调试工具，不难发现，点击有二级导航的菜单项，会自动添加“open”类名，再次点击就会删除添加的“open”类名：
简单点来讲，就是依靠这个类名来控制二级导航显示与否，而且设置了背景色和边框：
/*源码查看bootstrap.css文件第3479行～3484行*/
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
background-color: #eee;
border-color: #428bca;
}
你们回忆一下，在制做下拉菜单时，能够用分隔线，那么在二级导航中是否能够呢？咱们一块儿来看看：
不用再说太多，只须要添加“<li class=”nav-divider”></li>”这样的一个空标签就能够了。
运行效果以下：
/*源码请查看bootstrap.css文件第3485行～第3490行*/
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
面包屑式导航
面包屑(Breadcrumb)通常用于导航，主要是起的做用是告诉用户如今所处页面的位置（当前位置）。在Bootstrap框架中面包屑也是一个独立模块组件：
- LESS版本：对应源文件breadcrumbs.less
- Sass版本：对应源文件_breadcrumbs.scss
- 编译出来的版本：源码对应bootstrap.css文件第4112行～第4129行
使用方法：
使用方式就很简单，为ol加入breadcrumb类：
<ol class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">个人书</a></li> <li class="active">《图解CSS3》</li> </ol>
实现原理：
看来不错吧！做者是使用li+li:before实现li与li之间的分隔符，因此这种方案在IE低版本就惨了（不支持）。
/*源码查看bootstrap.css文件第4112行～第4129行*/
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb> li {
display: inline-block;
}
.breadcrumb> li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
.breadcrumb> .active {
color: #999;
}
- 1. bootstrap基本整理1
- 2. Bootstrap Table使用整理（一）
- 3. Bootstrap 整理代码风格
- 4. bootstrap基本整理3
- 5. Bootstrap Table使用整理（三）
- 6. Bootstrap Table使用整理（二）
- 7. bootstrap基本整理2
- 8. 【Bootstrap】1.初识Bootstrap
- 9. 关于BOOTSTRAP的整理和理解
- 10. Javascript整理1
- 更多相关文章...
- • 错误处理 - RUST 教程
- • PHP 完整表单实例 - PHP教程
- • Docker 清理命令
- • ☆技术问答集锦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。