用于引导的 Javascript

让 Bootstrap 的组件栩栩如生——现在有 12 个自定义jQuery插件。

模态

一个精简但灵活的传统 javascript 模态插件，仅具有最低要求的功能和智能默认值。

下拉菜单

使用这个简单的插件将下拉菜单添加到 Bootstrap 中的几乎所有内容。Bootstrap 在导航栏、选项卡和药丸中提供完整的下拉菜单支持。

卷轴间谍

使用 scrollspy 自动更新导航栏中的链接，以根据滚动位置显示当前活动链接。

工具提示

jQuery Tipsy 插件的新版本，Tooltips 不依赖于图像——它们使用 CSS3 来制作动画，使用数据属性来存储本地标题。

弹出窗口 *

向任何元素添加小的内容覆盖，如 iPad 上的内容，以容纳辅助信息。

*需要包含工具提示

过渡*

对于简单的过渡效果，包含一次 bootstrap-transition.js 以滑入模态或淡出警报。

*插件中的动画需要

小心！所有 javascript 插件都需要最新版本的 jQuery。

关于模态

一个精简但灵活的传统 javascript 模态插件，仅具有最低要求的功能和智能默认值。

下载文件

静态示例

下面是一个静态渲染的模态。

现场演示

单击下面的按钮，通过 javascript 切换模式。它将向下滑动并从页面顶部淡入。

启动演示模式

使用引导模式

通过javascript调用模态：

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

选项

姓名	类型	默认	描述
背景	布尔值	真的	包括一个模态背景元素。或者，指定`static`在单击时不关闭模式的背景。
键盘	布尔值	真的	按下退出键时关闭模态
节目	布尔值	真的	初始化时显示模态。

标记

您可以轻松地在页面上激活模式，而无需编写一行 javascript。只需data-toggle="modal"在控制器元素上设置一个data-target="#foo"或href="#foo"对应于模态元素 id 的控制器元素，单击时，它将启动您的模态。

此外，要将选项添加到您的模态实例，只需将它们作为附加数据属性包含在控件元素或模态标记本身上。

<a class = "btn" data-toggle = "modal" href = "#myModal" >启动模态</a>

<div class = "modal hide" id = "myModal" >  
  <div类= “模态标题” > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3>模态标题</h3>
  </div>
  <div类= “模态体” > 
    <p>一个很好的身体...... </p>
  </div>
  <div类= “模态页脚” > 
    <a href = "#" class = "btn" data-dismiss = "modal" >关闭</a>   
    <a href = "#" class = "btn btn-primary" >保存更改</a>  
  </div>
</div>

小心！如果您希望您的模态动画进出，只需 .fade向元素添加一个类 .modal（请参阅演示以查看此操作）并包含 bootstrap-transition.js。

方法

.modal（选项）

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

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

.modal('切换')

手动切换模式。

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

.modal('显示')

手动打开一个模态。

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

.modal('隐藏')

手动隐藏模态。

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

活动

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

事件	描述
节目	`show`调用实例方法时立即触发此事件。
显示	当模式对用户可见时触发此事件（将等待 css 转换完成）。
隐藏	`hide`调用实例方法时立即触发此事件。
隐	当模式对用户完成隐藏时触发此事件（将等待 css 转换完成）。

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

关于下拉菜单

使用这个简单的插件将下拉菜单添加到 Bootstrap 中的几乎所有内容。Bootstrap 在导航栏、选项卡和药丸中提供完整的下拉菜单支持。

下载文件

例子

单击导航栏中的下拉导航链接和下面的药丸以测试下拉菜单。

使用 bootstrap-dropdown.js

通过 javascript 调用下拉列表：

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

标记

要快速将下拉功能添加到任何元素，只需添加data-toggle="dropdown"任何有效的引导下拉菜单将自动激活。

小心！data-target="#fat"您可以选择使用或定位特定下拉列表 href="#fat"。

