JavaScript 插件 & Bootstrap中文文档（v3.3.2）
单独引用 或 编译后（全部）引用
JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。
使用编译后的JavaScript
bootstrap.js 和 bootstrap.min.js文件都包含了所有插件，只需引入一次就可以了。
插件之间的依赖关系
一些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 ，看看支持哪些版本的jQuery。
你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，使用插件时这也是你的首先考虑的方式。
话又说回来，在某些情况下可能希望关闭此功能。因此，我们还提供了关闭 data 属性 API 的方法，即解除用data-api命名空间 绑定在文档上的事件。就像下面这样：
$(document).off('.data-api')
另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：
$(document).off('.alert.data-api')
通过 data 属性每个元素上只定义一个插件
在同一个元素上，不使用来自多个插件 data 属性。例如，一个按钮上不能同时 绑定 tooltip （愚人码头注：即data-toggle="tooltip" ）和 modal（模态）（愚人码头注：即data-toggle="modal"）。如果一定要做到这一点，那么使用包裹元素嵌套一层。
程序设计 API
我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。
$('.btn.danger').button('toggle').addClass('fat')
所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：
$('#myModal').modal()
// 以默认值初始化
$('#myModal').modal({ keyboard: false })
// 初始化 keyboard
$('#myModal').modal('show')
// 初始化后立即调用 show 方法
每个插件还通过 Constructor 属性暴露了其原始的构造函数：$.fn.popover.Constructor。如果你想获取某个插件的实例，可以直接通过页面元素获取：$('[rel="popover"]').data('popover')。
你可以通过修改插件的 Constructor.DEFAULTS 对象来改变某个插件的默认设置：
$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false
某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下，命名空间冲突随时可能发生。如果不幸发生了这种情况，你可以通过调用插件的 .noConflict 方法恢复其原始值。
var bootstrapButton = $.fn.button.noConflict() // 返回 $.fn.button 预先分配的值
$.fn.bootstrapBtn = bootstrapButton
// give $().bootstrapBtn the Bootstrap functionality
Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词（例如 shown ）表示在动作执行完毕之后被触发。
从 3.0.0 版本开始，所有 Bootstrap 事件的名称都采用命名空间方式。
所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予你在动作开始执行前将其停止的能力。
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
每一个Bootstrap的jQuery插件的版本可以通过插件的构造函数的VERSION属性来访问。
例如，对于工具提示插件可以这样写：
$.fn.tooltip.Constructor.VERSION // =& "3.3.2"
未对禁用 JavaScript 的浏览器提供补救措施
Bootstrap 插件未对禁用 JavaScript 的浏览器提供补救措施。如果你对这种情况下的用户体验很关心的话，请添加
标签向你的用户进行解释（并告诉他们如何启用 JavaScript），或者按照你自己的方式提供补救措施。
第三方工具库
Bootstrap 官方不提供对第三方 JavaScript 工具库的支持，例如 Prototype 或 jQuery UI。除了 .noConflict 和为事件名称添加命名空间，还可能会有兼容性方面的问题，这就需要你自己来处理了。
关于过渡效果
对于简单的过渡效果，只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译（或压缩）版的 bootstrap.js 文件，就无需再单独将其引入了。
包含的内容
Transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果。
模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。
不支持模态框重叠
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。
模态框的 HTML 代码放置的位置
务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。
对于移动设备的附加说明
这里提供了在移动设备上使用模态框有一些附加说明。请参考章节。
由于HTML5是定义的语义， autofocus HTML属性在Bootstrap 模态框中是没有效果的。为了达到同样的效果，可以使用一些自定义JavaScript：
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
以下模态框包含了模态框的头、体和一组放置于底部的按钮。
One fine body&
&div class="modal fade"&
&div class="modal-dialog"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-label="Close"&&span aria-hidden="true"&&&/span&&/button&
&h4 class="modal-title"&Modal title&/h4&
&div class="modal-body"&
&p&One fine body&&/p&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&Close&/button&
&button type="button" class="btn btn-primary"&Save changes&/button&
&/div&&!-- /.modal-content --&
&/div&&!-- /.modal-dialog --&
&/div&&!-- /.modal --&
点击下面的按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。
Text in a modal
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Popover in a modal
should trigger a popover on click.
Tooltips in a modal
should have tooltips on hover.
Overflowing text to show scroll behavior
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Launch demo modal
&!-- Button trigger modal --&
&button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&
Launch demo modal
&!-- Modal --&
&div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&
&div class="modal-dialog"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-label="Close"&&span aria-hidden="true"&&&/span&&/button&
&h4 class="modal-title" id="myModalLabel"&Modal title&/h4&
&div class="modal-body"&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&Close&/button&
&button type="button" class="btn btn-primary"&Save changes&/button&
增强模态框的可访问性
务必为 .modal 添加 role="dialog" 属性，aria-labelledby="myModalLabel" 属性用于只想模态框的标题栏，aria-hidden="true" 用于通知辅助性工具略过模态框的 DOM元素。
另外，你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息。
模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现。
Large modal
Small modal
&!-- Large modal --&
&button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg"&Large modal&/button&
&div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&
&div class="modal-dialog modal-lg"&
&div class="modal-content"&
&!-- Small modal --&
&button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm"&Small modal&/button&
&div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"&
&div class="modal-dialog modal-sm"&
&div class="modal-content"&
移除动画效果
如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。
&div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"&
不同模态框的内容，基于触发按钮
有一堆按钮，触发同样的模态框，只是内容略有不同？使用 event.relatedTarget和 （可能）来具体决定哪个按钮被点击的态框的内容。更多细节查看关于模态框的relatedTarget事件文档，
Open modal for @mdo
Open modal for @fat
Open modal for @twbootstrap
...more buttons...
Recipient:
&button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo"&Open modal for @mdo&/button&
&button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat"&Open modal for @fat&/button&
&button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap"&Open modal for @twbootstrap&/button&
...more buttons...
&div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&
&div class="modal-dialog"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-label="Close"&&span aria-hidden="true"&&&/span&&/button&
&h4 class="modal-title" id="exampleModalLabel"&New message&/h4&
&div class="modal-body"&
&div class="form-group"&
&label for="recipient-name" class="control-label"&Recipient:&/label&
&input type="text" class="form-control" id="recipient-name"&
&div class="form-group"&
&label for="message-text" class="control-label"&Message:&/label&
&textarea class="form-control" id="message-text"&&/textarea&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&Close&/button&
&button type="button" class="btn btn-primary"&Send message&/button&
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
通过 data 属性或 JavaScript 调用模态框插件，可以根据需要动态展示隐藏的内容。模态框弹出时还会为 &body& 元素添加 .modal-open 类，从而覆盖页面默认的滚动行为，并且还会自动生成一个 .modal-backdrop 元素用于提供一个可点击的区域，点击此区域就即可关闭模态框。
通过 data 属性
不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle="modal" 属性，或者 data-target="#foo" 属性，再或者 href="#foo" 属性，用于指向被控制的模态框。
&button type="button" data-toggle="modal" data-target="#myModal"&Launch modal&/button&
通过 JavaScript 调用
只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：
$('#myModal').modal(options)
可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性，需要将参数名称放到 data- 之后，例如 data-backdrop=""。
description
boolean 或者字符串 'static'
包含一个 modal-backdrop 元素。
另外，如果指定为static，那么点击 backdrop（愚人码头注：半透明的遮罩层） 时不会关闭模态框。
键盘上的 esc 键被按下时关闭模态框。
Shows the modal when initialized.
此选项，从V3.3.0开始不建议使用，将在V4版本中被删除。 我们建议使用客户端模板或数据绑定框架代替，或使用 。
如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。下面是一个实例：
&a data-toggle="modal" href="remote.html" data-target="#modal"&Click me&/a&
.modal(options)
将页面中的某块内容作为模态框激活。接受可选参数 object。
$('#myModal').modal({
keyboard: false
.modal('toggle')
手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中（也就是，在触发 shown.bs.modal 或 hidden.bs.modal 事件之前）。
$('#myModal').modal('toggle')
.modal('show')
手动打开模态框。在模态框显示之前返回到主调函数中 （也就是，在触发 shown.bs.modal 事件之前）。
$('#myModal').modal('show')
.modal('hide')
手动隐藏模态框。在模态框隐藏之前返回到主调函数中 （也就是，在触发 hidden.bs.modal 事件之前）。
$('#myModal').modal('hide')
Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。
show.bs.modal
show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
shown.bs.modal
此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal
hide 方法调用之后立即触发该事件。
hidden.bs.modal
此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal
从远端的数据源加载完数据之后触发该事件。
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
用这个简单的插件几乎可以在任何地方添加下拉菜单， 包括导航栏，tabs，和pills。
在navbar中
通过 data 属性或 JavaScript 定义下拉菜单，通过切换父级列表元素上的.open类来控制下拉插件显示或隐藏的内容（下拉菜单）。
在移动设备上，打开一个下拉菜单需要添加一个.dropdown-backdrop，当轻触（tap）菜单以外区域的时候，用来关闭下拉菜单，如果需要支持所有iOS版本，这是一个必要条件。这意味着，在移动设备上，从打开的下拉菜单切换到另一个下拉菜单需要额外轻触（tap）一次。
注意：在应用中data-toggle="dropdown"属性依赖于关闭的下拉菜单，所以总是使用它是一个好主意。
通过 data 属性定义
添加 data-toggle="dropdown" 到一个链接或按钮来定义下拉菜单。
&div class="dropdown"&
&button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&
Dropdown trigger
&span class="caret"&&/span&
&ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&
为了保证链接按钮完整的URL，
使用data-target属性来代替href="#"。
&div class="dropdown"&
&a id="dLabel" data-target="#" href="" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"&
Dropdown trigger
&span class="caret"&&/span&
&ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&
通过 JavaScript 定义
通过 JavaScript 调用下拉菜单:
$('.dropdown-toggle').dropdown()
$().dropdown('toggle')
切换给定的导航栏或tab标签导航下的下拉菜单。
所有下拉菜单事件被绑定在.dropdown-menu的父元素上。
所有下拉菜单事件都有一个relatedTarget 属性, 它的值是用来绑定锚元素。
show.bs.dropdown
当show（显示）实例方法被调用时，立即触发该事件。
shown.bs.dropdown
当下拉菜单已对用户可见时，立即触发该事件（等待CSS过渡完成）。
hide.bs.dropdown
当hide（隐藏）实例方法被调用时，立即触发该事件。
hidden.bs.dropdown
当下拉菜单完成隐藏时，立即触发该事件（等待CSS过渡完成）。
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
在导航栏中的例子
滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。滚动导航栏下面的区域，观察活动类的变化。下拉子项也将被高亮显示。
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
解析ID目标请求
导航栏的链接必须有解析的 id 目标。例如，&a href="#home"&home&/a&必须符合这样的DOM结构，比如&div id="home"&&/div&。
需要相对定位
不管实现方法怎样，scrollspy（滚动监听）需要在监听元素上使用position:。在大多数情况下加在&body&上。
通过 data 属性定义
轻松在你顶栏导航上添加scrollspy（滚动监听）行为，可以添加data-spy="scroll"到你想要监听的元素上（最典型的应该是&body&元素）。然后添加data-target属性，其值为任何Bootstrap .nav组件的父级元素的ID或class。
position: relative;
&body data-spy="scroll" data-target=".navbar-example"&
&div class="navbar-example"&
&ul class="nav nav-tabs" role="tablist"&
通过 JavaScript 定义
在CSS中添加position:后，通过 JavaScript调用scrollspy（滚动监听）:
$('body').scrollspy({ target: '.navbar-example' })
.scrollspy('refresh')
当scrollspy（滚动监听）和添加或删除DOM中元素结合使用时，你需要调用这个刷新的方法，就想这样：
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
选项可以通过data属性或JavaScript传递。
对于data属性，添加选项名称到data-上， 比如data-offset=""。
description
计算滚动位置的时候，从顶部抵消的像素数目。
activate.bs.scrollspy
当滚动监听插件将某个元素置为active时，此事件被触发。
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
Example tabs
通过添加tabs（选项卡）功能，可以让多个内容区域快速、动态切换。甚至下拉菜单也可以使用。
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
允许通过JavaScript 定义可切换tabs（选项卡）（每个标签需要单独激活）：
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
您可以用多种方式激活各个选项卡：
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
您无需写任何JavaScript代码就可以激活tabs（选项卡）或胶囊式导航，只需为页面元素简单的添加data-toggle="tab" 或 data-toggle="pill"就可以了。为ul添加.nav和.nav-tabs classe即可为其赋予Bootstrap；而添加nav和nav-pills class可以为其赋予。
&div role="tabpanel"&
&!-- Nav tabs --&
&ul class="nav nav-tabs" role="tablist"&
&li role="presentation" class="active"&&a href="#home" aria-controls="home" role="tab" data-toggle="tab"&Home&/a&&/li&
&li role="presentation"&&a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"&Profile&/a&&/li&
&li role="presentation"&&a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"&Messages&/a&&/li&
&li role="presentation"&&a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"&Settings&/a&&/li&
&!-- Tab panes --&
&div class="tab-content"&
&div role="tabpanel" class="tab-pane active" id="home"&...&/div&
&div role="tabpanel" class="tab-pane" id="profile"&...&/div&
&div role="tabpanel" class="tab-pane" id="messages"&...&/div&
&div role="tabpanel" class="tab-pane" id="settings"&...&/div&
为每个.tab-pane添加.fade可以让tabs（选项卡）具有淡入的特效。第一个tabs（选项卡）所对应的的内容区必须也添加.in使初始内容同时具有淡入效果。
&div class="tab-content"&
&div role="tabpanel" class="tab-pane fade in active" id="home"&...&/div&
&div role="tabpanel" class="tab-pane fade" id="profile"&...&/div&
&div role="tabpanel" class="tab-pane fade" id="messages"&...&/div&
&div role="tabpanel" class="tab-pane fade" id="settings"&...&/div&
激活tabs（选项卡）元素和内容容器。每个tabs（选项卡）都应该通过data-target 或 href来指定目标内容容器。
&ul class="nav nav-tabs" role="tablist" id="myTab"&
&li role="presentation" class="active"&&a href="#home" aria-controls="home" role="tab" data-toggle="tab"&Home&/a&&/li&
&li role="presentation"&&a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"&Profile&/a&&/li&
&li role="presentation"&&a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"&Messages&/a&&/li&
&li role="presentation"&&a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"&Settings&/a&&/li&
&div class="tab-content"&
&div role="tabpanel" class="tab-pane active" id="home"&...&/div&
&div role="tabpanel" class="tab-pane" id="profile"&...&/div&
&div role="tabpanel" class="tab-pane" id="messages"&...&/div&
&div role="tabpanel" class="tab-pane" id="settings"&...&/div&
$(function () {
$('#myTab a:last').tab('show')
当呈现一个新的tabs（选项卡）时，事件按以下顺序触发：
hide.bs.tab (在当前激活的tabs（选项卡）上触发)
show.bs.tab (在将要显示的tabs（选项卡）上触发)
hidden.bs.tab (在以前激活的tabs（选项卡）上触发，和触发hide.bs.tab 事件的是同一个tabs（选项卡）)
shown.bs.tab (在刚刚激活显示的tabs（选项卡）上触发，和触发show.bs.tab 事件的是同一个tabs（选项卡）)
如果没有tabs（选项卡）已经被激活，那么 hide.bs.tab 和hidden.bs.tab事件将不会被触发。
show.bs.tab
此事件在tabs（选项卡）显示时，但新tabs（选项卡）完全显示前触发，使用event.target 和 event.relatedTarget 分别指向激活的tabs（选项卡）和之前激活的tabs（选项卡）（如果可用）。
shown.bs.tab
此事件在一个tabs（选项卡）完全显示后触发， 使用event.target 和 event.relatedTarget 分别指向激活的tabs（选项卡）和之前激活的tabs（选项卡）（如果可用）。
hide.bs.tab
此事件在一个新的tabs（选项卡）将要完全显示（并且之前激活的tabs（选项卡）将要被隐藏）时触发。 使用event.target 和 event.relatedTarget 分别指向当前激活的tabs（选项卡）和即将要被激活的tabs（选项卡）。
hidden.bs.tab
此事件在一个新的tabs（选项卡）完全显示（并且之前激活的tabs（选项卡）已经被隐藏）后触发。 使用event.target 和 event.relatedTarget 分别指向之前激活的tabs（选项卡）和新激活的tabs（选项卡）。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
灵感来自Jason Frame开发的jQuery.tipsy插件， Tooltips（工具提示）是一个新的版本，它不依赖图片，使用CSS3来实现动画效果，并使用 data- 属性本地存储标题。
当Tooltips（工具提示）的title文本长度为0时将不会显示。
将鼠标悬停到下面的链接上就可以看到Tooltips（工具提示）了：
Tight pants next level keffiyeh
haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel
terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan , scenester farm-to-table banksy Austin
freegan cred raw denim single-origin coffee viral.
静态的工具提示
四个有效选项是： top, right, bottom, 和 left 对齐.
Tooltip on the left
Tooltip on the top
Tooltip on the bottom
Tooltip on the right
四个展示方位
Tooltip on left
Tooltip on top
Tooltip on bottom
Tooltip on right
&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left"&Tooltip on left&/button&
&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top"&Tooltip on top&/button&
&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"&Tooltip on bottom&/button&
&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right"&Tooltip on right&/button&
选择性加入的功能
出于性能方面的考虑，Tooltip（工具提示）和 Popovers（弹框提示）组件的data属性api是选择性加入的，也就是说 你必须自己初始化他们。
在页面上初始化所有Tooltip（工具提示）的方法之一是通过他们的data-toggle属性选择它们:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
Tooltip（工具提示）与按钮组和输入框组联合使用时需要一些特殊设置
在.btn-group 或 .input-group内的元素上使用Tooltip（工具提示）时，你需要指定container: 'body'选项以避免不需要的副作用（例如，当Tooltip（工具提示）显示之后，与其合作的页面元素可能变得更宽或是去圆角）。
不要试图在隐藏元素上显示Tooltip（工具提示）
当目标元素display:时调用$(...).tooltip('show')将导致Tooltip（工具提示）被错误定位。
Tooltip（工具提示）一经请求将自动生成内容和标记，并且触发元素后Tooltip（工具提示）会自动放置位置。
通过JavaScript触发Tooltip（工具提示）:
$('#example').tooltip(options)
一个Tooltip（工具提示）所需的标记仅仅是你希望有一个工具提示的HTML元素上有一个data属性和title。
工具提示生成的标记是相当简单的，虽然它确实需要的位置（默认情况下，插件设置为 top ）。
换行的链接
有时你想在换行的超链接上添加一个Tooltip（工具提示）。Tooltip（工具提示）插件默认是水平和垂直居中的。在你的链接上加入white-space:，以避免这种情况。
&!-- HTML to write --&
&a href="#" data-toggle="tooltip" title="Some tooltip text!"&Hover over me&/a&
&!-- 插件生成的标记 --&
&div class="tooltip top" role="tooltip"&
&div class="tooltip-arrow"&&/div&
&div class="tooltip-inner"&
Some tooltip text!
选项可以通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-animation=""。
在Tooltip（工具提示）上应用一个CSS淡出过渡效果
string | false
追加Tooltip（工具提示）到特定元素。例如：container: 'body'。此选项，允许你在触发元素附近的文档流中定位Tooltip（工具提示）， 这在窗口调整大小时防止Tooltip（工具提示）浮动而远离触发元素，这种情况下非常有用。
number | object
延迟显示和隐藏Tooltip（工具提示）(单位：ms) - 不适用于手动触发类型
如果提供一个数字时，隐藏/显示将都应用延迟
对象结构是: delay: { "show": 500, "hide": 100 }
插入到HTML到Tooltip（工具提示）。如果设置为false，jQuery的text方法将被用来插入内容到DOM。如果你担心XSS攻击请将此选项设置为false。
string | function
如何定位Tooltip（工具提示）——top | bottom | left | right | auto。当指定为“auto”时，它会动态地重新调整Tooltip（工具提示）位置。例如，如果placement选项设置为"auto left"，Tooltip（工具提示）将尽可能的显示在左侧，否则会显示在右侧。
如果placement选项为一个函数，那么Tooltip（工具提示）DOM节点将作为这个函数第一个参数，触发元素的DOM节点作为第二个参数。
当一个函数被用于确定Tooltip（工具提示）的位置时，它被称为与提示DOM节点作为第一个参数和触发因素DOM节点作为其第二。 this上下文指向Tooltip（工具提示）实例。
如果选择器被提供，Tooltip（工具提示）对象将被委托给指定的目标元素。在实践中，这主要作用是使动态插入的HTML内容中可以加入Tooltip（工具提示）。查看和。
愚人码头注，例如：
$('body').tooltips({
selector: '.has-popover'
'&div class="tooltip" role="tooltip"&&div class="tooltip-arrow"&&/div&&div class="tooltip-inner"&&/div&&/div&'
创建Tooltip（工具提示）时使用的基本HTML。
Tooltip（工具提示）的title将被注入到 .tooltip-inner中。
.tooltip-arrow 将成为Tooltip（工具提示）的箭头。
最外层的包裹元素应该有 .tooltip 样式类.
string | function
如果 title属性没有设置，该选项将设置默认的title值。
如果该选项给定的是一个函数，this引用指向绑定Tooltip（工具提示）的元素。
'hover focus'
如何触发Tooltip（工具提示） - click | hover | focus | manual。您可以传递多个触发方式，用空格分开。
string | object
{ selector: 'body', padding: 0 }
保持Tooltip（工具提示）在元素的边界内。例如: viewport: '#viewport' 或 { "selector": "#viewport", "padding": 0 }
$().tooltip(options)
绑定Tooltip（工具提示）到一个元素集合上
.tooltip('show')
显示一个元素的Tooltip（工具提示）。
Tooltip（工具提示）已经完全显示前，返回给调用者（即，shown.bs.tooltip事件触发之前）。这被认为是“手动”触发Tooltip（工具提示）。当Tooltips（工具提示）的title文本长度为0时将不会显示。
$('#element').tooltip('show')
.tooltip('hide')
隐藏一个元素的Tooltip（工具提示）。
Tooltip（工具提示）已经完全隐藏前，返回给调用者（即，hidden.bs.tooltip事件触发之前）。这被认为是“手动”触发Tooltip（工具提示）。
$('#element').tooltip('hide')
.tooltip('toggle')
切换（愚人码头注：显示/隐藏）一个元素的Tooltip（工具提示）。
Tooltip（工具提示）已经完全显示或隐藏前，返回给调用者（即，shown.bs.tooltip或hidden.bs.tooltip事件触发之前）。这被认为是“手动”触发Tooltip（工具提示）。
$('#element').tooltip('toggle')
.tooltip('destroy')
隐藏并且销毁一个元素的Tooltip（工具提示）。
$('#element').tooltip('destroy')
show.bs.tooltip
当show实例方法被调用时，这个事件将立即被触发。
shown.bs.tooltip
当Tooltip（工具提示）在用户界面上完全展示时（等待CSS过渡效果执行完之后）此事件将被触发。
hide.bs.tooltip
当 hide 实例方法被调用时，这个事件将立即被触发。
hidden.bs.tooltip
当Tooltip（工具提示）在用户界面上完全隐藏时（等待CSS过渡效果执行完之后）此事件将被触发。
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
像在iPad上哪些，添加弹框提示，可以为任何元素装载附加内容。
Popovers（弹框提示）的title（标题）和content（内容）的文本长度都为0时将不会显示。
插件的依赖
Popovers（弹框提示） 依赖 ，因此需要先加载Tooltip（工具提示）插件。
选择性加入的功能
出于性能方面的考虑，Tooltip（工具提示）和 Popovers（弹框提示）组件的data属性api是选择性加入的，也就是说 你必须自己初始化他们。
在页面上初始化所有Popovers（弹框提示）的方法之一是通过他们的data-toggle属性选择它们:
$(function () {
$('[data-toggle="popover"]').popover()
工具提示与按钮组和输入框组联合使用时需要一些特殊设置
在.btn-group 或 .input-group内的元素上使用Popovers（弹框提示）时，你需要指定container: 'body'选项以避免不需要的副作用（例如，当Popovers（弹框提示）显示之后，与其合作的页面元素可能变得更宽或是去圆角）。
不要试图在隐藏元素上显示Popovers（弹框提示）
当目标元素display:时调用$(...).tooltip('show')将导致Popovers（弹框提示）被错误定位。
静态的Popovers（弹框提示）
四个有效选项是： top, right, bottom, 和 left 对齐.
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Click to toggle popover
&button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?"&Click to toggle popover&/button&
四个展示方位
Popover on left
Popover on top
Popover on bottom
Popover on right
&button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."&
Popover on left
&button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."&
Popover on top
&button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."&
Popover on bottom
&button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."&
Popover on right
下次点击时解除绑定
在触发下次点击的元素上使用focus， 将解除绑定Popovers（弹框提示）。（愚人码头注：如果Popovers（弹框提示）已经显示，那么下次点击时自动解除绑定）
下次点击时解除绑定需要特定的标记
为了使Popovers（弹框提示）能在跨浏览器和跨平台中正常工作，
您必须使用&a&标签，而不是&button&标签，
而且你还必须包含属性。
&a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?"&Dismissible popover&/a&
通过 JavaScript 启用Popovers（弹框提示）:
$('#example').popover(options)
选项可以通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-animation=""。
在Popovers（弹框提示）上应用一个CSS淡出过渡效果
string | false
追加Popovers（弹框提示）到特定元素。例如：container: 'body'。此选项，允许你在触发元素附近的文档流中定位Popovers（弹框提示）， 这在窗口调整大小时防止Tooltip（工具提示）浮动而远离触发元素，这种情况下非常有用。
string | function
如果 data-content属性没有设置，该选项将设置默认的内容值。
如果该选项给定的是一个函数，this引用指向绑定Popovers（弹框提示）的元素。
number | object
延迟显示和隐藏Popovers（弹框提示）(单位：ms) - 不适用于手动触发类型
如果提供一个数字时，隐藏/显示将都应用延迟
对象结构是: delay: { "show": 500, "hide": 100 }
插入到HTML到Popovers（弹框提示）。如果设置为false，jQuery的text方法将被用来插入内容到DOM。如果你担心XSS攻击请将此选项设置为false。
string | function
如何定位Popovers（弹框提示）——top | bottom | left | right | auto。当指定为“auto”时，它会动态地重新调整Popovers（弹框提示）位置。例如，如果placement选项设置为"auto left"，Popovers（弹框提示）将尽可能的显示在左侧，否则会显示在右侧。
如果placement选项为一个函数，那么Popovers（弹框提示）DOM节点将作为这个函数第一个参数，触发元素的DOM节点作为第二个参数。
当一个函数被用于确定Popovers（弹框提示）的位置时，它被称为与提示DOM节点作为第一个参数和触发因素DOM节点作为其第二。 this上下文指向Popovers（弹框提示）实例。
如果选择器被提供，Popovers（弹框提示）对象将被委托给指定的目标元素。在实践中，这主要作用是使动态插入的HTML内容中可以加入Popovers（弹框提示）。查看和。
'&div class="popover" role="tooltip"&&div class="arrow"&&/div&&h3 class="popover-title"&&/h3&&div class="popover-content"&&/div&&/div&'
创建Popovers（弹框提示）时使用的基本HTML。
Popovers（弹框提示）的title将被注入到 .popover-title中。
Popovers（弹框提示）的 content 将被注入到
.popover-content中。
.arrow 将成为Popovers（弹框提示）的箭头。
最外层的包裹元素应该有 .popover 样式类.
string | function
如果 title属性没有设置，该选项将设置默认的title值。
如果该选项给定的是一个函数，this引用指向绑定Popovers（弹框提示）的元素。
如何触发Popovers（弹框提示） - click | hover | focus | manual。您可以传递多个触发方式，用空格分开。
string | object
{ selector: 'body', padding: 0 }
保持Popovers（弹框提示）在元素的边界内。例如: viewport: '#viewport' 或 { "selector": "#viewport", "padding": 0 }
$().popover(options)
绑定Popovers（弹框提示）到一个元素集合上
.popover('show')
显示一个元素的Popovers（弹框提示）。
Popovers（弹框提示）已经完全显示前，返回给调用者（即，shown.bs.popover事件触发之前）。这被认为是“手动”触发Popovers（弹框提示）。
当Popovers（弹框提示）的title和内容的文本长度为0时将不会显示。
$('#element').popover('show')
.popover('hide')
隐藏一个元素的Popovers（弹框提示）。
Popovers（弹框提示）已经完全隐藏前，返回给调用者（即，hidden.bs.popover事件触发之前）。这被认为是“手动”触发Popovers（弹框提示）。
$('#element').popover('hide')
.popover('toggle')
切换（愚人码头注：显示/隐藏）一个元素的Popovers（弹框提示）。
Popovers（弹框提示）已经完全显示或隐藏前，返回给调用者（即，shown.bs.popover或hidden.bs.popover事件触发之前）。这被认为是“手动”触发Popovers（弹框提示）。
$('#element').popover('toggle')
.popover('destroy')
隐藏并且销毁一个元素的Popovers（弹框提示）。
$('#element').popover('destroy')
show.bs.popover
当show实例方法被调用时，这个事件将立即被触发。
shown.bs.popover
当Popovers（弹框提示）在用户界面上完全展示时（等待CSS过渡效果执行完之后）此事件将被触发。
hide.bs.popover
当 hide 实例方法被调用时，这个事件将立即被触发。
hidden.bs.popover
当Popovers（弹框提示）在用户界面上完全隐藏时（等待CSS过渡效果执行完之后）此事件将被触发。
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
通过这个插件可以为所有警告框增加关闭功能。
当使用.close按钮时，.close按钮必须是.alert-dismissible的第一个子元素，并且没有文本内容在此标记之前。
Holy guacamole! Best check yo self, you're not looking too good.
Oh snap! You got an error!
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Take this action
Or do this
只需添加data-dismiss="alert"到你的关闭按钮上，alert（警告）插件就自动拥有了关闭功能。关闭alert（警告）将从DOM中删除。
&button type="button" class="close" data-dismiss="alert" aria-label="Close"&
&span aria-hidden="true"&&&/span&
为了使您的alert（警告）在关闭时使用动画，请确保他们已经应用了.fade and .in 类。
$().alert()
使一个alert（警告）监听有data-dismiss="alert"属性的后代元素的点击事件。（使用data- API自动初始化时，不是必需的。）
$().alert('close')
关闭并从DOM移除一个alert（警告）。如果alert（警告）元素存在.fade 和 .in样式类，alert（警告）将在被删除之前先做淡出动画效果。
Bootstrap 的alert（警告）插件暴露了少许事件。
close.bs.alert
当close实例方法被调用时，此事件将立即被触发。
closed.bs.alert
当alert（警告）完全关闭时（等待CSS过渡效果执行完之后），此事件将被触发。
$('#myAlert').on('closed.bs.alert', function () {
// do something…
按钮可以完成很多工作。控制按钮状态或创建按钮组可以产生类似工具条之类的复杂组件。
跨浏览器兼容性
。可以通过添加autocomplete="off"来解决提到的问题。查看。
通过添加data-loading-text="正在加载..."可以使按钮呈现加载状态。
Loading state
&button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"&
Loading state
$('#myButton').on('click', function () {
var $btn = $(this).button('loading')
// business logic...
$btn.button('reset')
通过添加data-toggle="button"可以切换按钮的状态。
Pre-toggled（预切换）按钮 .active 和 aria-pressed="true"
对于 Pre-toggled（预切换）按钮，你必须在button上手动添加.active样式类和aria-pressed="true"属性。
Single toggle
&button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"&
Single toggle
多选/单选 Checkbox / Radio
通过向.btn-group （按钮组）添加data-toggle="buttons"，可以使按钮组具有类似多选/单选框的选择/取消选择功能。
预先选择的项需要.active
预先选择的项，你必须在input的 label上手动添加.active样式类。
点击只更新视觉选中状态的情况
如果一个按钮没有触发click事件，而复选框按钮的选中状态更新了（例如，通过 &input type="reset"&或通过设置 input元素的checked 属性），那么你需要input的 label上手动切换 .active样式类。
Checkbox 1 (pre-checked)
Checkbox 2
Checkbox 3
&div class="btn-group" data-toggle="buttons"&
&label class="btn btn-primary active"&
&input type="checkbox" autocomplete="off" checked& Checkbox 1 (pre-checked)
&label class="btn btn-primary"&
&input type="checkbox" autocomplete="off"& Checkbox 2
&label class="btn btn-primary"&
&input type="checkbox" autocomplete="off"& Checkbox 3
Radio 1 (preselected)
&div class="btn-group" data-toggle="buttons"&
&label class="btn btn-primary active"&
&input type="radio" name="options" id="option1" autocomplete="off" checked& Radio 1 (preselected)
&label class="btn btn-primary"&
&input type="radio" name="options" id="option2" autocomplete="off"& Radio 2
&label class="btn btn-primary"&
&input type="radio" name="options" id="option3" autocomplete="off"& Radio 3
$().button('toggle')
切换按钮状态。赋予按钮被激活时的状态和外观。
$().button('reset')
重置按钮状态 - 并将按钮上的文本还原为原始值。
$().button(string)
将按钮上的文本重置为传入的值。
&button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off"&
$('#myStateButton').on('click', function () {
$(this).button('complete') // button text will be "finished!"
这个插件利用少数几个样式类来方便灵活的切换行为。
折叠插件依赖。
点击下面的按钮，通过样式类的改变来显示和隐藏的另一个元素：
.collapse 隐藏内容
.collapsing 是在过渡过程中应用
.collapse.in 显示内容
您可以使用带有href属性的链接，或带有 data-target属性的按钮。在这两种情况下，data-toggle="collapse"都是必需的。
愚人码头注：这里的href和data-target指向要切换显示隐藏的元素
Button with data-target
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
&a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"&
Link with href
&button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"&
Button with data-target
&div class="collapse" id="collapseExample"&
&div class="well"&
手风琴效果例子
使用折叠插件，通过扩展panel组件从而构建了一个简单的accordion组件。
和panel（面板）组件结合，扩展Collapse（折叠收缩）插件的默认行为来创建一个手风琴效果。
&div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"&
&div class="panel panel-default"&
&div class="panel-heading" role="tab" id="headingOne"&
&h4 class="panel-title"&
&a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&
Collapsible Group Item #1
&div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"&
&div class="panel-body"&
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
&div class="panel panel-default"&
&div class="panel-heading" role="tab" id="headingTwo"&
&h4 class="panel-title"&
&a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&
Collapsible Group Item #2
&div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"&
&div class="panel-body"&
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
&div class="panel panel-default"&
&div class="panel-heading" role="tab" id="headingThree"&
&h4 class="panel-title"&
&a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&
Collapsible Group Item #3
&div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"&
&div class="panel-body"&
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
这个也可以用来切换带有.list-group的.panel-body。
展开/折叠可用性控制
务必在控制元素上添加 aria-expanded 。
此属性在屏幕阅读器和类似的辅助技术中明确定义了可折叠元素的当前状态。
如果可折叠元素是默认关闭的，那么控制元素上的aria-expanded属性值应该是false，即 aria-expanded="false"。
如果您已设置了可折叠元素 in样式类 来使其默认打开，那么应该在控制元素上设置aria-expanded="true" 。
该插件会根据可折叠元素是否已被打开或关闭来自动切换该属性。
此外，如果你的控制元素控制一个单一的可折叠元素——例如data-target属性指向一个 id 选择器 —— 你可以在控制元素上添加一个额外的aria-controls 属性，包含可折叠元素的id。现代的屏幕阅读器和类似辅助技术可以利用这个属性，为用户提供了额外的快捷键可以直接导航到可折叠元素本身。
Collapse（折叠收缩）插件使用少数几个样式类来处理繁重的任务：
.collapse 隐藏内容
.collapse.in 显示内容
.collapsing 过渡开始时候被添加到可折叠元素，过渡完成后将被移除
这些样式可以在component-animations.less中找到。
通过data属性
只要在元素上添加data-toggle="collapse" 和data-target自动为可折叠元素分配一个控制元素。data-target属性接受一个CSS选择器作为其控制元素。请确保为可折叠元素上添加collapse 样式类。如果你希望可折叠页面元素的默认状态是展开的，请添加in 样式类。
要为一组手风琴效果的元素添加可折叠的控制元素，添加data-parent="#selector"即可。请参考下面给出的案例。
通过JavaScript调用
Enable manually with:
$('.collapse').collapse()
选项将通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-parent=""。
如果该选项提供一个选择器，那么当这个可折叠项显示时，指定的parent（父级）元素下所有可折叠元素将被关闭。（类似传统手风琴的效果 - 这依赖于panel（面板）类）
在调用时切换可折叠元素
.collapse(options)
激活你的内容作为一个可折叠元素。接受可选的选项object。
$('#myCollapsible').collapse({
toggle: false
.collapse('toggle')
切换一个可折叠元素展示或隐藏。
.collapse('show')
显示一个可折叠元素。
.collapse('hide')
隐藏一个可折叠元素
Bootstrap中的Collapse（折叠收缩）插件对外暴露了一些可以监听的事件。
show.bs.collapse
当show实例方法被调用时，立即触发此事件。
shown.bs.collapse
当可折叠页面元素完全展现到用户界面之后（等待CSS过渡效果执行完之后），此事件被触发。
hide.bs.collapse
当hide实例方法被调用时，此事件被立即触发。
hidden.bs.collapse
当可折叠页面元素在用户界面上完全隐藏之后（等待CSS过渡效果执行完之后），此事件被触发。
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
一组幻灯片，通过元素循环，就像一个旋转木马。
不支持多层嵌套的旋转木马。
&div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&
&!-- Indicators --&
&ol class="carousel-indicators"&
&li data-target="#carousel-example-generic" data-slide-to="0" class="active"&&/li&
&li data-target="#carousel-example-generic" data-slide-to="1"&&/li&
&li data-target="#carousel-example-generic" data-slide-to="2"&&/li&
&!-- Wrapper for slides --&
&div class="carousel-inner" role="listbox"&
&div class="item active"&
&img src="..." alt="..."&
&div class="carousel-caption"&
&div class="item"&
&img src="..." alt="..."&
&div class="carousel-caption"&
&!-- Controls --&
&a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&
&span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&&/span&
&span class="sr-only"&Previous&/span&
&a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&
&span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&&/span&
&span class="sr-only"&Next&/span&
可访问性问题
carousel（旋转木马）组件，一般不符合无障碍标准。如果您需要兼容，请考虑其他的选择来显示您的内容。
在Internet Explorer8 & 9中不支持过渡动画
Bootstrap只使用了CSS3使其做动画效果，不过IE8 & 9不支持这些必要的CSS属性。因此，在使用这些浏览器时，幻灯片没有过渡动画效果。我们故意决定不使用基于jQuery实现的过渡功能。
必须初始化激活元素
.active类需要被添加到其中一个幻灯片中。否则，carousel（旋转木马）将不可见。
在任何.item中均可以通过添加.carousel-caption元素从而为每帧幻灯片添加说明文字。也可以添加任何HTML代码，这些HTML代码将会被自动排列和格式化。
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
&div class="item"&
&img src="..." alt="..."&
&div class="carousel-caption"&
&h3&...&/h3&
&p&...&/p&
多个 carousel（旋转木马）
carousel（旋转木马）需要对最外层的容器（所述.carousel）使用一个id，用来控制 carousel（旋转木马）正常工作。当添加多个carousel（旋转木马）时，或改变carousel（旋转木马）的id时，一定要更新相关的控制。
通过data属性定义
通过data属性可以很容易的控制轮播的定位。data-slide可以接受控制播放位置的prev或next关键字。另外，还可以使用data-slide-to传递初始幻灯片的索引，例如data-slide-to="2"，使其初始化是滑动到一个特定的索引位置，从0开始计数。
data-ride="carousel"属性用来标记在页面加载之后即开始启动的轮播组件。它不能和显式的JavaScript组合使用，初始化相同的旋转木马。
（多余的和不必要的）
通过JavaScript调用
Call carousel manually with:
$('.carousel').carousel()
选项可以通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-interval=""。
幻灯片轮换的等待时间。如果为false，轮播将不会自动开始循环。
鼠标停留在幻灯片区域即暂停轮播，鼠标离开即启动轮播。
轮播是否持续循环。
.carousel(options)
初始化carousel（旋转木马），接受一个可选的object类型的选项，并开始轮换幻灯片。
$('.carousel').carousel({
interval: 2000
.carousel('cycle')
从左到右轮换幻灯片。
.carousel('pause')
停止轮换幻灯片。
.carousel(number)
将轮播定位到指定的帧上（愚人码头注：索引值）（以0开始计数，类似数组）。
.carousel('prev')
轮换到上一个幻灯片。
.carousel('next')
轮换到下一个幻灯片。
Bootstrap的轮播组件暴露了两个事件用于监听。
这两个事件具有以下附加属性：
direction: 轮换的方向 ( "left" 或 "right")。
relatedTarget: 正在滑入到场景的幻灯片的DOM元素。（愚人码头注：区分正在滑出的幻灯片）
slide.bs.carousel
当slide 实例方法被调用时，立即触发该事件。
slid.bs.carousel
当幻灯片轮换完成后（愚人码头注：等待CSS过渡效果执行完之后），触发该事件
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
本页面右侧的导航就是affix插件的完整实例。
通过data属性或用JavaScript手动调用affix插件。
在这两种情况下，你必须为你的affix内容提供定位和宽度的CSS。
通过CSS定位
affix插件切换三个样式类，
每个类代表一个特定的状态： .affix, .affix-top, 和 .affix-bottom
您必须自己为这些类提供样式
（这个插件独立）
来处理的实际位置。
下面是affix插件的工作原理：
启动时，该插件添加.affix-top 到指示元素最上面的位置。这时没有任何定位CSS是必需的。
滚动条位置超过你想使用affix插件的元素的位置时。
这时 .affix 取代 .affix-top，并且设置position:
（Bootstrap提供的CSS）。
如果一个底部偏移被定义，滚动条位置超过你想使用affix插件的元素的底部位置时，应该用.affix-bottom代替.affix。由于偏移量是可选的，需要时设置相应的CSS。在这种情况下，必要的时候可以添加 position:。该插件使用的data属性或JavaScript选项来确定从元素的什么位置。
按照上述步骤为下面的任一用法选项设置CSS。
通过data属性
只需为需要监听的页面元素添加data-spy="affix"即可方便的添加affix行为。使用偏移来定义当切换元件pin的展开和关闭。
&div data-spy="affix" data-offset-top="60" data-offset-bottom="200"&
通过JavaScript
通过JavaScript调用affix插件：
$('#myAffix').affix({
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
选项可以通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-offset-top="200"。
number | function | object
从屏幕上滚动条计算位置计算的偏移像素数。
如果提供一个单纯的数字，
偏移将在顶部和底部方向上都会被应用。
可以提供一哥独特的对象offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }分别表示顶部和底部的偏移。
当你需要动态计算偏移时可以使用一个函数。
selector | node | jQuery element
the window object
指定affix的目标元素。
Bootstrap中的affix插件对外暴露了一些可以监听的事件。
affix.bs.affix
在元素被affix之前，此事件被触发。
affixed.bs.affix
在元素被affix之后，此事件被触发。
affix-top.bs.affix
在元素被affixed-top之前，此事件被触发。
affixed-top.bs.affix
在元素被affixed-top之后，此事件被触发。
affix-bottom.bs.affix
在元素被affixed-bottom之前，此事件被触发。
affixed-bottom.bs.affix
在元素被affixed-bottom之后，此事件被触发。