Bootstrap

Bootstrap的Javascript

让Bootstrap的组件变得生动—提供了12种 jQuery 组件。

jQuery插件 12个Bootstrap插件的简短介绍

强调！ 所有的javascript插件都需要最新版本的jQuery支持。

对话框 bootstrap-modal.js

模态对话框介绍

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

Download file

静态的例子

下面就是一个静态渲染的模态对话框。

×

对话框标题

天朝，你好....

关闭 保存更改

动态的例子

点击下的按钮会通过javascript触发一个模态对话框。对话框从页面顶端滑下的同时逐渐呈现。

点击演示

使用 bootstrap-modal

通过javascript调用模态对话框：

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

选项(options)

$('#myModal').modal({
    backdrop:true,
    keyboard:true,
    show:true
});
名称 类型 默认 描述
backdrop 布尔值 true 为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。点击演示
为false时，无背景。点击演示
keyboard 布尔值 true 为true时按下ESC键关闭模态对话框。点击演示
为false时无效。点击演示
show 布尔值 true 是否在初始化时显示对话框。

标记

我们无须手写javascript即可在页面中触发对话框。只要在某个激发元素上设置 data-toggle="modal" ，然后将 data-target="#foo" 或 href="#foo" 设为某个对话框元素的id，这样点击激发元素就会弹出对话框。 

<a class="btn" data-toggle="modal" href="#myModal" >点击触发对话框</a>

如果需要带选项的对话框，可以在激发元素或是对话框元素的data-属性中设置选项值。 点击"无ESC关闭，无遮蔽背景"演示 

<a class="btn" data-toggle="modal" href="#myModal"  data-keyboard="false" data-backdrop="false" >点击"无ESC关闭，无遮蔽背景"演示</a>

<div class="modal" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <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>
强调！ 要实现对话框显示与消隐时的动画效果，必须包含 bootstrap-transition.js.，再对 .modal 元素应用 .fade ，即可实现淡入淡出。

方法

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

滚动侦测会根据当前滚动条位置而自动更新导航栏中的链接状态。

下载文件

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

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

红利

中方向美方承诺提高国有企业红利上缴比例，增加上缴利润的中央国企和省级国企的数量，将国有资本经营预算纳入国家预算体系。还承诺，鼓励包括国有公司在内的上市公司增加红利支付。还承诺在信贷提供、税收优惠和监管政策等方面对各类所有制企业一视同仁。

美方认为，提高国有企业分红比例带来的收入可用于资助政府的社保和养老开支，从而有可能降低中国人大量储蓄的必要性，让他们提高消费支出，从而达到刺激中国内需的目的。

哈芬

据估，中国高铁槽道市场约十几亿元，德国哈芬占70%。业内人士称，中铁设计院的铁道图纸，直接指定使用哈芬，而非技术标准。哈芬在德国使用成本高昂的不锈钢，在中国则是碳钢。更有业内人士证实，目前中国高铁用的实为国内生产，原产几乎不足四分之一。（财新）

遛狗

近日，拍摄于四川绵阳街头的一张照片引起热议，一辆在路上行驶的法院警车，车窗里伸出一个宠物狗的脑袋，四处张望。此情景被怀疑是公务人员私用警车带宠物狗兜风。经调查得知，这是我国新近引进的一批特殊品种警犬，为麻痹犯罪分子，故意化妆成宠物狗的样子。

失踪

4月25日，19岁的韩耀在云南省昆明市晋宁县晋城镇南门村鑫云冷库附近失踪。家属在寻找时，竟然发现这一区域已先后有8名青少年失踪，其中近一年内就有6人。有一名青年雷玉生就在此地的大街上被人拖进了一面包车，被扔进黑砖窑强迫劳动，后逃离黑砖窑重获自由。

耳光

30多岁女人直接吐东西在刚扫过的地上，环卫大姐上去说了两句，结果挨了三巴掌三脚。见到被打的环卫大姐时，她精神不好，坐在凳子上不说话，左脸的伤痕还很显眼，工友在一旁照料她。2012年5月4日，浙江省，杭州市。

尹大姐说：“小孩子都知道不能在街上乱吐。”那女人说：那不就是你们环卫应该做的事情吗？尹大姐说：难道我们环卫工人就低人一等吗？”话音刚落，“啪”“啪”“啪”三个巴掌落在尹大姐脸上。

使用bootstrap-scrollspy.js

