JavaScript

现在带来13个jQuery插件, 让Bootstrap的组件更具生命力.

单独或整体

插件可以单独被添加(有些有可能需要依赖), 或一次性全部导入. bootstrap.jsbootstrap.min.js 文件中, 包含了所有插件.

数据属性

你可以通过API的标记使用所有Bootstrap插件, 而无需编写单行的JavaScript. 这是Bootstrap最好的API, 并这是使用插件时, 应该是你首先要考虑的.

也就是说, 在某些情况下, 应该要把这项功能关闭. 因此, 我们还提供了禁用数据属性的能力, 就是解除命名空间为 `'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.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>来自XieMin博客的消息</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">来自XieMin博客的消息</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">Launch modal</button>

使用JavaScript

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

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

选项

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

名称 类型 默认 描述
backdrop boolean true 包括一个对话框背景元素. 另外 static(false情况) 背景下, 点击对话框外的区域不会关闭对话框.
keyboard boolean true 按下esc键时关闭对话框.
show boolean 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 对话框已呈现完毕时触发.
hide hide实例被调用, 此事件会立即触发.
hidden 对话框已隐藏完毕时触发.
$('#myModal').on('hidden', function () {
  // do something…
})

使用在导航的例子

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

@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-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-offset="".

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

事件

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

例子

通过不同的内容的过渡, 添加快速, 动态标签功能. 甚至还可以通过下拉菜单实现.

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.

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.


用法

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

标记

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

方法

$().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>

事件

事件 描述
show 事件在标签显示触发. 使用 event.targetevent.relatedTarget 分别来定位当前活动标签和上一个选择的标签(如果有的话).
shown 事件在标签显示完毕时触发. 使用 event.targetevent.relatedTarget 分别来定位当前活动标签和上一个选择的标签(如果有的话).
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // 当前活动的标签
  e.relatedTarget // 上一个选择的标签
})

例子

受由Jason Frame开发的优秀jQuery.tipsy插件的启发; 提示工具是一个更好的版本, 它不依赖于图像, 使用CSS3动画和数据属性作为本地数据存储.

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

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

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

拥有四个方向

在input中的提示

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


用法

使用JavaScript:

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

选项

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

名称 类型 默认 描述
animation boolean true 使用CSS的淡入淡出效果
html boolean false 在提示工具插入HTML. 假如是false, jquery的 text 方法将用来插入内容到DOM. 如果担心XSS攻击, 可以使用文本.
placement string | function 'top' 设置方向显示 - top | bottom | left | right
selector string false 如果提供选择器, 提示工具对象将委托给指定的目标.
title string | function '' 假如`title`标签不存在, 将显示默认的标题值.
trigger string 'hover focus' 如何触发提示工具 - click | hover | focus | manual
delay number | object 0

延迟显示和隐藏提示工具(单位为毫秒ms) - 不适用于手动触发类型.

如果提供了一个数字, 那么延迟时间将会同时应用到显示/隐藏.

如果提供的是一个对象, 那么可以: delay: { show: 500, hide: 100 }

container string | false false

把提示工具追加到特定的元素, 如: container: 'body'

注意! 单个提示工具也可以通过使用数据属性指定选项.

标记

<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查看二级信息的效果相像. 将鼠标停悬在按钮上触发提示框. 需要包括 提示工具 .

静态提示框

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

在更薄、更轻的全新 iPod touch 里,无穷乐趣已融入其毫厘之间。从玩游戏、播放音乐到尽情玩乐,iPod touch 能做的比以往更多,而且更强大。在 4 英寸 Retina 显示屏上,一切看起来都美妙绝伦。

在更薄、更轻的全新 iPod touch 里,无穷乐趣已融入其毫厘之间。从玩游戏、播放音乐到尽情玩乐,iPod touch 能做的比以往更多,而且更强大。在 4 英寸 Retina 显示屏上,一切看起来都美妙绝伦。

在更薄、更轻的全新 iPod touch 里,无穷乐趣已融入其毫厘之间。从玩游戏、播放音乐到尽情玩乐,iPod touch 能做的比以往更多,而且更强大。在 4 英寸 Retina 显示屏上,一切看起来都美妙绝伦。

在更薄、更轻的全新 iPod touch 里,无穷乐趣已融入其毫厘之间。从玩游戏、播放音乐到尽情玩乐,iPod touch 能做的比以往更多,而且更强大。在 4 英寸 Retina 显示屏上,一切看起来都美妙绝伦。

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

演示

四个方向


用法

使用JavaScript:

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

选项

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

名称 类型 默认 描述
animation boolean true 使用CSS的淡入淡出效果
html boolean false 在提示框插入HTML. 假如是false, jquery的 text 方法将用来插入内容到DOM. 如果担心XSS攻击, 可以使用文本.
placement string | function 'right' 设置方向显示- top | bottom | left | right
selector string false 如果提供选择器, 提示框对象将委托给指定的目标.
trigger string 'click' 如何触发提示工具 - click | hover | focus | manual
title string | function '' 假如`title`标签不存在, 将显示默认的标题值.
content string | function '' 假如`data-content`属性不存在, 将显示默认内容值.
delay number | object 0

延迟显示和隐藏提示框(单位为毫秒ms) - 不适用于手动触发类型.

如果提供了一个数字, 那么延迟时间将会同时应用到显示/隐藏.

如果提供的是一个对象, 那么可以: delay: { show: 500, hide: 100 }

container string | false false

把提示框追加到特定的元素, 如: container: 'body'

注意! 单个提示框也可以通过使用数据属性指定选项.

标记

出于性能方面的考虑, 提示工具和提示框的data-apis默认是加入的. 假如你想使用他们, 只需指定一个选择器选项.

方法

$().popover(options)

初始化提示框的元素集合

.popover('show')

显示提示框.

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

.popover('hide')

隐藏提示框.

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

.popover('toggle')

切换提示框.

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

.popover('destroy')

隐藏和摧毁提示框.

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

例子

在通知插件添加关闭功能.

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

错误!

该页面404了.

换个页面试试 取消


用法

使用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 通知已关闭完毕时触发.
$('#my-alert').bind('closed', function () {
  // do something…
})

例子

让按钮做的更多. 控制按钮的状态或创建更多组件, 如工具栏的按钮组.

状态式

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

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

<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">左</button>
  <button type="button" class="btn btn-primary">中</button>
  <button type="button" class="btn btn-primary">右</button>
</div>

用法

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

关于

给折叠的组件, 如手风琴式的切换和导航, 提供基本灵活的样式.

* 需要包含过渡插件

例子

使用切换插件, 我们创建一个简单的手风琴式的切换部件:

iPod shuffle 色彩缤纷,戴上身就走。现有按键、VoiceOver 与播放列表功能,将几代 iPod shuffle 精华融为一体。由于主体由一块铝金属精密打造,因此 iPod shuffle 不仅手感坚实、外形精致,而且经久耐用。多彩的颜色让它成为绝好的时尚配饰。
全新 iPod nano 薄度仅为 5.4 毫米,几乎如信用卡般大小,比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍,因此,你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲,也可调节音量。平滑的全新电镀铝金属设计,令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目,难以取舍的缤纷色彩,iPod nano 也就不是 iPod nano 了。
这是第一次,iPod touch 采用与 MacBook 产品线同类型的电镀铝金属打造而成。其制造工艺也如出一辙:使用一整块铝金属打造机身。而你对 iPod touch 的第一印象,将是它那几乎可以忽视的重量,接着是极其光滑的表层做工,然后是所有 Apple 独有的细节,如高度抛光的斜面边缘。iPod touch 采用硬度极高的一种铝金属制成。这不仅为其带来令人赞叹的外观和触感,它还足够坚固,能伴你度过许多狂欢之夜。
<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">
        iPod shuffle
      </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">
        iPod nano
      </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-toggle="collapse"data-target 就能实现一个可折叠的元素. data-target 属性接受一个CSS选择器. 确保在可折叠元素上添加 collapse 属性. 如果你想它默认是打开的, 可以再添加一个 in 属性.

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

使用JavaScript

手动调用:

$(".collapse").collapse()

选项

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

名称 类型 默认 描述
parent selector false 如果选择了某个选择器, 那么当有可折叠项要显示时, 所有可折叠的元素会根据规定的父级元素而关闭. (类似传统手风琴式折叠的行为)
toggle boolean true 切换可折叠的元素.

方法

.collapse(options)

内容以一个可折叠元素激活. 接受一个object的可选选项.

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

.collapse('toggle')

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

.collapse('show')

显示可折叠元素.

.collapse('hide')

隐藏可折叠元素.

事件

Bootstrap的切换类提供了一些事件和通知功能挂钩.

事件 描述
show show实例被调用, 此事件会立即触发.
shown 对话框已呈现完毕时触发.
hide hide实例被调用, 此事件会立即触发.
hidden 对话框已隐藏完毕时触发.
$('#myCollapsible').on('hidden', function () {
  // do something…
})

例子

一个基本的, 易于扩展的插件, 用于快速创建优雅的文字输入提醒.

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

你要设置autocomplete="off"以防止浏览器的默认菜单出现在输入提醒的下拉菜单.


用法

使用数据属性

添加一个数据元素注册一个具有输入提醒功能的元素. 如上面例子所示.

使用JavaScript

手动调用:

$('.typeahead').typeahead()

选项

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

名称 类型 默认 描述
source array, function [ ] 查询的数据源. 可以是字符串数组或是函数. 该函数传递两个参数, 在输入字段和过程回调来查询值. 函数可以使用同步返回数据源或通过异步过程回调单一参数.
items number 8 下拉列表中显示的最大的项目数.
minLength number 1 触发提示前所需的最小字符长度.
matcher function case insensitive 查询匹配项.
sorter function exact match,
case sensitive,
case insensitive
输入提示的排序.
updater function returns selected item 返回选定的项目.
highlighter function highlights all default matches 高亮提示的结果.

方法

.typeahead(options)

把输入框初始化具有输入提示功能.

例子

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


用法

使用数据属性

添加附加导航同意简单, 只需把 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 number | function | object 10 计算从顶部到滚动的位置的偏移(像素). 如果设置了一个数字, 该偏移量的值将被应用在顶部和左方向. 如果要设置一个方向或者多个方向的偏移量, 只需提供一个对象offset: { x: 10 }. 该函数可以让你动态的提供一个偏移量(对于一些响应式设计很有用).