独立或统一

Bootstrap 的 JavaScript 插件可以放在各自的单独的文件里（注意插件之间可能有依赖关系），或者它们在同一个文件里。bootstrap.js 和 bootstrap.min.js 都会包含所有的插件。

数据属性

你可以单纯的通过通过代码 API 来使用所有 Bootstrap 的插件， 不需要你写一行 JavaScript 的代码，这是 Boostrap 的首选类 API，而且也应该是你在使用插件时首先要考虑的。

即使如何，在某些情况下你可能需要关掉这个功能。因此我们可以让你关掉数据属性 API，你可以这样做：

$('body').off('.data-api')

或者，你也可以针对指定的插件，比如像这样：

$('body').off('.alert.data-api')

关掉了警示插件的数据属性 API。

编程 API

你可以通过 JavaScript API 使用所有的 Bootstrap 插件，所有公共 API 都是单一的，可链式的方法，并返回动作集。

$(".btn.danger").button("toggle").addClass("fat")

所有方法可以拥有一个可选的选项对象，一个针对特定方法的字符串，或者不使用（使用默认的行为）：

$("#myModal").modal()                       // 默认初始化
$("#myModal").modal({ keyboard: false })   // 无键盘初始化
$("#myModal").modal('show')                // 初始化并立即调用显示

每个插件同时会在 'Constructor' 属性 $.fn.popover.Constructor 公开它们原始构造函数。如果你想获取特定插件的实例，可以直接在从 $('[rel=popover]').data('popover') 检索。

无冲突

有时候 Bootstrap 需要与其它的界面架构一起使用。在这些情况下，偶尔会发生命名冲突。如果出现这样的错误，你可以在插件上调用 .noConflict 。

var bootstrapButton = $.fn.button.noConflict() // 返回 $.fn.button 到之前分配的值
$.fn.bootstrapBtn = bootstrapButton            // 给 $().bootstrapBtn bootstrap 功能

事件

Bootstrap 为大部分插件的特定动作都提供自定义事件。比如像 show 会触发开始的事件，像 shown 会触发开始完成以后的事件。

$('#myModal').on('show', function (e) {
    if (!data) return e.preventDefault() // stops modal from being shown
})

关于过渡效果

包含 bootstrap-transition.js 可以添加一个简单的过渡效果。如果你使用了编译后（或者最小化）的 bootstrap.js，就不用单独包含这个文件了，因为它已经包含在了 bootstrap.js 这个文件里。

使用案例

过渡效果的几个示例：

• 对话窗中的滑动或渐变
• 渐渐消失的选项卡
• 渐渐消失的警示信息
• 滚动的旋转木马

示例

对话框精简而灵活。

静态示例

页头，主体，带一些动作按钮的页脚，这里显示的就是一个对话框。

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>对话框标题</h3>
  </div>
  <div class="modal-body">
    <p>这里是主体内容…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">关闭</a>
    <a href="#" class="btn btn-primary">保存修改</a>
  </div>
</div>

实时预览

点击下面按钮会通过 JavaScript 切换显示对话框。从页面上方渐变向下显示弹出对话框。

<!-- 触发显示对话框的按钮 -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- 对话框 -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">对话框标题</h3>
  </div>
  <div class="modal-body">
    <p>对话框主体内容 ...…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
    <button class="btn btn-primary">保存修改</button>
  </div>
</div>

用法

通过数据属性

启动对话框并不需要写 JavaScript 代码。在控制器元素上设置一下 data-toggle="modal" ，比如像按钮，添加 data-target="#foo" 或 href="#foo" 来针对切换特定的对话框。

<button type="button" data-toggle="modal" data-target="#myModal">启动对话框</button>

通过 JavaScript

使用一行 JavaScript 去调用 myModal ID：

$('#myModal').modal(options)

选项

数据属性或 JavaScript 都可以传递选项。如果用数据属性的话，添加一个选项名称到 data- 后面，比如像 data-backdrop=""。

<a data-toggle="modal" href="remote.html" data-target="#modal">请点击</a>

方法