<ul class = "nav nav-药丸" > 
  <li class = "active" ><a href = "#" >常规链接</a></li>  
  <li class = "下拉菜单" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      落下
      <b类= "插入符号" ></b> 
    </a>
    <ul class = "下拉菜单" > 
      <li><a href = "#" >动作</a></li> 
      <li><a href = "#" >另一个动作</a></li> 
      <li><a href = "#" >这里有别的东西</a></li> 
      <li class = "分隔符" ></li> 
      <li><a href = "#" >分隔链接</a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-药丸" > 
  <li class = "下拉菜单" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      落下
      <b类= "插入符号" ></b> 
    </a>
    <ul class = "下拉菜单" > 
      ...
    </ul>
  </li>
</ul>

方法

$().dropdown()

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

ScrollSpy 插件用于根据滚动位置自动更新导航目标。

下载文件

带有 scrollspy 的示例导航栏

滚动下方区域并观看导航更新。下拉子项目也将突出显示。试试看！

@胖的

广告紧身裤 keytar，早午餐 id 艺术派对 dolor labe。Pitchfork yr enim lo-fi 在售罄之前 qui。Tumblr 从农场到餐桌的自行车权利。Anim keffiyeh carles 开衫。Velit seitan mcsweeney 的照相亭 3 wolf moon irure。Cosby 毛衣 lomo jean 短裤，williamsburg 连帽衫 minim qui 你可能没听说过它们和开衫信托基金过失生物柴油韦斯安德森美学。Nihil 纹身 accusamus，具有讽刺意味的生物柴油 keffiyeh 工匠 ullamco 后果。

@mdo

Veniam marfa 小胡子滑板，adipisicing fugiat velit 干草叉胡须。Freegan 胡须 aliqua cupidatat mcsweeney 的 vero。Cupidatat 四个 loko nisi，ea helvetica nulla carles。纹身 cosby 毛衣食品卡车，mcsweeney 的非免费乙烯基。低保真韦斯安德森 +1 裁缝。卡尔斯非审美练习 quis 绅士化。布鲁克林 adipisicing 精酿啤酒副 keytar deserunt。

一

Occaecat commodo aliqua delectus。Fap 精酿啤酒 deserunt 滑板 ea。Lomo 自行车权利 adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam。High Life id 黑胶唱片，echo park consequat quis aliquip banh mi 干草叉。Vero VHS est adipisicing。Consectetur nisi DIY 迷你邮差包。Cred ex in，可持续的 delectus consectetur 腰包 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.

three

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 博客，过错邮差包 marfa 不管什么美味的食品卡车。Sapiente 合成器 id 假设。Locavore sed helvetica 陈词滥调具有讽刺意味，您可能没有听说过它们导致连帽衫无麸质 lo-fi fap aliquip。在售罄之前，Labore 曾登上过一席之地，terry Richardson 早午餐 nesciunt quis cosby 毛衣 pariatur keffiyeh ut helvetica artisan。开衫精酿啤酒 seitan 现成的 velit。VHS chambray labouris tempor veniam。Anim mollit minim commodo ullamco 雷猫。

使用 bootstrap-scrollspy.js

通过javascript调用scrollspy：

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

标记

要轻松地将 scrollspy 行为添加到您的顶栏导航，只需添加data-spy="scroll"到您要监视的元素（最常见的是正文）。

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

小心！导航栏链接必须具有可解析的 id 目标。例如， a <a href="#home">home</a>必须对应于 dom 中的某些东西 like <div id="home"></div>。

方法

.scrollspy('刷新')

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

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

选项

姓名	类型	默认	描述
抵消	数字	10	计算滚动位置时从顶部偏移的像素。

活动

事件	描述
启用	每当滚动间谍激活新项目时，就会触发此事件。

该插件添加了快速、动态的选项卡和药丸功能，用于转换本地内容。

下载文件

示例选项卡

