JavaScript插件——Bootstrap中的JavaScript

转自：http://bootstrap.kinghack.com/javascript.html#buttons

Bootstrap中的JavaScript
本章内容和官方文档并不完全相同,我调整了部分内容.

独立的文件还是编译后的集成文件

每个插件都可以单独的引入到页面中（通过某些方式控制插件间的依赖关系），或者一次性引入。bootstrap.js 和 bootstrap.min.js 文件都将所有插件包含在一个文件中了。

数据属性

你可以仅仅使用data属性API就可以使用所有Bootstrap中的插件，而且不用写一行JavaScript代码。这是Bootstrap中的一等API，并且是你的首选方式。

特殊情况是，在某些情况下可能需要特意禁用这种默认动作。因此，我们特地提供了禁用data属性API的方式，通过解除绑定在body上的被命名为`'data-api'`的事件即可实现。如下所示：

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

还可以解除特定插件的事件绑定，只要将插件名和data-api链接在一起作为参数使用。如下所示：

   
   
$('body').off('.alert.data-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插件, 还需要使用其他UI框架. 在这种情况下, 命名空间冲突的情况时有发生. 假如发生了冲突情况, 你可以在插件调用 .noConflict.

   
   
var bootstrapButton = $.fn.button.noConflict() // 返回 $.fn.button 之前指定的值
$.fn.bootstrapBtn = bootstrapButton            // 给Bootstrap添加 $().bootstrapBtn 功能

事件

Bootstrap对大多数插件独有的行为提供自定义事件. 通常用不定式和过去分词, 如不定式(ex. show)触发事件开始, 和过去分词(ex. shown)触发事件完成.

所有不定式都提供了preventDefault功能. 这能在开始之前终止行为.

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

过渡效果 bootstrap-transition.js

关于过渡效果

对于简单的过渡效果, 需要包含一个bootstrap-transition.js文件. 假如你使用完整(或精缩版)bootstrap.js, 就不需要再加入该文件, 因为bootstrap.js已经把该文件包含在里面.

使用例子

过渡效果插件的使用案例：

• 具有幻灯片或淡入效果的对话框
• 具有淡出效果的标签页
• 具有淡出效果的警告
• 具有幻灯片效果的轮播板

对话框 bootstrap-modal.js

例子

类似传统的javascript模态对话框，但更圆滑更灵活，带有最基本的功能和智能默认项。

静态的例子

下面就是一个静态渲染的模态对话框。有标题, 正文, 并且页脚还有可执行操作.

对话框标题

欢迎光临…

   
   
<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触发一个模态对话框。对话框从页面顶端滑下的同时逐渐呈现。

   
   
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
 
<!-- Modal -->
<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">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

---

用法

通过data属性

我们无须手写javascript即可在页面中触发对话框。只要在某个激发元素上设置 data-toggle="modal" , 像按钮, 针对一个特定的对话框, 可进行data-target="#foo" 或者 href="#foo" 间的切换.设为某个对话框元素的id，这样点击激发元素就会弹出对话框。

   
   
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通过JavaScript

用一行JavaScript代码, 调用id为 myModal 的对话框:

   
   
$('#myModal').modal(options)
                        
$('#myModal').modal({
    backdrop:true,
    keyboard:true,
    show:true
});
                        

选项

如果需要带选项的对话框，可以在激发元素或是对话框元素的data-属性中设置选项值, 如 data-backdrop="".

名称	类型	默认	描述
backdrop	布尔值	true	包括一个对话框背景元素. 另外 static(false情况) 背景下, 点击对话框外的区域不会关闭对话框 为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。 为false时，无背景。
keyboard	布尔值	true	按下esc键时关闭对话框. 为true时按下ESC键关闭模态对话框。 为false时无效。
show	布尔值	true	初始化时显示对话框.
remote	path	false	如果需要提供远程url, 内容将通过jQuery的load方法加载和注入在.modal-body. 假如你使用数据API, 你可以另外使用 href 标签指定远程源. 如下所示: <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

方法

.modal(options)

将某个元素变成对话框激活，接受一个 object 做为可选参数。

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

.modal('toggle')

手动切换对话框打开和关闭。 

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

.modal('show')

打开对话框

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

.modal('hide')

关闭对话框

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

事件

Bootstrap的对话框类扩展了一组事件，可以介入对话框的某些功能实现。

事件	描述
show	该事件在调用 show 方法时立刻触发。
shown	该事件在对话框已经呈现给用户后（要等CSS过渡效果生效后）触发。
hide	该事件在对话框使用 hide 方法时立刻触发。
hidden	该事件在对话框已经关闭后（要等CSS过渡效果生效后）触发。

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

下拉菜单bootstrap-dropdown.js

例子

这个简单的插件几乎可以给Bootstrap的任何组件添加下拉项。 Bootstrap导为导航条, 标签导航, 圆角式导航提供完整的下拉菜单特性。

导航条

标签式导航

---

用法

通过data属性

在链接或按钮上添加 data-toggle="dropdown" 激活下拉项.

   
   
<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</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">
    Dropdown
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

通过JavaScript

通过javascript调用下拉项：

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

下面这个示例是单独加的,演示了二种不同的调用方式.

   
   
<ul class="nav nav-pills">
<li><a href="#">规则的链接</a></li>
<li class="dropdown" id="droptest">
    <a id="droptest" href="#droptest" role="button" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labeledby="droptest">
        <li><a href="#">动作</a></li>
        <li><a href="#">另一个动作</a></li>
        <li><a href="#">其他</a></li>
        <li class="divider"></li>
        <li><a href="#">被间隔的链接</a></li>
    </ul>
</li>
<!-- 一个按键可以触发点击事件 -->
<li class="active">
    <a data-toggle="dropdown" href="#droptest">点击试试</a>
</li>
<!-- 定义一个js触发的事件 -->
<li>
    <a id="menutest2" href="#droptest">JavaScript触发</a>
</li> 
 
JavaScript代码如下:
<script type="text/javascript">
jQuery(document).ready(function($) {      
		$('#menutest2').dropdown();
       });	
</script>                  
                    

选项

没有

方法

$().dropdown('toggle')

用于激活某个导航条/标签页导航栏下的菜单

滚动条侦测bootstrap-scrollspy.js

使用滚动侦测的导航条例子

该插件根据滚动条的位置, 自动更新导航条选项的目标. 滚动导航条下方的区域并观察变化. 同样的, 下拉菜单的子项也会被高亮显示出来.

滚动下面的内容区域，然后观察导航条状态，导航条中的菜单甚至下拉项都会同步高亮。试一下！

@fat

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.

@mdo

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.

one

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.

two

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 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.

---

用法

通过data属性

可以很容易的在顶部导航条添加监听滚动功能, 只需把data-spy="scroll"添加到你想监听的元素(最典型的就是添加到body)并添加data-target=".navbar"来选择使用哪个导航. 你将会希望在.nav组件使用监听滚动功能.

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

通过JavaScript

通过javascript调用滚动侦测：

   
   
$('#navbar').scrollspy()

注意! 导航条链接都必须带有一个ID. 比如, <a href="#home">home</a> 在DOM中必须有东西来对应, 像 <div id="home"></div>.

方法

.scrollspy('refresh')

如果监听滚动和添加移除节点连同一起使用, 你需要调用refresh方法, 像这样:

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

选项

选项的传递可通过数据属性或JavaScript. 对于data属性, 需要附加选项名称 data-, 如 data-offset="".

名称	样式	默认	描述
offset	number	10	计算从顶部到滚动的位置的偏移量(像素).

事件

事件	描述
activate	事件在每个新的项目被激活的时候触发.

切换式标签页bootstrap-tab.js

例子

通过点击标签页甚至还可以是下拉菜单切换显示不同容器中的内容。

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.

---

用法

通过data属性

你可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle="tab" 或 data-toggle="pill". 在标签 ul 添加 nav 和 nav-tabs 属性, 将应用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>

通过JavaScript

通过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'); // 选择第三个标签

方法

$().tab

激活一个标签页元素和内容容器。标签页应该含有 data-target 或 href 属性以指向dom中的某个容器节点。

   
   
<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>

事件

事件	描述
show	该事件在标签开始展示时（尚未渲染完之前）触发。 event.target 指向要激活的标签， event.relatedTarget 提向之前已激活的标签（如果有的话）。
shown	该事件在标签已经呈现后（已渲染完成）触发。 event.target 指向要激活的标签， event.relatedTarget 提向之前已激活的标签（如果有的话）。

   
   
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // 当前活动的标签
  e.relatedTarget // 上一个选择的标签
})