.modal(选项)

用对话框显示内容，也会支持一下可选的选项 object。

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

手工切换对话框。

$('#myModal').modal('toggle')

.modal('show')

手工打开对话框。

$('#myModal').modal('show')

.modal('hide')

手工隐藏对话框。

$('#myModal').modal('hide')

事件

Bootstrap 的对话框类里带了几个事件可以挂到对话框功能上。/p>

$('#myModal').on('hidden', function () {
  // 做点啥事 ...
})

示例

添加下拉菜单，比如导航栏，选项卡里的下拉菜单。

下拉菜单在导航栏里

下拉菜单在选项卡里

用法

通过数据属性

在链接或按钮上添加 data-toggle="dropdown" 可以切换显示下拉菜单。

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">触发下拉菜单</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

保持 URL 可用，使用 data-target 属性代替 href="#" 。

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    下拉菜单
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

通过 JavaScript

通过 JavaScript 调用下拉菜单：

$('.dropdown-toggle').dropdown()

选项

无

方法

$().dropdown('toggle')

A programmatic api for toggling menus for a given navbar or tabbed navigation.

在导航栏上的示例

ScrollSpy 插件根据滚动的位置会自动更新导航上的目标。滚动下面的内容，注意激活类的变化，另外下拉菜单子项目也同样适用。

用法

通过数据属性

添加 scrollspy 功能最简单的方法，就是在你想使用这个功能的元素上（一般来说是 body ）添加一个 data-spy="scroll" 还有 data-target=".navbar" 来选择要使用的导航。可以使用 .nav 组件。

<body data-spy="scroll" data-target=".navbar">...</body>

通过 JavaScript

通过 JavaScript 调用 scrollspy：

$('#navbar').scrollspy()

方法

.scrollspy('refresh')

当在页面中配合添加或移除元素时使用 scrollspy，你需要像这样来调用刷新方法：

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
});

选项

可以通过数据属性和 JavaScript 来传递选项。使用数据属性， 在 data- 后面加上选项的名称， 比如 data-offset=""。

事件

选项卡示例

快速，动态，带过滤效果，下拉菜单的选项卡功能，可以切换显示本地内容。

用法

通过 JavaScript 启用可切换选项卡 ( 每个选项卡可以独立被激活显示 )：

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

独立激活选项卡有很多种方法：

$('#myTab a[href="#profile"]').tab('show'); // 用名称选择选项卡
$('#myTab a:first').tab('show'); // 选择第一个选项卡
$('#myTab a:last').tab('show'); // 选择最后一个选项卡
$('#myTab li:eq(2) a').tab('show'); // 选择第三个选项卡 (0-indexed)

代码

启用选项卡功能不需要你写一行 JavaScript 代码，只需要添加 data-toggle="tab" 或者 data-toggle="pill" 到元素上就可以了。添加 nav 和 nav-tabs 类到选项卡 ul 上可以应用 Bootstrap 的选项卡样式。

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">首页</a></li>
  <li><a href="#profile" data-toggle="tab">档案</a></li>
  <li><a href="#messages" data-toggle="tab">信息</a></li>
  <li><a href="#settings" data-toggle="tab">设置</a></li>
</ul>

方法

$().tab

激活一个选项卡和内容容器，选项卡需要 data-target 或者 href 来定位页面中的内容。

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">首页</a></li>
  <li><a href="#profile">档案</a></li>
  <li><a href="#messages">信息</a></li>
  <li><a href="#settings">设置</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<script>
  $(function () {
    $('#myTab a:last').tab('show');
  })
</script>

事件

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // 激活的选项卡
  e.relatedTarget // 上一个选项卡
})

示例

受到 Jason Frame 写的著名 jQuery.tipsy 插件的启发。工具提示插件不见依赖图像，并使用 CSS3 动画，并且使用 data-attributes 存储本地标题。

考虑到性能的原因，你需要手工启用工具提示和 Popover。

鼠标悬停在下面的链接上，查看工具提示：

四个方向

在 input 组中的工具提示