单击下面的选项卡可在隐藏窗格之间切换，甚至可以通过下拉菜单进行切换。

你可能没听说过奥斯汀牛仔短裤。Nesciunt tofu stumptown aliqua，复古合成大师净化。小胡子陈词滥调，威廉斯堡卡尔斯素食主义者 helvetica。Reprehenderit 屠夫复古 keffiyeh 捕梦网合成器。Cosby 毛衣 eu banh mi, qui irure terry richardson ex squid。Aliquip placeat 鼠尾草 iphone。Seitan aliquip quis 开衫美国服装，屠夫 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.

信托基金 seitan 凸版印刷，keytar 原始牛仔布 keffiyeh etsy 艺术派对在售罄前 master cleanse 无麸质鱿鱼场景者 freegan cosby 毛衣。范妮包波特兰 seitan DIY，艺术派对土食狼陈词滥调高生活回声公园奥斯汀。Cred 乙烯基 keffiyeh DIY 丹参 PBR，banh mi 在他们卖完农场到餐桌 VHS 病毒 locavore cosby 毛衣之前。Lomo wolf 病毒式，小胡子现成的 Thundercats keffiyeh 精酿啤酒 marfa 道德。Wolf salvia freegan，裁缝头巾回声公园素食主义者。

使用 bootstrap-tab.js

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

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

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

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

标记

您可以通过简单地在元素上指定data-toggle="tab"或来激活选项卡或药丸导航，而无需编写任何 JavaScript 。data-toggle="pill"将nav和nav-tabs类添加到选项卡ul将应用引导选项卡样式。

<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类= “nav 导航标签” id = “myTab” >  
  <li class = "active" ><a href = "#home" > 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' )。选项卡（“显示” ）；
  })
</脚本>

活动

事件	描述
节目	此事件在标签显示时触发，但在新标签显示之前。使用`event.target`和`event.relatedTarget`分别定位活动选项卡和上一个活动选项卡（如果可用）。
显示	显示选项卡后，此事件在选项卡显示时触发。使用`event.target`和`event.relatedTarget`分别定位活动选项卡和上一个活动选项卡（如果可用）。

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

关于工具提示

受到 Jason Frame 编写的优秀 jQuery.tipsy 插件的启发；Tooltips 是一个更新版本，它不依赖于图像，使用 css3 来制作动画，使用 data-attributes 来存储本地标题。

下载文件

工具提示的使用示例

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

使用 bootstrap-tooltip.js

通过 javascript 触发工具提示：

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

选项

姓名	类型	默认	描述
动画	布尔值	真的	对工具提示应用 css 淡入淡出过渡
放置	字符串\|函数	'最佳'	如何定位工具提示 - 顶部 \| 底部 \| 离开 \| 正确的
选择器	细绳	错误的	如果提供了选择器，则工具提示对象将被委托给指定的目标。
标题	字符串 \| 功能	''	如果 `title` 标签不存在，则默认标题值
扳机	细绳	'徘徊'	如何触发工具提示 - 悬停 \| 焦点 \| 手动的
延迟	号码 \| 目的	0	延迟显示和隐藏工具提示（毫秒） - 不适用于手动触发类型如果提供了一个数字，延迟将应用于隐藏/显示对象结构为：`delay: { show: 500, hide: 100 }`

小心！也可以通过使用数据属性来指定单个工具提示的选项。

标记

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

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

方法

$().tooltip(选项)

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

.tooltip('显示')

显示元素的工具提示。

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

.tooltip('隐藏')

隐藏元素的工具提示。

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

.tooltip('切换')

切换元素的工具提示。

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

关于弹出框

向任何元素添加小的内容覆盖，如 iPad 上的内容，以容纳辅助信息。

*需要包含工具提示

下载文件

悬停弹出框示例

将鼠标悬停在按钮上以触发弹出窗口。

悬停弹出框

