一、Bootstrap简介
Bootstrap来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
（1）基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
（2）CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
（3）组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
（4）JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
（5）定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
（6）Bootstrap中主要包含css、js和fonts。
注意：Bootstrap.css和Bootstrap.min.css版本的区别：Bootstrap.min.css是压缩版，就是把换行和空格都去除，从而减少文件大小，适合生产环境；Bootstrap.css是未压缩版，便于调试开发，适合开发环境，二者的内容都是一样的。
（一）HTML中href和src区别
（1）href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
（2） src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。
（3）src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。
二、Bootstrap CSS
（一）Bootstrap CSS 概览
1、Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。例如：<!DOCTYPE html>。
2、为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，<meta name="viewport" content="width=device-width, initial-scale=1.0">；
（1）device-width 可以确保它能正确呈现在不同设备上。
（2）initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
（3）在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。
3、响应式图像
（1） max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。
（2）把元素的 display 属性设置为 block，以块级元素显示。
4、Bootstrap 使用 Normalize 来建立跨浏览器的一致性。Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。
5、设置 display 为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。
（二）Bootstrap 网格系统
1、 网格系统（Grid System）的工作原理
（1）行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
（2）使用行来创建列的水平组。
（3）内容应该放置在列内，且唯有列可以是行的直接子元素。
（4）预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
（5）列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
（6）网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
注意：为适应设备的不同大小，Bootstrap分为4种，采用不同的类属性来区分标识。分别为超小设备手机（<768px）使用.col-xs-*类属性（extra small）；小型设备平板电脑（≥768px）使用.col-sm-*类属性（small）；中型设备台式电脑（≥992px）使用.col-md-*类属性（middle）；大型设备台式电脑（≥1200px）使用.col-lg-*类属性（large）。
注意：网格系统列数总和最大为12列，通过类属性来指定元素占几列。如果总和超过12列，会自动换行。
2、Bootstrap 响应式实用工具
Bootstrap 提供了一些辅助类，实现内容对设备的显示和隐藏。visible-sm和hidden-sm等，例如： <span class="hidden-sm">小型</span><span class="visible-sm">✔ 在小型设备上可见</span>；
3、实现对元素的移动：请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
4、Bootstrap允许列嵌套：添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。
注意：嵌套列添加的列不能超过12列。
5、列排序：按照一种顺序编写列，使用 .col-md-push-* 和 .col-md-pull-* 类属性来按照自己制定的顺序展示。
注意：push相当于推即相对于原位置向前推几列；pull相当于拉即相对于原位置往回拉几列。
（三）Bootstrap 排版
1、内联子标题样式：在元素两旁添加 <small>，或者添加 .small class。这样子您就能得到一个字号更小的颜色更浅的文本
2、引导主题副本：为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本。
3、Bootstrap 提供了一些用于强调或对齐文本的类，text-center、text-warning、text-danger、text-success；
4、缩写：HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。
5、引用（Blockquote）：可以在任意的 HTML 文本旁使用默认的 <blockquote>。其他选项包括，添加一个 <small> 标签来标识引用的来源，使用 class .pull-right 向右对齐引用。
6、Bootstrap 支持有序列表、无序列表和定义列表。
（1）有序列表：有序列表是指以数字或其他有序字符开头的列表。
（2）无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
（3）定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典。接着，<dd> 是 <dt> 的描述。.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。
（四）Bootstrap 代码
Bootstrap 允许您以两种方式显示代码：
1、 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
2、<pre>标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。
（五）Bootstrap 表格
1、表格类：
（1）.table:为任意 <table> 添加基本样式 (只有横向分隔线);
（2）.table-striped：在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)；
（3）.table-bordered：为所有表格的单元格添加边框；
（4）.table-hover：在 <tbody> 内的任一行启用鼠标悬停状态；
（5）.table-condensed：让表格更加紧凑；
2、用于表格的行或者单元格的类：
（1）.active：将悬停的颜色应用在行或者单元格上；
（2）.success：表示成功的操作；
（3）.info：表示信息变化的操作
（4）.danger：表示一个危险的操作;
（5）.warning:表示一个警告的操作；
注意：这些类的效果是表格呈现不同的背景颜色。
（六）Bootstrap 表单（form）
1、垂直或基本表单：
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。
（1）向父 <form> 元素添加 role="form"。
（2）把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
（3）向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
2、内联表单
内联表单所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。
（1）使用 class .sr-only，您可以隐藏内联表单的标签。
（2）默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
3、水平表单：
（1）向父 <form> 元素添加 class .form-horizontal。
（2）把标签和控件放在一个带有 class .form-group 的 <div> 中。
（3）向标签添加 class .control-label。
4、复选框（Checkbox）和单选框（Radio）：对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
5、选择框（Select）使用 multiple="multiple" 允许用户选择多个选项。
6、静态控件：需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。
7、禁止输入：想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
例如：<input type="text" placeholder="该输入框禁止输入..." disabled>
8、验证状态：Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
9、设置表单控件大小： 使用.input-lg 和 .col-lg-* 来设置表单的高度和宽度。
注意：input-lg是扩大输入框；input-sm是缩小输入框；col-lg-*几列来设置输入框的宽度。
10、表单帮助文本：为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block。例如：<span class="help-block">帮助文本内容</span>。
（七）Bootstrap 按钮
1、按钮基本样式：btn是基本样式；btn-default是默认标准样式。
2、按钮大小：btn-lg/sm/xs来设置按钮的大小。
3、按钮的状态：激活状态：active；禁用状态：disabled ，当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。
（八）Bootstrap 图片
Bootstrap 提供了三个可对图片应用简单样式的 class：
（1）.img-rounded：添加 border-radius:6px 来获得图片圆角。
（2）.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
（3）.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
（九）Bootstrap 辅助类
1、Bootstrap可设置文本颜色，其中，如果文本是个链接鼠标移动到文本上会变暗；
2、Bootstrap可设置背景颜色，其中，如果文本是个链接鼠标移动到文本上会变暗；
3、pull-left：元素浮动到左边；pull-right：元素浮动到右边；center-block：设置元素为 display:block 并居中显示；clearfix：清除浮动；sr-only：除了屏幕阅读器外，其他设备上隐藏元素；close：显示关闭按钮；caret：显示下拉式功能。
（十）Bootstrap 响应式实用工具
在Bootstrap3的响应式实用工具只适用于块和表切换。
利用visible-xs/sm/md/lg和hidden-xs/sm/md/lg实现在哪种大小的设备下实现显示和隐藏。
三、Bootstrap 布局组件
（一）字体图标(Glyphicons)
Bootstrap可免费使用Glyphicon字体图标，使用方法：<span class="glyphicon glyphicon-search"></span>；
（二）下拉菜单（Dropdowns）
1、如需使用下拉菜单，只需要在 div表class为dropdown内加上下拉菜单即可。例如：<div class="dropdown">；
2、下拉列表ul标签class为dropdown-menu表示下拉菜单；其中添加pull-right 来向右对齐下拉菜单。例如：<ul class="dropdown-menu" role="menu" >
3、选项中添加标题使用dropdown-header；例如：<li role="presentation" class="dropdown-header">下拉菜单标题</li>；
4、dropup：指定向上弹出的下拉菜单；例如： <div class="dropup">；
5、divider：下拉菜单中的分割线；例如：<li role="presentation" class="divider"></li>；
6、disabled：下拉菜单中的禁用项；例如：<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>；
（三）Bootstrap 按钮组
1、.btn-group：该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮，水平进行展示。例如：<div class="btn-group">；
2、按钮工具栏：该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。例如：<div class="btn-toolbar" role="toolbar">；
3、.btn-group-lg, .btn-group-sm, .btn-group-xs用于设置按钮组的大小。
4、.btn-group-vertical让一组按钮垂直堆叠显示，而不是水平堆叠显示。例如：<div class="btn-group-vertical">；
5、按钮组配合下拉菜单嵌套使用：在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。
6、Bootstrap 按钮下拉菜单：
（1）向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。
（2）分割的按钮下拉菜单：添加两个按钮标签即可。例如：<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>；
（四）Bootstrap 输入框组
1、向 .form-control 的input标签添加前缀或后缀元素的步骤如下：
（1）把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
（2）接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
（3）把该 <span> 放置在 <input> 元素的前面或者后面。
2、可以通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。
3、可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加 .input-group-addon class，您需要使用 class .input-group-btn 来包裹按钮。
（五）Bootstrap 导航元素
1、表格导航或标签：
（1）以一个带有 class .nav 的无序列表开始。
（2）添加 class .nav-tabs。例如：<ul class="nav nav-tabs">；
2、胶囊式的导航菜单：只需要使用 class .nav-pills 代替 .nav-tabs 即可，其他的步骤与上面相同。例如：<ul class="nav nav-pills">；
3、垂直的胶囊式导航菜单：可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。例如：<ul class="nav nav-pills nav-stacked">；
4、两端对齐的导航：通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。
5、禁用链接：对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态。
6、带有下拉菜单的标签：
（1）以一个带有 class .nav 的无序列表开始。
（2）添加 class .nav-tabs。
（3）添加带有 .dropdown-menu class 的无序列表。
注意：带有下拉菜单的胶囊步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills。
7、 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。
例如：<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">首页</a></li>
<li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>首页</h3>
<p>菜鸟教程 —— 学的不仅是技术，更是梦想！！！</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜单 1</h3>
<p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
</div>
</div>
（六）Bootstrap 导航栏（和导航元素区分开）
1、默认的导航栏：
（1）向 <nav> 标签添加 class .navbar、.navbar-default。
（2）向上面的元素添加 role="navigation"，有助于增加可访问性。
（3）向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
（4）为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
2、结合图标的导航链接：使用 class glyphicon glyphicon-* 来设置图标。
3、组件对齐方式：可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的组件。例如： <ul class="nav navbar-nav navbar-left">；
4、导航栏动态定位：
（1）固定到顶部：要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。例如：<nav class="navbar navbar-default navbar-fixed-top" role="navigation">；
（2）固定到底部：要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom。
（3）动态导航栏：能随着页面一起滚动的导航栏，请添加 .navbar-static-top class。
5、Bootstrap 面包屑导航（Breadcrumbs）：是一种基于网站层次信息的显示方式。
（1）Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。例如：<ul class="breadcrumb">；
注意：分隔符会通过 CSS（bootstrap.min.css）自动被添加：
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}
（七）Bootstrap 分页
分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。
1、.pagination添加该 class 来在页面上显示分页。例如：<ul class="pagination">；
2、.disabled, .active：通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。
3、.pagination-lg, .pagination-sm设置分页的大小。例如：<ul class="pagination pagination-lg">；
4、翻页（Pager）添加该 class 来获得翻页链接。例如：<ul class="pager">；
5、.previous, .next：使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐。
6、.disabled添加该 class 来设置对应按钮禁止使用。
（八）Bootstrap 标签
标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签。可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观。
例如：<span class="label label-default">默认标签</span>；
（九）Bootstrap 徽章（Badges）
徽章与标签相似，主要的区别在于徽章的边角更加圆滑。徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。
1、可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <span class="badge"> 来激活链接。例如：<span class="badge pull-right">42</span>首页</a>；
（十）Bootstrap 超大屏幕（Jumbotron）
超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。
1、为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class。
2、使用超大屏幕（Jumbotron）的步骤如下：
（1）创建一个带有 class .jumbotron. 的容器 <div>。
（2）除了更大的 <h1>，字体粗细 font-weight 被减为 200。
（十一）Bootstrap 页面标题（Page Header）
页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的 <div> 中。
例如：<div class="page-header">。
（十二）Bootstrap 缩略图
1、使用 Bootstrap 创建缩略图的步骤如下：
（1）在图像周围添加带有 class .thumbnail 的 <a> 标签。
（2）这会添加四个像素的内边距（padding）和一个灰色的边框。
（3）当鼠标悬停在图像上时，会动画显示出图像的轮廓。
（十三）Bootstrap 警告（Alerts）
警告（Alerts）向用户提供了一种定义消息样式的方式。
1、可取消的警告（Dismissal Alerts）
（1）通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
（2）同时向上面的 <div> class 添加可选的 .alert-dismissable。
2、警告（Alerts）中的链接：
（1）通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
（2）使用 .alert-link 实体类来快速提供带有匹配颜色的链接。
例如：<div class="alert alert-success">
<a href="#" class="alert-link">成功！很好地完成了提交。</a>
</div>
（十四）Bootstrap 进度条
1、默认的进度条：
（1）添加一个带有 class .progress 的 <div>。
（2）接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
（3）添加一个带有百分比表示的宽度的 style 属性，例如 style="width: 60%"; 表示进度条在 60% 的位置。
2、交替的进度条：
（1）添加一个带有 class .progress 的 <div>。
（2）接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
（3）添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
3、条纹的进度条：
（1）添加一个带有 class .progress 和 .progress-striped 的 <div>。
（2）接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
（3）添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
（十五）Bootstrap 多媒体对象（Media Object）
多媒体对象的样式可用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
1、添加多媒体对象：
（1）在 <div> 元素上添加 .media 类来创建一个多媒体对象。
（2）使用 .media-left 类让多媒体对象(图片)来实现左对齐，同样 .media-right 类实现了右对齐。
（3）文本内容放在 class="media-body" 的 div 中，图片左对齐则放在 class="media-body" 之前，图片右对齐则放在 class="media-body" 之后。
此外，你还可以使用 .media-heading 类来设置标题。
2、图像位置位于顶部、底部、居中对齐，通过对图像div添加media-top、media-middle、media-bottom来实现。例如： <div class="media-left media-bottom">；
3、允许内嵌多媒体对象。
（十六）Bootstrap 列表组
列表组件用于以列表形式呈现复杂的和自定义的内容。
1、创建过程：
（1）向元素 <ul> 添加 class .list-group。
（2）向 <li> 添加 class .list-group-item。
2、向列表组添加徽章：只需要在 <li> 元素中添加 <span class="badge"> 即可。
3、向列表组添加链接：需要使用 <a> 代替 <li> 元素。即使用链接标签，不适用无序列表了。
4、向列表组添加自定义内容:在链接的列表组添加任意的 HTML 内容。
例如：<a> html内容 </a>
（十七）Bootstrap 面板（Panels）
面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可。
1、添加面板标题两种方法：
（1）使用 .panel-heading class 可以很简单地向面板添加标题容器。
（2）使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。
2、面板脚注：只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。
3、带语境色彩的面板：使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板。例如：<div class="panel panel-success">；
4、带表格的面板：可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>，则组件会无中断地从面板头部移动到表格。
5、带列表组的面板：通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板，并在面板中添加列表组。
（十八）Bootstrap Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。
1、尺寸大小：可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。
三、Bootstrap 插件概念
Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况下被触发。
注意：引用 Bootstrap 插件时要查看 Bootstrap 当前支持的 jQuery 版本。
（一）data 属性
1、通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。
2、关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。例如：$(document).off('.data-api')；
注意：关闭指定插件只需要在 data-api 命名空间前加上该插件的名称作为命名空间即可，例如：$(document).off('.alert.data-api')。
（二）编程方式的 API
所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。
注意：所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为）。
（三）避免命名空间冲突
通过调用插件的 .noConflict 方法恢复其原始值。
例如：var bootstrapButton = $.fn.button.noConflict() ；
（四）事件
Bootstrap 为大多数插件的独特行为提供了自定义事件，一般有两种形式：
1、动词不定式：这会在事件开始时被触发。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。
2、过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。
四、Bootstrap 插件
（一）Bootstrap 过渡效果（Transition）插件
Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。
（二）Bootstrap 模态框（Modal）插件
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
1、使用方法：
（1）通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
（2）通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框，$('#identifier').modal(options)；
2、modal(options)方法的使用：
（1）modal('toggle')：手动切换模态框。
（2）modal('show')：手动打开模态框。
（3）modal('hide')：手动隐藏模态框。
3、模态框事件
（1）show.bs.modal：在调用 show 方法后触发。
$('#identifier').on('show.bs.modal', function () {
// 执行一些动作...
})
（2）shown.bs.modal：当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
（3）hide.bs.modal：当调用 hide 实例方法时触发。
（4）hidden.bs.modal：当模态框完全对用户隐藏时触发。
（三）Bootstrap 下拉菜单（Dropdown）插件
使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。
1、使用方法：
（1）通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单。
例如：<a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>；
注意：如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"。
（2）通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法：$('.dropdown-toggle').dropdown()；
2、dropdown()方法：实现显示或隐藏下拉菜单：$().dropdown('toggle')；
（四）Bootstrap 滚动监听（Scrollspy）插件
滚动监听（Scrollspy）插件是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。即到达指定的导航位置。
1、使用方法：
（1）通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
（2）通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：$('body').scrollspy({ target: '.navbar-example' })；
（五）Bootstrap 标签页（Tab）插件
通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
1、使用方法：
（1）通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。
（2）通过 JavaScript：您可以使用 Javascript 来启用标签页，如下：
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
2、淡入淡出效果：如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容。
3、.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。例如：$('#myTab li:eq(1) a').tab('show');
4、事件：
（1）show.bs.tab：该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
（2）shown.bs.tab：该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
（六）Bootstrap 提示工具（Tooltip）插件
当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。
1、使用方法：
（1）通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。
（2）通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：$('#identifier').tooltip(options)；
2、tooltip(options)方法：
（1）tooltip('toggle')切换显示/隐藏元素的提示工具。
（2）tooltip('show')显示元素的提示工具。
（3）tooltip('hide')隐藏元素的提示工具。
3、事件：
（1）show.bs.tooltip：当调用 show 实例方法时立即触发该事件。
（2）shown.bs.tooltip：当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。
（3）hide.bs.tooltip：当调用 hide 实例方法时立即触发该事件。
（4）hidden.bs.tooltip：当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。
（七）Bootstrap 弹出框（Popover）插件
弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。
1、使用方法：
（1）通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。
（2）通过 JavaScript：通过 JavaScript 启用弹出框（popover）：$('#identifier').popover(options)；
注意：弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：
$(function () { $("[data-toggle='popover']").popover(); });
2、popover(options)同提示工具类似。
3、事件同提示工具类似。
（八）Bootstrap 警告框（Alert）插件
警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。
1、使用方法：
（1）通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。
（2）通过 JavaScript：通过 JavaScript 添加可取消功能：$(".alert").alert()；
2、alert('close')方法：关闭所有的警告框。
3、alert()该方法让所有的警告框都带有关闭功能。
4、警告框事件：
（1）close.bs.alert：当调用 close 实例方法时立即触发该事件。
（2）closed.bs.alert：当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。
$('#myalert').bind('closed.bs.alert', function () {
// 执行一些动作...
})
（九）Bootstrap 按钮（Button）插件
通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。
1、加载状态：只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可。
2、按钮状态切换：只需向 button 元素添加 data-toggle="button" 作为其属性即可。
（十）Bootstrap 折叠（Collapse）插件
折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
1、创建方法：
（1）data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
（2）href 或 data-target 属性添加到父组件，它的值是子组件的 id。
（3）data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。
2、使用方法：
（1）通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。
为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。
（2）通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：
$('.collapse').collapse()；
3、collapse(options)方法和提示工具类似。
4、折叠事件和提示工具类似。
（十一）Bootstrap 轮播（Carousel）插件
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
1、使用方法：
（1）通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
a、属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
b、使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" c、将把滑块移动到一个特定的索引，索引从 0 开始计数。
data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
（2）通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：
$('.carousel').carousel()；
2、carousel(options)方法的使用:
（1）carousel('cycle')从左到右循环轮播项目。
（2）carousel('pause')停止轮播循环项目。
（3）carousel(number)循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。
（4）carousel('prev')循环轮播到上一个项目。
（5）carousel('next')循环轮播到下一个项目。
3、轮播事件：
（1）slide.bs.carousel：当调用 slide 实例方法（轮播）时立即触发该事件。
（2）slid.bs.carousel：当轮播完成幻灯片过渡效果时触发该事件。
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
（十二）Bootstrap 附加导航（Affix）插件
附加导航（Affix）插件允许指定 <div> 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。
1、使用方法：
（1）通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。
（2）通过 JavaScript：您可以通过 JavaScript 手动为某个元素添加附加导航（Affix），如下所示：
$('#myAffix').affix({
offset: {
top: 100, bottom: function () {
return (this.bottom =
$('.bs-footer').outerHeight(true))
}
}
})
五、Bootstrap 其他
（一）Bootstrap UI 编辑器
1、Bootply 是一款很棒的 Bootstrap UI 编辑工具，尽可能简单的让用户编辑 Bootstrap 友好的 CSS ，HTML 和 Javascript 。同时也是一个可拖拽的可视化编辑器，用来设计，创建原型和测试 Bootstrap 框架。Bootply 有个代码存储库，里面包括了 Bootstrap 代码片段，示例和模板。除了以上这些，更吸引人的是它有个非常活跃的 Bootply 社区，用户可以很方便的发现，分享和展示相关的代码和片段。
2、Lavish 是个帮助用户从一个图像中定制自己喜欢的 Bootstrap 配色方案。用户可以从图像中选择各种颜色用在 body 背景，链接，头部，菜单，标签，文本，下拉菜单等等元素上。一旦你确定了 Bootstrap 配色方案，就可以很方便的下载相应的 Boostrap.css 文件。
3、Style Bootstrap 是个非常棒的内置浏览器的 GUI 实用工具，帮助用户自定义 Twitter Bootstrap 外观。它非常容易进行自定义操作。从 body 风格，字体排版，按钮，导航，格式，通知提示和其他用户很容易根据自己的意愿自定义的元素。除了强大的自定义功能，它还可以很容易生成可下载的 CSS 文件。
4、Bootstrap Live Editor 是个所见即所得的构建 Bootstrap 的编辑器。在 Bootstrap 准备好的内容和代码片段的基础上提供一个又好又优雅的方法来编辑和美化 html，也因此它是个明智的选择。除此之外，它还包括高级的选项比如按钮配置，自定义标签和为用户做最明智最有益的选择。
（二）Bootstrap HTML编码规范
1、对于属性的定义，确保全部使用双引号，绝不要使用单引号。
2、不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
3、不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。
4、根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
5、避免使用JavaScript 生成的标签。
（三）Bootstrap CSS编码规范
1、避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
2、与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：
（1）使用多个 <link> 元素；
（2）通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
（3）通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能；
3、class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。
4、应当尽量限制使用简写形式的属性声明。
（四）Less 简介
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
扫一扫
1283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