在 input 组中使用工具提示和 popovers 的时候，你需要设置 container 选项来去掉一些副作用。

用法

Trigger the tooltip via JavaScript:

$('#example').tooltip(options)

选项

可以通过数据属性和 JavaScript 来传递选项。使用数据属性， 在 data- 后面加上选项的名称， 比如 data-animation=""。

代码

<a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>

方法

$().tooltip(options)

附加选项处理元素的工具提示

.tooltip('show')

显示元素的工具提示。

$('#element').tooltip('show')

.tooltip('hide')

隐藏元素的工具提示。

$('#element').tooltip('hide')

.tooltip('toggle')

切换元素的工具提示。

$('#element').tooltip('toggle')

.tooltip('destroy')

隐藏和破坏元素的工具提示

$('#element').tooltip('destroy')

示例

用一个简单的内容覆盖层为元素显示二级内容，在 iPad 上你能看到类似的效果。悬停在按钮上触发显示 popover。 需要包含 工具提示插件。

Popover 的静态展示

有四个对齐选项：top, right, bottom, left。

并没有作为 Popover 的代码，里面的内容都是由 JavaScript 还有带 data 属性的内容生成的。

演示

四个方向

用法

通过 JavaScript 启用 popover：

$('#example').popover(选项)

选项

可以通过数据属性和 JavaScript 来传递选项。使用数据属性， 在 data- 后面加上选项的名称， 比如 data-animation="".

代码

考虑到性能的原因，你需要手工启用工具提示和 Popover。

方法

$().popover(options)

为选择元素初始化 popover

.popover('show')

显示元素 popover 。

$('#element').popover('show')

.popover('hide')

隐藏元素 popover 。

$('#element').popover('hide')

.popover('toggle')

切换元素 popover 。

$('#element').popover('toggle')

.popover('destroy')

隐藏和破坏元素的 popover 。

$('#element').popover('destroy')

警示信息示例

使用这个插件可以为所有警示信息添加关闭的功能。

用法

通过 JavaScript 启用可关闭的警示信息：

$(".alert").alert()

代码

在关闭按钮上添加 data-dismiss="alert"，会自动添加关闭功能。

<a class="close" data-dismiss="alert" href="#">&times;</a>

方法

$().alert()

为警示信息添加关闭功能。在关闭的时候使用动画，可以添加 .fade 和 .in 类。

.alert('close')

关闭警示。

$(".alert").alert('close')

事件

Bootstrap 的警示类带了几个事件。

$('#my-alert').bind('closed', function () {
  // 这里可以做点事 ...
})

使用示例

做更多关于按钮的事。控制按钮状态或者创建按钮组。.

状态

添加 data-loading-text="加载中..." 可以在按钮中使用加载状态。

<button type="button" class="btn btn-primary" data-loading-text="加载中...">加载状态</button>

单一切换

添加 data-toggle="button" 在单一按钮上来回切换。

<button type="button" class="btn btn-primary" data-toggle="button">单一切换</button>

复选框

添加 data-toggle="buttons-checkbox" 可以在 btn-group 上使用复选框类型的切换。

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn btn-primary">左对齐</button>
  <button type="button" class="btn btn-primary">居中</button>
  <button type="button" class="btn btn-primary">右对齐</button>
</div>

单选按钮

添加 data-toggle="buttons-radio" 可以在 btn-group 上使用单选按钮类型的切换。

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn btn-primary">左对齐</button>
  <button type="button" class="btn btn-primary">居中</button>
  <button type="button" class="btn btn-primary">右对齐</button>
</div>

用法

通过 JavaScript 启用按钮：

$('.nav-tabs').button()

代码

查看下面的示例代码。

选项

无

方法

$().button('toggle')

切换推送状态，给激活的按钮特殊样式。

<button type="button" class="btn" data-toggle="button" >…</button>

$().button('loading')

设置按钮的状态为加载中，禁用按钮并使用加载文字替换按钮文字，加载文字可以使用 data-loading-text 这个数据属性定义。

<button type="button" class="btn" data-loading-text="加载中..." >...</button>

