单独或编译

插件可以单独包含（尽管有些具有必需的依赖项），也可以一次全部包含。bootstrap.js和bootstrap.min.js都在一个文件中包含所有插件。

数据属性

您可以完全通过标记 API 使用所有 Bootstrap 插件，而无需编写任何 JavaScript 代码。这是 Bootstrap 的第一类 API，在使用插件时应该是您的首要考虑因素。

也就是说，在某些情况下，可能需要关闭此功能。因此，我们还提供了禁用数据属性 API 的能力，方法是取消绑定以“data-api”命名的 body 上的所有事件。这看起来像这样：

$ （“身体” ）。关闭（'.data-api' ）

或者，要针对特定​​插件，只需将插件的名称作为命名空间与 data-api 命名空间一起包含，如下所示：

$ （“身体” ）。关闭（'.alert.data-api' ）

程序化 API

我们也相信您应该能够纯粹通过 JavaScript API 使用所有 Bootstrap 插件。所有公共 API 都是单一的、可链接的方法，并返回所操作的集合。

$ （“.btn.danger” ）。按钮（“切换” ）。addClass （“胖” ）

所有方法都应该接受一个可选的选项对象，一个针对特定方法的字符串，或者什么都没有（它启动一个具有默认行为的插件）：

$ （“#myModal” ）。modal () // 用默认值初始化                       
$ （“#myModal” ）。modal ({ keyboard : false }) // 没有键盘初始化     
$ （“#myModal” ）。modal ( 'show' ) // 立即初始化并调用 show                

每个插件还在 `Constructor` 属性上公开其原始构造函数$.fn.popover.Constructor：如果您想获取特定的插件实例，请直接从元素中检索它：$('[rel=popover]').data('popover')。

活动

Bootstrap 为大多数插件的独特操作提供自定义事件。通常，这些以不定式和过去分词形式出现 - 其中不定式（例如show）在事件开始时触发，其过去分词形式（例如shown）在动作完成时触发。

所有不定式事件都提供 preventDefault 功能。这提供了在动作开始之前停止执行的能力。

$ （'#myModal' ）。上（'显示' ，功能（e ）{   
    如果（！数据）返回e 。preventDefault () // 停止显示模态   
})

关于过渡

对于简单的过渡效果，将 bootstrap-transition.js 与其他 JS 文件一起包含一次。如果您使用的是已编译（或缩小）的 bootstrap.js，则无需包含它——它已经存在。

用例

过渡插件的几个例子：

• 在模态中滑动或淡出
• 淡出标签
• 淡出警报
• 滑动轮播窗格

例子

模态是精简但灵活的对话框提示，具有最低要求的功能和智能默认值。

静态示例

在页脚中带有页眉、正文和一组操作的渲染模式。

<div class = "模态隐藏淡入淡出" > 
  <div类= “模态标题” > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </按钮>    
    <h3>模态标题</h3>
  </div>
  <div类= “模态体” > 
    <p>一个很好的身体...... </p>
  </div>
  <div类= “模态页脚” > 
    <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" >启动演示模态</a>    
 
<!-- 模态 -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria- labelledby = "myModalLabel" aria-hidden = "true" >      
  <div类= “模态标题” > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" >模态标题</h3> 
  </div>
  <div类= “模态体” > 
    <p>一个很好的身体...... </p>
  </div>
  <div类= “模态页脚” > 
    <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

myModal使用单行 JavaScript调用带有 id 的模式：

$ （'#myModal' ）。模态（选项）

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 中data-，如data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

方法

.modal（选项）

将您的内容激活为模式。接受一个可选选项object。

$ （'#myModal' ）。模态（{
  键盘：假 
})

.modal('切换')

手动切换模式。

$ （'#myModal' ）。模态（'切换' ）

.modal('显示')

手动打开一个模态。

$ （'#myModal' ）。模态（“显示” ）

.modal('隐藏')

手动隐藏模态。

$ （'#myModal' ）。模态（“隐藏” ）

活动

Bootstrap 的模态类公开了一些用于连接模态功能的事件。

$ （'#myModal' ）。on ( '隐藏' , function () {   
  // 做一点事…
})

例子

使用这个简单的插件几乎可以将下拉菜单添加到任何东西，包括导航栏、选项卡和药丸。

在导航栏中

在选项卡内

用法

通过数据属性

添加data-toggle="dropdown"到链接或按钮以切换下拉菜单。

<div类= “下拉” > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown 触发器</a>   
  <ul类= “下拉菜单”角色= “菜单” aria- labelledby = “dLabel” >   
    ...
  </ul>
</div>

要保持 URL 完整，请使用data-target属性而不是href="#".

<div类= “下拉” > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    落下
    <b类= "插入符号" ></b> 
  </a>
  <ul类= “下拉菜单”角色= “菜单” aria- labelledby = “dLabel” >   
    ...
  </ul>
</div>

通过 JavaScript

通过 JavaScript 调用下拉菜单：

$ （'.dropdown-toggle' ）。下拉（）

选项

没有任何

方法

$().dropdown('切换')

用于切换给定导航栏或选项卡式导航的菜单的编程 api。

导航栏中的示例

ScrollSpy 插件用于根据滚动位置自动更新导航目标。滚动导航栏下方的区域并观察活动类的变化。下拉子项目也将突出显示。

用法

通过数据属性

要轻松地将 scrollspy 行为添加到您的顶栏导航，只需添加data-spy="scroll"到您要监视的元素（通常是正文）并data-target=".navbar"选择要使用的导航。您需要将 scrollspy 与.nav组件一起使用。

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