使用 bootstrap-popover.js

通过 javascript 启用弹出框：

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

选项

姓名	类型	默认	描述
动画	布尔值	真的	对工具提示应用 css 淡入淡出过渡
放置	字符串\|函数	'正确的'	如何定位弹出框 - 顶部 \| 底部 \| 离开 \| 正确的
选择器	细绳	错误的	如果提供了选择器，则工具提示对象将被委托给指定的目标
扳机	细绳	'徘徊'	如何触发工具提示 - 悬停 \| 焦点 \| 手动的
标题	字符串 \| 功能	''	如果 `title` 属性不存在，则默认标题值
内容	字符串 \| 功能	''	如果 `data-content` 属性不存在，则默认内容值
延迟	号码 \| 目的	0	延迟显示和隐藏弹出框（毫秒） - 不适用于手动触发类型如果提供了一个数字，延迟将应用于隐藏/显示对象结构为：`delay: { show: 500, hide: 100 }`

小心！也可以通过使用数据属性来指定单个弹出框的选项。

标记

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

方法

$().popover(选项)

初始化元素集合的弹出框。

.popover('显示')

显示元素弹出框。

$ （'#element' ）。弹出窗口（“显示” ）

.popover('隐藏')

隐藏元素弹出框。

$ （'#element' ）。弹出框（'隐藏' ）

.popover('切换')

切换元素弹出框。

$ （'#element' ）。弹出框（'切换' ）

关于警报

警报插件是一个小类，用于向警报添加关闭功能。

下载

示例警报

警报插件适用于常规警报消息和阻止消息。

神圣的鳄梨酱！最好检查一下自己，你看起来不太好。

哦，快！你有一个错误！

改变这个和那个，然后再试一次。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit。Cras mattis consectetur purus 坐在 amet 发酵液中。

采取这个行动或者这样做

使用 bootstrap-alert.js

启用通过 javascript 解除警报：

$ （“.alert” ）。警报()

标记

只需添加data-dismiss="alert"到您的关闭按钮即可自动提供警报关闭功能。

<a class = "close" data-dismiss = "alert" href = "#" > × </a>

方法

$().alert()

使用关闭功能包装所有警报。要让警报在关闭时显示动画，请确保它们已经应用了.fadeand.in类。

.alert('关闭')

关闭警报。

$ （“.alert” ）。警报（'关闭' ）

活动

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

事件	描述
关	`close`调用实例方法时立即触发此事件。
关闭	当警报关闭时触发此事件（将等待 css 转换完成）。

$ （'#my-alert' ）。绑定（'关闭' ，函数（）{   
  // 做一点事…
})

关于

用按钮做更多事情。控制按钮状态或为更多组件（如工具栏）创建按钮组。

下载文件

示例用途

使用按钮插件进行状态和切换。

有状态的
单切换
复选框
收音机

使用 bootstrap-button.js

通过 javascript 启用按钮：

$ （'.nav-tabs' ）。按钮()

标记

数据属性是按钮插件的组成部分。查看下面的示例代码以了解各种标记类型。

<!-- 添加 data-toggle="button" 以激活单个按钮的切换 -->
<button class = "btn" data-toggle = "button" >单次切换</button>  
 
<!-- 为 btn-group 上的复选框样式切换添加 data-toggle="buttons-checkbox" -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" >左</button> 
  <button class = "btn" >中间</button> 
  <button class = "btn" >右</button> 
</div>
 
<!-- 添加 data-toggle="buttons-radio" 用于 btn-group 上的单选样式切换 -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" >左</button> 
  <button class = "btn" >中间</button> 
  <button class = "btn" >右</button> 
</div>

方法

$().button('切换')

切换推送状态。使按钮具有已激活的外观。

小心！您可以使用该 data-toggle属性启用按钮的自动切换。

<button class = "btn" data-toggle = "button" > ... </button>

$().button('加载中')