$().button('reset')

重置按钮状态 - 用原始按钮文字替换。

$().button(string)

重置按钮状态 - 使用任何定义的文字显示状态。

<button type="button" class="btn" data-complete-text="完成啦！" >...</button>
<script>
  $('.btn').button('complete')
</script>

关于

折叠显示内容。

* 需要用到过渡插件。

手风琴示例

Using the collapse plugin, we built a simple accordion style widget:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        可折叠组项目 #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        可折叠组项目 #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

你也可以不用使用手风琴代码，可以使用按钮切换。

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  可折叠
</button>

<div id="demo" class="collapse in"> … </div>

用法

通过数据属性

添加 data-toggle="collapse" 和 data-target 到元素上可以自动分配可折叠元素的控制。 data-target 属性可以接受 CSS 选择器来应用折叠。确定已经添加了 collapse 类到可折叠元素上。如果你想它默认是打开的，可以添加一个 in 类。

在可折叠控制上添加像手风琴样式的组合，你可以添加数据属性 data-parent="#selector"，具体用法可以参考上面的演示。

通过 JavaScript

手工启用的方法：

$(".collapse").collapse()

选项

可以通过数据属性和 JavaScript 来传递选项。使用数据属性， 在 data- 后面加上选项的名称， 比如 data-parent="" 。

方法

.collapse(options)

用折叠形式展示内容。授受一个可选选项 object。

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

切换可折叠元素的显示或隐藏。

.collapse('show')

显示可折叠元素。

.collapse('hide')

隐藏可折叠元素。

事件

Bootstrap 的折叠类有几个事件可以去挂函数。

$('#myCollapsible').on('hidden', function () {
  // 在这里加上你要做的事儿 ...
})

旋转木马示例

轮番显示内容。

第一个幻灯片

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

第二个幻灯片

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

第三个幻灯片

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- 旋转木马项目 -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- 旋转木马导航 -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

用法

通过数据属性

使用数据属性可以很容易控制旋转木马的位置。data-slide 可以是 prev 或者 next，它可以改变相对于当前位置的幻灯片的位置。使用 data-slide-to 可以传递索引给旋转木马，比如 data-slide-to="2" 会跳转到从 0 开始的数起的索引值的幻灯片。

通过 JavaScript

手工调用旋转木马。

$('.carousel').carousel()

选项

可以通过数据属性和 JavaScript 来传递选项。使用数据属性， 在 data- 后面加上选项的名称，比如 data-interval="" 。

方法

.carousel(options)

使用一个可选的选项 object 初始化旋转木马，开始转圈！

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

从左向右开始转。

.carousel('pause')

停止转圈.

.carousel(number)

转到特定的项目上(从 0 开始数 )。

.carousel('prev')

转到上一个项目。

.carousel('next')

转到下一个项目。

事件

Bootstrap 的旋转木马类里有几个事件可以用来挂函数。

预输入示例

文本框里的事先输入功能插件。

<input type="text" data-provide="typeahead">

设置 autocomplete="off" 来防止浏览器默认的自动完成显示在 Bootstrap 的事先输入之上。

用法

通过数据属性

Add data attributes to register an element with typeahead functionality as shown in the example above.

通过 JavaScript

手工调用事先输入：

$('.typeahead').typeahead()

选项

可以通过数据属性和 JavaScript 来传递选项。使用数据属性， 在 data- 后面加上选项的名称， 比如 data-source=""。

方法

.typeahead(options)

初始化 input 预输入。

示例

左边显示的这个子导航菜单就是一个附件（affix）插件。

用法

通过数据属性

在任何元素上添加附件功能，只需要添加一个 data-spy="affix" 到元素上。然后使用偏移来定义在什么时候切换固定元素的开或关。

<div data-spy="affix" data-offset-top="200">...</div>

通过 JavaScript

使用 JavaScript 调用 affix 插件：

$('#navbar').affix()

选项

可以通过数据属性和 JavaScript 来传递选项。使用数据属性， 在 data- 后面加上选项的名称， as in data-offset-top="200".