工具提示bootstrap-tooltip.js

例子

受Jason Frame所写的出色的jQuery.tipsy插件所启发，我们编写了工具提示。做为前者的升级版，工具提示不依赖于图像， 使用css3显示动画效果，利用data-属性对标题做本地化存储。

出于性能方面的考虑, 提示工具和提示框的data-apis默认是加入的, 这意味着你必须初始化它们.

将鼠标停悬在下面的链接上查看提示:

拥有四个方

在input中的提示

当在Bootstrap的input中使用提示工具和提示框时, 为了避免出现不必要的影响, 你需要设置container选项(文档下面有说明).

---

用法

通过data属性

出于性能的考虑，在使用工具提示和弹出提示时建议利用data-api属性，再指定一个selector选项即可。

   
   
<a href="#" data-toggle="tooltip" title="first tooltip">鼠标经过时生效</a>

通过JavaScript

通过javascript触发工具提示：

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

选项

选项的传递可通过数据属性或JavaScript. 对于数据属性, 需要附加选项名称 data-, 如 data-animation="".

名称	类型	默认	描述
animation	布尔值	true	为工具提示添加一个淡入的过渡。
html	布尔值	false	在提示工具插入HTML. 假如是false, jquery的 text 方法将用来插入内容到DOM. 如果担心XSS攻击, 可以使用文本.
placement	字符串或函数	'top'	具体提示的位置：top | bottom | left | right。
selector	字符串	false	如果提供了selector，将对符合条件的某个或多个元素启用工具提示。
title	字符串或函数	''	假如`title`标签不存在, 将显示默认的标题值.
trigger	字符串	'hover focus'	如何触发提示工具 - click | hover | focus | manual
delay	数字或对象	0	显示和隐藏时的延迟时间(以毫秒计) 如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。 如果是一个对象，其结构就是: delay: { show: 500, hide: 100 }
container	字符串 | false	false	把提示工具追加到特定的元素, 如: container: 'body'

