JavaScript插件

Bootstrap自带了13个jQuery插件,这可以让Bootstrap的组件更具生命力.

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

每个插件都可以单独的引入到页面中(通过某些方式控制插件间的依赖关系),或者一次性引入。bootstrap.jsbootstrap.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.js, 就不需要再加入该文件, 因为bootstrap.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 标签指定远程源. 如下所示:

js方式载入一 js方式载入二 data_方式载入一
<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…
})

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

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

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

@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 事件在每个新的项目被激活的时候触发.

例子

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

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.


用法

通过data属性

你可以无需写任何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>

通过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-targethref 属性以指向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 // 上一个选择的标签
})

例子

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

出于性能方面的考虑, 提示工具和提示框的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选项(文档下面有说明).


用法

通过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')

下面这个例子是非官方文档的

例子

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

静态提示框

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

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

例子

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

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

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

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>

例子

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

状态式

在按钮添加 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>
注意! Firefox在页面载入时会保持按钮无效状态。 变通方案是在按钮上应用 autocomplete="off"

$().button('reset')

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

$().button(string)

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

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

关于

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

* 需要包含过渡插件.

例子

使用插件构造手风琴式的边栏:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<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…
})

例子

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

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

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

例子

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


用法

通过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 }. 该函数可以让你动态的提供一个偏移量(对于一些响应式设计很有用).