通过javascript调用滚动侦测：

$('#navbar').scrollspy()

标记

在想侦测的元素(往往是body)上添加 data-spy="scroll" 就很容易在置顶导航条上实现滚动侦测。 

<body data-spy="scroll" >...</body>
强调！ 导航条链接必须指向一个可解析的元素id。举个例子，导航中的 <a href="#home">home</a> 必须对应着dom中一个真实存在的id='home'元素，比如 <div id="home"></div> 。

选项

名称 类型 默认 描述
offset 数字 10 计算滚动位置时相对顶端的偏移量

可切换的标签页 bootstrap-tab.js

该插件通过点击标签页和胶囊链接切换显示不同容器中的内容。

下载文件

标签页例子

点击下面的标签(包括下拉菜单项)切换显示不同面板中的内容。

5月6日，北京，一对新人启用直升机接亲。该直升机是欧洲直升机公司系列，机型为AS350B3，该公司北京唯一可承接低空飞行业务的航空公司，此次为首次承接婚礼。据悉，首次空中婚礼总费用为5万元。定价包括飞行时间和申报审批等费用，飞行时间按照1小时3万元计算。

法国代表社会党参选的奥朗德今晨在大选中获得胜利，成为法兰西第五共和国第七位总统，法国也在17年之后迎来首位左翼总统。萨科齐在5年任内因政绩不佳引发不满，选前处于民调落后的劣势。萨科齐虽试图打造“危机总统”形象，但终未能实现逆转。奥朗德现年58岁，至今未婚，与社会党前总统选举候选人罗亚尔同居30多年，育有4子女，多年来坚持骑车上下班。对华关系持强硬立场。

使用bootstrap-tab.js

通过javascript启动可切换的标签页：

$('#myTab').tab('show')

标记

在某个元素上设置 data-toggle="tab" 或 data-toggle="pill" 而无须编写javascript，就可以激活标签页或是胶囊链接 

<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='#id' 或 href='#id' 属性以指向dom中的某个容器节点。 

<ul class="nav nav-tabs">
  <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 () {
    $('.tabs 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 // activated tab
  e.relatedTarget // previous tab
})

工具提示 bootstrap-tooltip.js

工具提示介绍

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

下载文件

工具提示的用例

鼠标经过下面链接时显示工具提示：

“这是我的第一次英文访问,很抱歉它不够严谨,但是我不得不这么做,不只因为采访时间限制，更因为我面对的是卡梅隆，这个人喜爱挑战、从无畏惧，他也希望别人如此，他可以原谅不完美，但他无法接受一个人不去努力接近自己的极限。” ——柴静《看见》专访卡梅隆

使用bootstrap-tooltip.js

通过javascript触发工具提示：

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

选项

名称 类型 默认 描述
animation 布尔值 true 为工具提示添加一个淡入的过渡。
placement 字符串或函数 'top' 工具提示的位置：top | bottom | left | right。
selector 字符串 false 如果提供了selector，将对符合条件的某个或多个元素启用工具提示。
title 字符串或函数 '' 如果'title'属性不存在的话，就使用该值做为默认的标题。
trigger 字符串 'hover' 工具提示的触发方式：鼠标经过(hover) | 获得焦点(focus) | 手动触发(manual)
delay 数字或对象 0

显示和隐藏时的延迟时间(以毫秒计)

如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。

如果是一个对象，其结构就是: delay: { show: 500, hide: 100 }
强调！ 每个工具提示都可以单独通过设置data-属性以实现与javascript调用同样的功能

标记

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

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

方法

$().tooltip(options)

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

.tooltip('show')

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

弹出提示 bootstrap-popover.js

弹出提示介绍

与iPad上的效果类似，把存放输助信息的元素显示为弹出框提示。

* 需要包含 Tooltip 。

下载文件

鼠标经过时的弹出提示例子

鼠标经过按钮时切换弹示提示的显示/隐藏。

鼠标经过弹出提示

使用 bootstrap-popover.js

使用javascript启用弹出提示：

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

选项

名称 类型 默认 描述
animation 布尔值 true 为弹出提示添加一个淡入的过渡。
placement 字符串或函数 'right' 弹出提示的位置：top | bottom | left | right。
selector 字符串 false 如果提供了selector，将对符合条件的某个或多个元素启用工具提示。
trigger 字符串 'hover' 弹出提示的触发方式：鼠标经过(hover) | 获得焦点(focus) | 手动触发(manual)
title 字符串或函数 '' 如果元素没有指定'title'属性，就使用该值做为默认的标题。
content 字符串或函数 '' 如果元素没有指定'data-content'属性，就使用该值做为默认的内容。
delay 数字或对象 0