注意! 每个工具提示都可以单独通过设置data-属性以实现与javascript调用同样的功能

方法

$().tooltip(options)

对某个元素集合添加工具提示的处理。

.tooltip('show')

显示某个元素的工具提示。

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

.tooltip('hide')

隐藏某个元素的工具提示。

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

.tooltip('toggle')

切换某个元素的工具提示的隐藏和显示状态。

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

.tooltip('destroy')

隐藏和摧毁提示工具.

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

• 
  

弹出提示bootstrap-popover.js

例子

与iPad上的查看二级信息的效果相像，将鼠标停悬在按钮上触发提示框。需要 包含

静态提示框

提供四个方向: 上, 右, 下, 左

上

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

右

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

下

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

左

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

由JavaScript和内容包含在data属性所产生的提示框可以无需写标记.

演示

四个方向

---

用法

通过data属性

对于性能方面的考虑, 提示工具和提示框都建议使用data-api. 假如你想使用他们, 只需指定一个选择器选项.

   
   
<a href="#" class="btn btn-large btn-danger" rel="popover" title="标题" data-content="And here's some amazing content. It's very engaging. right?">点击这个弹出提示</a>

通过JavaScript

使用javascript启用弹出提示：

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

选项

选项的传递可通过数据属性或JavaScript. 对于数据属性, 需要附加选项名称 data-, 如 data-animation="".

名称	类型	默认	描述
animation	布尔值	true	为工具提示添加一个淡入的过渡。
html	布尔值	false	在提示工具插入HTML. 假如是false, jquery的 text 方法将用来插入内容到DOM. 如果担心XSS攻击, 可以使用文本.
placement	字符串或函数	'right'	具体提示的位置：top | bottom | left | right。
selector	字符串	false	如果提供了selector，将对符合条件的某个或多个元素启用工具提示。
title	字符串或函数	''	假如`title`标签不存在, 将显示默认的标题值.
trigger	字符串	'click'	如何触发提示工具 - click | hover | focus | manual
content	字符串或函数	''	假如`data-content`属性不存在, 将显示默认内容值.
delay	数字或对象	0	显示和隐藏时的延迟时间(以毫秒计) 如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。 如果是一个对象，其结构就是: delay: { show: 500, hide: 100 }
container	字符串 | false	false	把提示工具追加到特定的元素, 如: container: 'body'

注意! 每个工具提示都可以单独通过设置data-属性以实现与javascript调用同样的功能

方法

$().popover(options)

初始化提示框的元素集合

.popover('show')

显示提示框

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

.popover('hide')

隐藏提示框.

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

.popover('toggle')

切换提示框.

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

.popover('destroy')