将按钮状态设置为加载 - 禁用按钮并将文本交换为加载文本。应使用 data 属性在按钮元素上定义加载文本data-loading-text。

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

小心！ Firefox 在页面加载时保持禁用状态。一种解决方法是使用 autocomplete="off".

$().button('重置')

重置按钮状态 - 将文本交换为原始文本。

$().button(字符串)

重置按钮状态 - 将文本交换为任何数据定义的文本状态。

<button class = "btn" data-complete-text = "完成！" > ... </按钮>   
<脚本>
  $ （'.btn' ）。按钮（“完成” ）
</脚本>

关于

获得对可折叠组件（如手风琴和导航）的基本样式和灵活支持。

下载文件

*需要包含过渡插件。

示例手风琴

使用折叠插件，我们构建了一个简单的手风琴风格小部件：

可折叠组项目 #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid。3 wolf moon officia aute，非 Cupidatat 滑板 dolor 早午餐。食品卡车藜麦 nesciunt labourum eiusmod。早午餐 3 wolf moon tempor，sunt aliqua 在上面放了一只鸟 squid 单一产地咖啡 nulla assumendashoreditch 等。Nihil anim keffiyeh helvetica，精酿啤酒工人韦斯安德森相信 nesciunt sapiente ea proident。Ad vegan excepteur 屠夫 Vice lomo。紧身裤 occaecat 精酿啤酒从农场到餐桌，粗斜纹棉布美学合成器您可能没有听说过它们 accusamus labe 可持续 VHS。

可折叠组项目 #2

可折叠组项目 #3

使用 bootstrap-collapse.js

通过 javascript 启用：

$ （“.collapse” ）。崩溃()

选项

姓名	类型	默认	描述
父母	选择器	错误的	如果选择器，则当显示此可折叠项时，指定父项下的所有可折叠元素都将关闭。（类似于传统的手风琴行为）
切换	布尔值	真的	在调用时切换可折叠元素

标记

只需添加data-toggle="collapse"一个data-targetto 元素即可自动分配对可折叠元素的控制。该data-target属性接受一个 CSS 选择器来应用折叠。确保将类添加collapse到可折叠元素。如果您希望它默认打开，请添加附加类in。

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  简单可折叠
</按钮>
 
<div id = "demo" class = "collapse in" > ... </div>

小心！要将手风琴式的组管理添加到可折叠控件，请添加 data 属性 data-parent="#selector"。请参阅演示以查看此操作。

方法

.collapse（选项）

将您的内容激活为可折叠元素。接受一个可选选项object。

$ （'#myCollapsible' ）。崩溃（{
  切换：假 
})

.collapse('切换')

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

.collapse('显示')

显示可折叠元素。

.collapse('隐藏')

隐藏可折叠元素。

活动

Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件。

事件	描述
节目	`show`调用实例方法时立即触发此事件。
显示	当折叠元素对用户可见时触发此事件（将等待 css 转换完成）。
隐藏	`hide`调用该方法时会立即触发此事件。
隐	当对用户隐藏折叠元素时会触发此事件（将等待 css 转换完成）。

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

关于

用于循环元素的通用插件。一个旋转木马。

下载文件

示例轮播

观看下面的幻灯片。

第一个缩略图标签

Cras justo odio，dapibus ac facilisis in，egestas eget quam。Donec id elit non mi porta gravida 在 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 在 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 在 eget metus。Nullam id dolor id nibh ultricies vehicula ut id elit。

‹ ›

小心！实施此轮播时，请删除我们提供的图像并将其替换为您自己的图像。

使用 bootstrap-carousel.js

通过javascript调用：

$ （'.carousel' ）。轮播()

选项

姓名	类型	默认	描述
间隔	数字	5000	自动循环项目之间的延迟时间。如果为 false，carousel 将不会自动循环。
暂停	细绳	“徘徊”	在 mouseenter 上暂停轮播的循环并在 mouseleave 上恢复轮播的循环。