显示和隐藏时的延迟时间(以毫秒计)

如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。

如果是一个对象，其结构就是: delay: { show: 500, hide: 100 }
强调！ 每个弹出提示都可以单独通过设置data-属性以实现与javascript调用同样的功能

标记

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

方法

$().popover(options)

对某个元素集合添加弹出提示。

.popover('show')

显示某个元素的弹出提示。 

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

.popover('hide')

隐藏某个元素的弹出提示。 

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

.popover('toggle')

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

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

通知消息 bootstrap-alert.js

通知消息介绍

通知插件使用轻巧的类以实现关闭通知框的功能。

下载文件

通知的的例子

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

× 警告！ 在贵国遵守宪法就要违反刑法。
×

微博控们注意了！

出游微博晒幸福时，最好不要泄露出游时间、人数，别泄露住址，谨慎晒出游照片，以免让贼判断出你家是否有人。因为小偷说不定会盯上你的微博，“随着微博的发展，贼也很时尚啊！”

接受建议 不当回事

使用 bootstrap-alert.js

通过javascript触发通知：

$(".alert").alert()

标记

只须对关闭按钮添加 data-dismiss="alert" 就会自动实现一个通知的关闭功能。 

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

方法

$().alert()

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

.alert('close')

关闭通知

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

事件

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

事件 描述
close 在调用 close 方法时立刻触发。
closed 在通知已经关闭后（等待css过渡效果完成）触发。 
$('#my-alert').bind('closed', function () {
  // do something…
})

按钮 bootstrap-button.js

按钮介绍

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

下载文件

例子

使用按钮插件触发开关和更改状态。

状态
单独开关
复选
单选

使用 bootstrap-button.js

通过javascript触发按钮：

$('.tabs').button()

标记

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

<!-- Add data-toggle="button" to activate toggling on a single button -->
<button class="btn" data-toggle="button">单独开关</button>

<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
<div class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
</div>

<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group -->
<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
</div>

方法

$().button('toggle')

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

强调！ 可以使用 data-toggle 属性自动设置按钮状态。 
<button class="btn" data-toggle="button" >…</button>

$().button('loading')

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

<button class="btn" data-loading-text="正在载入..." >...</button>
强调！ Firefox在页面载入时会保持按钮无效状态。 变通方案是在按钮上应用 autocomplete="off" 。

$().button('reset')

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

$().button(string)

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

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

折叠 bootstrap-collapse.js

折叠介绍

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

下载文件

手风琴式应用的例子

使用折叠插件构造手风琴式的边栏：

国土问题
前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
门票问题
目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。
超生罚款
学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。

使用 bootstrap-collapse.js

通过javascript启用：

$(".collapse").collapse()

选项

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

标记

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

<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  简单手风琴效果
</button>

<div id="demo" class="collapse in"> … </div>
强调！ 若要对某个折叠控件添加手风琴风格的分组管理，就要添加 data-parent="#selector" 。详见上面的演示。

方法

.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 () {
  // 做点hidden之后的事情
})

输入提醒 bootstrap-typeahead.js

输入提醒介绍

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

下载文件

例子

在下面的输入框键入字符，观察提醒列表。

使用 bootstrap-typeahead.js

通过javascript调用输入提醒：

$('.typeahead').typeahead()

选项

名称 类型 默认 描述
source 数组 [ ] 用于查询的数据源。
items 数字 8 下拉列表中的最多显示个数。
matcher 函数 不区分大小写 该matcher函数用于决定某个查询是否匹配某个项。 它接受唯一一个参数， item ，用于测试是否符合查询。 通过 this.query 访问当前查询，如果匹配查询，就返回一个布尔值 true 。
sorter 函数 精确匹配，
区分大小写，
不区分大小写		 该函数用来排序自动完成的结果。 它接受唯一一个参数 items ，还拥有输入提醒的范围。使用 this.query 引用当前查询。
highlighter 函数 高亮所有默认的匹配 该函数用来高亮自动完成的结果。 它接受唯一一个参数 items ，还拥有输入提醒的范围。应该返回html。

标记

使用data-属性为一个元素加入输入提醒功能。

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

方法

.typeahead(options)

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