隐藏和摧毁提示框.

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

通知消息bootstrap-alert.js

例子

通知插件用在规则的通知消息或块状消息上。

环境！ 好的设计要充分考虑到对环境造成的影响。

错误! 你碰到了一个错误!

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.

---

用法

通过data属性

只需添加 data-dismiss="alert" 到关闭按钮, 就会给通知提供一个关闭功能.

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

通过JavaScript

通过javascript触发通知：

   
   
$(".alert").alert()

方法

$().alert()

对所有通知消息赋予关闭功能。在要关闭时使用动画效果，就要在通知上应用 .fade 和 .in 。

.alert('close')

关闭通知.

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

事件

Bootstrap的通知类扩展了一组事件，可以介入通知的某些功能实现。

事件	描述
close	当close实例调用时, 事件会立即触发.
closed	在通知已经关闭后（等待css过渡效果完成）触发。

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

JS点击触发消息通知

   
   
<div id="alerttest" class="alert alert-block fade in">
<button id="alertclose" type="button" class="close" >×</button>
JS点击触发消息通知
<p><a class="btn" href="#" onclick="$('#alerttest').alert('close');">关闭这个消息</a></p>
</div>
 
<script>
<!-- js代码 消息提示 ,点击事件 -->
$('#alertclose').click(function () {
	$('#alerttest').alert('close');
});
</script>

按钮bootstrap-button.js

例子

控制按钮的状态或者为其他复合控件(比如工具条)创建按钮组。

状态式

在按钮添加 data-loading-text="Loading..." 使用加载状态.

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

切换

在按钮添加 data-toggle="button" 使用切换.

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

复选框

添加 data-toggle="buttons-checkbox" 让按钮组具有复选框风格按钮.

   
   
<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" 让按钮组具有单选框风格按钮.

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

---

用法

通过data属性

数据属性是按钮插件的组成部分. 上面的代码实例为各种标记类型.

通过JavaScript

通过javascript触发按钮：

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

选项

没有

方法

$().button('toggle')

切换按下状态。改变按钮的外观为已经激活(按下)的样子。

注意！ 可以使用 data-toggle 属性自动设置按钮状态。

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

$().button('loading')

设置按钮为载入状态 - 按钮无效且将文本变成载入文本 载入文本应该设置在按钮的 data-loading-text 的属性中。

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

注意！  变通方案是在按钮上应用 autocomplete="off" 。

$().button('reset')

重置按钮状态 - 将按钮文字复原。

$().button(string)

重置按钮状态 - 将按钮文字变成为指定的文字。

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

折叠(切换)bootstrap-collapse.js

关于

为可折叠的组件(比如手风琴式应用，导航栏)提供基本的样式和灵活的支持。

* 需要包含过渡插件.

例子

   
   
<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>
...

你也可以使用插件也无需写标记. 让按钮对另一个元素进行展开和折叠.

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

---

用法

通过data属性

只要在元素上添加 data-toggle="collapse" 和 data-target 就能自动变成可折叠的。 data-target 属性接受一个css选择器，以选取元素添加折叠。 一定要在折叠元素上添加 collapse 。如果要默认某折叠元素是打开的，只要添加 .in 。

如需要添加一个手风琴式可折叠组, 则需添加 data-parent="#selector". 详情可查看上面的演示

通过JavaScript

通过javascript启用：

   
   
$(".collapse").collapse()

选项

选项的传递可通过数据属性或JavaScript. 对于数据属性, 需要附加选项名称 data-, 如 data-parent="".

名称	类型	默认	描述
parent	选择器 selector	false	如果指定了选择器，那么在显示折叠顶时，所有被选取的元素集合中的可折叠项都被关闭（与传统的手风琴应用相似）。
toggle	布尔值	true	切换可折叠元素

方法

.collapse(options)

把内容元素转换为一个可折叠组件。接受一个 object 对象做为可选参数。

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

.collapse('toggle')

切换一个可折叠元素的状态：显示还是隐藏。

.collapse('show')

显示一个可折叠元素。

.collapse('hide')

隐藏一个可折叠元素。

事件

Bootstrap的折叠类扩展了一组事件，可以介入折叠的某些功能实现。

事件	描述
show	该事件在调用 show 实例方法时立刻触发。
shown	该事件在可折叠元素已经呈现给用户后触发（等待CSS过渡效果完成）。
hide	该事件在调用 hide 方法时立刻触发。
hidden	该事件在可折叠元素已经在用户面前完全隐藏后触发（等待CSS过渡效果完成）。

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

