辅助类

第 3 章　 Bootstrap 内置的布局组件

3.15　其他组件

3.15.2　辅助类

要想把元素浮动到容器右侧，使用.pull-right类：

&:before, &:after {

第 4 章

Bootstrap支持的JavaScript插件

第3 章介绍的组件只是个开始。在此基础上，Bootstrap 还附带了 13 个 jQuery 插件，用于扩展网站的功能、丰富用户体验。要使用 Bootstrap 的JavaScript 插件不必非得是 JavaScript 高手。事实上，利用 Bootstrap 的Data API，大多数插件无需编写一行代码就可以触发。

4.1　概述

Bootstrap 有两种形式，一种是编译后的，一种是原始格式。Bootstrap 2.2.2 未经压缩的版本是 59 KB，而压缩之后的版本只有 32 KB。所有 Bootstrap 的插件都可以使用内置的 Data API 访问。有了 Data API，

不需要写JavaScript 代码，就能为网页添加插件。

一般来说，JavaScript 代码都保存在单独的文件中，或者放在页面

如前所述，Bootstrap 提供了可以嵌入 HTML 元素中作为数据属性的

Data API。如果想解除对数据属性的绑定，可以使用以下 JavaScript

Bootstrap 的开发者希望用户通过 JavaScript API 使用所有插件。所有公开的API 都是单个可连缀的方法，返回操作的元素集合：

$('.btn.danger').button('toggle').addClass('active')

所有方法都可以接受一个可选的选项对象、一个表示要调用的方法的字符串，或者什么参数也不接受（表示初始化插件的默认行为）：

$("#myModal").modal() // 初始化默认功能

$("#myModal").modal({ keyboard: false }) // 初始化不支持键盘

的上下文。这种子窗口可以展示信息、提供交互，等等。我一般使用模态框来盛放幻灯片或登录/ 注册信息。这个插件差不多是我喜欢的 Bootstrap 插件了。

要创建静态的模态框，使用以下代码：

<button type="button" class="close" data-dismiss="modal" aria-hidden=

"true">×</button>

<h3>Modal header</h3>

</div>

</div>

<a href="#" class="btn">Close</a>

<a href="#" class="btn btn-primary">Save changes</a>

</div>

图4-1：静态的模态框

要打开模态框，必须有一个触发装置。我一般会使用按钮或链接，在下面代码的<a>标签中，href="myModal"表示你要在页面上加载的模态框。可以在同一个页面上创建多个模态框，并为它们都准备一个触发装置。当然，多个模态框不一定同时都加载到页面中，可以根据需要临时向页面中加载。

关于模态框，重点要关注3 个类。第一个是.modal，它只用来把一个

<div>标注为模态框。第二个是.hide，这个类告诉浏览器先把模态框

隐藏起来，在用户单击触发装置时再显示。最后一个是.fade，这个类会导致模态框从无到有或从有到无时，以淡入淡出的效果呈现。

Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"

aria-labelledby="myModalLabel" aria-hidden="true">

<button type="button" class="close" data-dismiss="modal"

aria-hidden="true">×</button>

<h3 id="myModalLabel">Modal header</h3>

</div>

</div>

<button class="btn" data-dismiss="modal"

aria-hidden="true">Close</button>

<button class="btn btn-primary">Save changes</button>

</div>

4.3.1　用法

使用Bootstrap 的 JavaScript Data API，只要设置几个数据属性，就可实现模态框的调用。为此，在作为开关的链接或按钮上设置 data-toggle="modal"，再把data-target="#foo"设置为模态框的ID。

要通过JavaScript 调用id="myModal"的模态框，只需一行代码：

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

4.3.2　选项

选项可以通过数据属性传入也可以通过JavaScript 传入。要使用数据属性，请在选项名称前加上data-（如data-backdrop=""）。表4-1 列出了模态框的一些选项及说明。

表4-1　模态框的选项

名　称类　型默认值说　　明

backdrop Boolean true 包含模态框背板元素。如果不想单击背板关闭模态框，

为这个数据属性指定 static

keyboard Boolean true 按Esc 键关闭模态框

show Boolean true 初始状态下模态框是否可见

remote URL false

如果提供了远程URL，内容将通过 jQuery 的 load 方

法加载，然后插入 .modal-body 元素。如果使用的是

数据API，可以使用 href 属性指定远程资源地址，下

面是一个例子：

<a data-toggle="modal" href="remote.html" data-target=

"#modal">click me</a>

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

3．显示

手动打开模态框。

.modal('show').

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

4．关闭

手动关闭模态框。

.modal('hide').

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

4.3.4　事件

Bootstrap 提供了表 4-2 所示的事件，可用于调用函数。

表4-2　模态框事件

事　　件说　　明

show 在实例方法 show 被调用时触发

shown 在模态框已经对用户可见时（CSS 过渡完成后）触发

hide 在实例方法 hide 被调用时触发

hidden 在模态框已经对用户不可见时（CSS 过渡完成后）触发

下面这个例子是在模态框关闭后弹出一个警告框：

$('#myModal').on('hidden', function () {

alert('Hey girl, I heard you like modals...');

})

4.4　下拉菜单

第3 章详细介绍过下拉菜单，但并没有提到下拉菜单的交互功能。我们知道，下拉菜单可以放在导航条、胶囊形导航、标签形导航和按钮导航中。

4.4.1　用法

要使用下拉菜单（见图4-2），给一个链接或按钮添加data-toggle=

"dropdown"属性，以便能够通过它打开下拉菜单。

图4-2：导航条中的下拉菜单

以下是创建带有数据属性的下拉菜单的代码：

<a href="#" id="drop" role="button" class="dropdown-toggle"

data-toggle="dropdown">Word <b class="caret"></b></a>

<li><a tabindex="-1" href="#">MAKE magazine</a></li>

<li><a tabindex="-1" href="#">WordPress DevelopmentS</a></li>

<li><a tabindex="-1" href="#">Speaking Engagements</a></li>

<li><a tabindex="-1" href="#">Social Media</a></li>

</ul>

</li>

如果你想让链接任何时候都可以打开（比如在JavaScript 无效时也能打开），就用data-target="#"代替href="#"，并给href属性指定链接：

<a class="dropdown-toggle" id="dLabel" role="button"

data-toggle="dropdown" data-target="#" href="/page.html">

Dropdown

</a>

...

</ul>

</div>

4.4.2　通过JavaScript使用下拉菜单

要通过JavaScript 调用下拉菜单，使用如下代码：

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

4.4.3　方法

有一个简单的方法可以在代码里打开或隐藏下拉菜单，没有选项：

$().dropdown('toggle')

4.5　滚动监控器

Scrollspy 插件（见图 4-3）可以根据滚动位置更新导航链接。在静态实现中，可以根据滚动位置给导航条添加.active类。要通过数据属性添加Scrollspy 插件，把data-spy="scroll"添加给要“监控”（spy）

的元素（通常是页面主体），把data-target=".navbar"设置为要根据滚动改变类的滚动条。另外，被监控的元素中还要有对应的元素，其 ID 与导航条链接的引用目标一致。

图4-3：滚动监控示例

4.5.1　用法

如果要监控页面主体，需要给<body>标签添加data-spy= "scroll"，以及一个data-target=".navbar" 属性，当然这个data-target指向显示导航链接的导航条：

在导航条中，需要让每个链接都充当页面中锚点（ID）的指示器

（href）：

<li><a href="#chicken">Chicken</a></li>

</ul>

</div>

</div>

</div>

</div>

通过 JavaScript使用

如果不是通过数据属性，而是要通过JavaScript 来调用滚动监控插件，

首先要选择作为指示器的滚动条，然后调用.scrollspy()函数：

$('#navbar').scrollspy()

4.5.2　 .scrollspy('refresh') 方法

在通过JavaScript 调用滚动监控插件时，需要调用 .scrollspy

('refresh')方法更新DOM。这样可以反映最新 DOM 结构。

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

4.5.3　选项

选项可以通过数据属性或JavaScript 设置。在使用数据属性时，要给选项名称前面加上data-前缀，比如data-offset=""（见表4-3）。

表4-3　滚动监控器选项

名　称类　型默认值说　　明

offset number 10 计算滚动位置时距离顶部的偏移量

在使用固定导航条的情况下，offset选项是很有用的。为正确计算滚动位置，应该将这个选项设置为50 像素左右（见表 4-4）。

4.5.4　事件

表4-4　滚动监控器事件

事　　件说　　明

activate 滚动监控器激活新项时触发

4.6　可切换的标签页

第3 章介绍了可切换的标签导航。通过组合一些数据属性，很容易创建标签页式界面（见图4-4）。为此，先创建一个.nav用于导航，然后再把标签页的内容包装在类为.tab-content的<div>中：

<li><a href="#proﬁle" data-toggle="tab">Proﬁle</a></li>

<li><a href="#messages" data-toggle="tab">Messages</a></li>

<li><a href="#settings" data-toggle="tab">Settings</a></li>

</ul>

</div>

图4-4：可切换的标签页

4.6.1　用法

要在页面中启用标签页，可以使用Bootstrap 的 Data API，也可以直接使用JavaScript。使用 Data API 的情况下，需要给链接添加

data-toggle属性，然后就可以按照链接的href属性，激活带.tab-pane类

和相关ID 的元素。此外，用data-target=""取代href="#"也可以实现同样的功能。

以下是通过JavaScript 激活标签页的代码：

$('#myTab a').click(function (e) { e.preventDefault();

$(this).tab('show');

})

以下是切换到个别标签页的不同方式：

$('#myTab a[href="#proﬁle"]').tab('show'); // 按照名称选择标签页

$('#myTab a:ﬁrst').tab('show'); // 选择第一个标签页

$('#myTab a:last').tab('show'); // 选择最后一个标签页

$('#myTab li:eq(2) a').tab('show'); // 选择第三个标签页（索引0 为第一个）

4.6.2　事件

标签页有两个事件，如表4-5 所示。

表4-5　可切换的标签页事件

事　件说　　明

show 在标签显示但显示完之前触发。使用 event.target 和 event.relatedTarget

可以取得当前和之前活动的标签页

shown 在标签显示且显示完之后触发。使用 event.target 和 event.relatedTarget

可以取得当前和之前活动的标签页

以下是使用shown事件的例子：

$('a[data-toggle="tab"]').on('shown', function (e) { e.target // 当前活动的标签页

e.relatedTarget // 之前活动标签页 })

要了解.on方法的细节，请参考jQuery 的网站（http://api.jquery.

com/on/）。

4.7　提示条

提示条（见图4-5）可以用来给出链接说明或（与标签连用）给出缩写词的的全称。这个插件最初的原型是Jason Frame 的 jQuery.tipsy 插件。但目前这个提示条利用Bootstrap JavaScript API 可以不使用图片，而且有CSS 动画。

图4-5：提示条的位置

4.7.1　用法

给<a>元素添加rel="tooltip"就可以添加提示条，<a>元素的title 属性值就是提示条的内容。下面两个例子分别使用Bootstrap Data API 和JavaScript 来创建提示条：

<a href="#" rel="tooltip" title="This is the tooltip">Tooltip Example</a>

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

4.7.2　选项

与其他插件一样，提示条也可以通过Data API 或 JavaScript 来设置。

只不过在使用数据属性时，选项名称前面要加上data-，比如title就要变成data-title（见表4-6）。

表4-6　提示条选项

名　称类　型默认值说　　明

animation Boolean true 为提示条应用CSS 的淡入淡出过渡

在文檔中用户手册 (頁 99-0)

第 3 章 Bootstrap 内置的布局组件

3.15 其他组件

3.15.2 辅助类

第 4 章

Bootstrap支持的JavaScript插件

4.1 概述

4.3.1 用法

4.3.2 选项

3．显示

4．关闭

4.3.4 事件

4.4 下拉菜单

4.4.1 用法

4.4.2 通过JavaScript使用下拉菜单

4.4.3 方法

4.5 滚动监控器

4.5.1 用法

通过 JavaScript使用

4.5.2 .scrollspy('refresh') 方法

4.5.3 选项

4.5.4 事件

4.6 可切换的标签页

4.6.1 用法

4.6.2 事件

4.7 提示条

4.7.1 用法

4.7.2 选项

第 3 章　 Bootstrap 内置的布局组件

3.15　其他组件

3.15.2　辅助类

4.1　概述

4.3.1　用法

4.3.2　选项

4.3.4　事件

4.4　下拉菜单

4.4.1　用法

4.4.2　通过JavaScript使用下拉菜单

4.4.3　方法

4.5　滚动监控器

4.5.1　用法

4.5.2　 .scrollspy('refresh') 方法

4.5.3　选项

4.5.4　事件

4.6　可切换的标签页

4.6.1　用法

4.6.2　事件

4.7　提示条

4.7.1　用法

4.7.2　选项