通过 JavaScript

通过 JavaScript 调用 scrollspy：

$ （'#navbar' ）。卷轴间谍()

方法

.scrollspy('刷新')

当使用 scrollspy 和从 DOM 中添加或删除元素时，你需要像这样调用 refresh 方法：

$ ( '[data-spy="scroll"]' )。每个（函数（）{  
  var $spy = $ (这个)。scrollspy ( '刷新' )
});

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 中data-，如data-offset="".

活动

示例选项卡

添加快速、动态的选项卡功能以通过本地内容窗格进行转换，甚至通过下拉菜单。

用法

通过 JavaScript 启用可选项卡（每个选项卡需要单独激活）：

$ （'#myTab a' ）。点击（功能（e ）{  
  e . 防止默认（）；
  $ （这个）。选项卡（“显示” ）；
})

您可以通过多种方式激活单个选项卡：

$ ( '#myTab a[href="#profile"]' )。选项卡（“显示” ）；// 按名称选择标签 
$ ( '#myTab a:first' )。选项卡（“显示” ）；// 选择第一个标签 
$ ( '#myTab a:last' )。选项卡（“显示” ）；// 选择最后一个标签 
$ ( '#myTab li:eq(2) a' )。选项卡（“显示” ）；// 选择第三个标签（0-indexed） 

标记

您无需编写任何 JavaScript，只需在元素上指定data-toggle="tab"或即可激活选项卡或药丸导航。data-toggle="pill"将nav和nav-tabs类添加到选项卡ul将应用 Bootstrap 选项卡样式。

<ul class = "nav 导航标签" > 
  <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

激活选项卡元素和内容容器。Tab 应该在 DOM 中具有一个data-target或一个href目标容器节点。

<ul类= “导航导航标签” id = “我的标签” >  
  <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类= "标签内容" > 
  <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>
 
<脚本>
  $ (函数() {  
    $ ( '#myTab a:last' )。选项卡（“显示” ）；
  })
</脚本>

活动

$ ( 'a[data-toggle="tab"]' )。on （'显示' ，函数（e ）{   
  e . 目标// 激活的选项卡
  e . relatedTarget // 上一个标签
})

例子

受到 Jason Frame 编写的优秀 jQuery.tipsy 插件的启发；工具提示是一个更新版本，它不依赖图像，使用 CSS3 制作动画，使用数据属性存储本地标题。

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

四个方向

用法

通过 JavaScript 触发工具提示：

$ （'#example' ）。工具提示（选项）

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 中data-，如data-animation="".

标记

出于性能原因，选择加入 Tooltip 和 Popover data-apis。如果您想使用它们，只需指定一个选择器选项。

<a href = "#" rel = "tooltip" title = "first tooltip" >悬停在我身上</a>   

方法

$().tooltip(选项)

将工具提示处理程序附加到元素集合。

.tooltip('显示')

显示元素的工具提示。

$ （'#element' ）。工具提示（“显示” ）

.tooltip('隐藏')

隐藏元素的工具提示。

$ （'#element' ）。工具提示（“隐藏” ）

.tooltip('切换')

切换元素的工具提示。

$ （'#element' ）。工具提示（“切换” ）

.tooltip('销毁')

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

$ （'#element' ）。工具提示（“销毁” ）

例子

向任何元素添加小的内容覆盖，如 iPad 上的内容，以容纳辅助信息。将鼠标悬停在按钮上以触发弹出窗口。需要包含工具提示。

静态弹出框

有四个选项可用：上对齐、右对齐、下对齐和左对齐。

没有显示为弹出框的标记是从 JavaScript 和data属性中的内容生成的。

现场演示

四个方向

用法

通过 JavaScript 启用弹出框：

$ （'#example' ）。弹出框（选项）

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 中data-，如data-animation="".

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

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

.popover('hide')

Hides an elements popover.

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

.popover('toggle')

Toggles an elements popover.

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

.popover('destroy')

Hides and destroys an element's popover.

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

Example alerts

Add dismiss functionality to all alert messages with this plugin.

Usage

Enable dismissal of an alert via JavaScript:

$(".alert").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

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

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

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

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

$('#my-alert').bind('closed', function () {
  // do something…
})

Example uses

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

Add data-loading-text="Loading..." to use a loading state on a button.

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

Single toggle

Add data-toggle="button" to activate toggling on a single button.

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

Checkbox

Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Radio

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Usage

Enable buttons via JavaScript:

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

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

Options

None

Methods

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

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

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button>

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

<button type="button" class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

About

Get base styles and flexible support for collapsible components like accordions and navigation.

* Requires the Transitions plugin to be included.

Example accordion

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">
        Collapsible Group Item #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">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>
 
<div id="demo" class="collapse in"> … </div>

Usage

Via data attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

$(".collapse").collapse()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

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

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

$('#myCollapsible').on('hidden', function () {
  // do something…
})

Example carousel

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

First Thumbnail label

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.

Second Thumbnail label

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.

Third Thumbnail label

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">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <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>

Usage

Via data attributes

...

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Example

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

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

Usage

Via data attributes

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

Via JavaScript

Call the typeahead manually with:

$('.typeahead').typeahead()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Methods

.typeahead(options)

Initializes an input with a typeahead.

Example

The subnavigation on the left is a live demo of the affix plugin.

Usage

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

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

Via JavaScript

Call the affix plugin via JavaScript:

$('#navbar').affix()

Methods

.affix('refresh')

When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".