标记

数据属性用于上一个和下一个控制。查看下面的示例标记。

<div id = "myCarousel" class = "carousel slide" >  
  <!-- 轮播项目 -->
  <div class = "carousel-inner" > 
    <div class = "活动项目" > ... </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- 轮播导航 -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

方法

.carousel（选项）

使用可选选项初始化轮播object并开始循环浏览项目。

$ （'.carousel' ）。轮播（{
  间隔：2000 
})

.carousel('循环')

从左到右循环浏览轮播项目。

.carousel('暂停')

停止轮播在项目中循环。

.carousel(数字)

将轮播循环到特定帧（基于 0，类似于数组）。

.carousel('prev')

循环到上一个项目。

.carousel('下一个')

循环到下一个项目。

活动

Bootstrap 的 carousel 类公开了两个用于连接 carousel 功能的事件。

事件	描述
滑动	`slide`调用实例方法时立即触发此事件。
滑动	当轮播完成其幻灯片转换时会触发此事件。

关于

一个基本的、易于扩展的插件，用于使用任何表单文本输入快速创建优雅的预输入。

下载文件

例子

开始在下面的字段中输入以显示预先输入的结果。

使用 bootstrap-typeahead.js

通过 javascript 调用 typeahead：

$ （'.typeahead' ）。预输入()

选项

姓名	类型	默认	描述
资源	大批	[ ]	要查询的数据源。
项目	数字	8	下拉列表中显示的最大项目数。
匹配器	功能	不区分大小写	用于确定查询是否与项目匹配的方法。接受单个参数，`item`用于测试查询。使用访问当前查询`this.query`。`true`如果查询匹配，则返回布尔值。
分拣机	功能	完全匹配、区分大小写、不区分大小写	用于对自动完成结果进行排序的方法。接受单个参数`items`并具有预先输入实例的范围。使用引用当前查询`this.query`。
荧光笔	功能	突出显示所有默认匹配	用于突出显示自动完成结果的方法。接受单个参数`item`并具有预先输入实例的范围。应该返回 html。

标记

添加数据属性以注册具有预先输入功能的元素。

<输入类型= “文本”数据提供= “提前输入” >

方法

.typeahead（选项）

使用预输入初始化输入。

jQuery 插件十几个 Bootstrap 插件让你开始

弹出窗口 *

过渡*

模态引导-modal.js

关于模态

静态示例

模态标题

现场演示

模态标题

模态文本

模态中的弹出框

模态中的工具提示

溢出文本以显示可选滚动条

使用引导模式

选项

标记

方法

.modal（选项）

.modal('切换')

.modal('显示')

.modal('隐藏')

活动

下拉菜单 bootstrap-dropdown.js

关于下拉菜单

例子

使用 bootstrap-dropdown.js

标记

方法

$().dropdown()

ScrollSpy bootstrap-scrollspy.js

带有 scrollspy 的示例导航栏

@胖的

@mdo

一

二

three

使用 bootstrap-scrollspy.js

标记

方法

.scrollspy('刷新')

选项

活动

可切换选项卡bootstrap-tab.js

示例选项卡

使用 bootstrap-tab.js

标记

方法

$().tab

活动

工具提示bootstrap-tooltip.js

关于工具提示

工具提示的使用示例

使用 bootstrap-tooltip.js

选项

标记

方法

$().tooltip(选项)

.tooltip('显示')

.tooltip('隐藏')

.tooltip('切换')

弹出框 bootstrap- popover.js

关于弹出框

悬停弹出框示例

使用 bootstrap-popover.js

选项

标记

方法

$().popover(选项)

.popover('显示')

.popover('隐藏')

.popover('切换')

警报消息bootstrap-alert.js

关于警报

示例警报

哦，快！你有一个错误！

使用 bootstrap-alert.js

标记

方法

$().alert()

.alert('关闭')