轮播bootstrap-carousel.js

例子

   
   
<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>
  <!-- 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>

注意! 实现轮播时，请移除我们提供的图片，替换为你自己的。

---

用法

通过data属性

使用数据属性可以很容易的控制轮播的位置. 当data-slide传入prev或next, 会把相对滑动的位置改变成当前位置. 另外, 使用data-slide-to传递一个索引到轮播data-slide-to="2"会滑动到指定位置, 索引从0开始计算.

通过JavaScript

通用javascript调用：

   
   
$('.carousel').carousel()

选项

选项的传递可通过数据属性或JavaScript. 对于数据属性, 需要附加选项名称 data-, 如 data-interval="".

名称	类型	默认	描述
interval	数字	5000	在循环过程中每张图片停留的时间. 假如是false, 则不会自动循环.
pause	字符串	"hover"	鼠标在幻灯片区域内暂停循环, 在区域外则继续循环.

方法

.carousel(options)

初始化轮播组件，接受一个 object 做为可选参数并开始循环播环。

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

.carousel('cycle')

从左向右循环播放。

.carousel('pause')

中止播放。

.carousel(number)

播放到某个特定的帧(与数组类似，从0开始计数)。

.carousel('prev')

回到上一帧。

.carousel('next')

回到下一帧。

事件

Bootstrap的轮播类提供了两个事件以介入轮播功能。

事件	描述
slide	该事件在调用 slide 实例方法时立刻触发。
slid	该事件在轮播项切换效果完成之后触发。

输入提醒bootstrap-typeahead.js

例子

简单，易于拓展，可迅速地为表单中的文本输入框创建优雅的提醒。

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

---

用法

通过data属性

使用data-属性为一个元素加入输入提醒功能。 如上面例子所示.

通过JavaScript

通过javascript调用输入提醒：

   
   
$('.typeahead').typeahead()

选项

选项的传递可通过数据属性或JavaScript. 对于数据属性, 需要附加选项名称 data-, 如 data-source="".

名称	类型	默认	描述
source	数组 函数	[ ]	查询的数据源. 可以是字符串数组或是函数. 该函数传递两个参数, 在输入字段和过程回调来查询值. 函数可以使用同步返回数据源或通过异步过程回调单一参数.
items	数字	8	下拉列表中的最多显示个数。
minLength	数字	1	触发提示前所需的最小字符长度.
matcher	函数	不区分大小写	该matcher函数用于决定某个查询是否匹配某个项。 它接受唯一一个参数， item ，用于测试是否符合查询。 通过 this.query 访问当前查询，如果匹配查询，就返回一个布尔值 true 。
sorter	函数	精确匹配， 区分大小写， 不区分大小写	该函数用来排序自动完成的结果。 它接受唯一一个参数 items ，还拥有输入提醒的范围。使用 this.query 引用当前查询。
updater	函数	返回选定的项目.	该函数用来返回选定的项目。它接受唯一一个参数 items，可以返回预先选定的内容。
highlighter	函数	高亮所有默认的匹配	该函数用来高亮自动完成的结果。 它接受唯一一个参数 item ，还拥有输入提醒的范围。应该返回html。

方法

.typeahead(options)

使用输入提醒初始化一个输入框。

附加导航bootstrap-affix.js

例子

子导航, 正如左边的导航所示.

---

用法

通过data属性

添加附加导航很简单, 只需把 data-spy="affix" 添加到你想监视的元素上. 然后使用偏移量来确定一个元素的开和关.

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

注意!你必须管理一个固定元素的位置和它的父级的行为. 通过 affix , affix-top, 和 affix-bottom 进行位置控制. 因为它的正常流程是通过页面的内页移动来确定的, 所以使用该插件时, 要检查一下父级是否是切换模式.

通过JavaScript

通过javascript调用：

   
   
$('#navbar').affix()

选项

选项的传递可通过数据属性或JavaScript. 对于数据属性, 需要附加选项名称 data-, 如 data-offset-top="200".

名称	类型	默认	描述
offset	数值|函数|对象	10	计算从顶部到滚动的位置的偏移(像素). 如果设置了一个数字, 该偏移量的值将被应用在顶部和左方向. 如果要设置一个方向或者多个方向的偏移量, 只需提供一个对象offset: { x: 10 }. 该函数可以让你动态的提供一个偏移量(对于一些响应式设计 很有用).