TWB 的 JavaScript 特性都是建立在 jQuery 之上的扩展。它们中的大多数都可以简单地通过使用你在本书中已经看到的各种“数据”属性来使用。不幸的是，在 100 页中没有足够的空间来完整地从上到下覆盖 CSS 框架和 JavaScript 框架。因此，在这一章中，我将只挑选最常用的功能。
然而，我强烈建议你从头到尾阅读推特 Bootstrap 文档中的 JavaScript 部分。我可以保证，在这本电子书中，我所能容纳的页面将远远不止这些。
2.3.2 文档的页面目前可以在http://getbootstrap.com/2.3.2/javascript.html找到，但请注意这可能会改变。
正如我在书的开头评论的那样，第三版即将问世。我还不知道作者们对 2.3.2 分支有什么计划。
如前所述，TWB 广泛使用数据属性来实现其无代码魔法。此外，虽然数据属性 API 很棒，但有时您可能会发现需要关闭它，尤其是当您使用的其他工具包不能很好地与框架或 jQuery 配合使用时。
如果您需要关闭数据应用编程接口，您可以通过使用顶级块元素(如“”)为整个文档关闭数据应用编程接口，只需执行以下操作:
$('body').off('.data-api')如果您不想关闭整个数据应用编程接口，也不必关闭。但是，如果您只想关闭它的一部分，只需使用您想要关闭的部分的名称空间即可:
$('body').off('.alert.data-api')这将只关闭警报组件的数据应用编程接口。
除了数据应用编程接口，TWB 还有一个编程应用编程接口。就像 jQuery 中的其他东西一样，可以流畅地访问和使用这个。例如，要显示您定义的模式，您可以使用以下内容:
$('#myDialog').modal('show')或者，您可以按如下方式切换按钮状态:
$('#okButton').button('toggle')当我介绍实际的 JavaScript 组件时，您很快就会看到更多的例子。
像任何好的 JavaScript 库一样，TWB 还包括一个无冲突选项，允许事情与其他工具包(如 Prototype 和 Dojo)协调工作。
您可以非常容易地打开和关闭特定组件上的冲突系统，如下所示:
var bsButton = $.fn.button.noConflict()var 的原因是，如果您希望，您可以在以后再次关闭它:
$.fn.button = bsButton需要了解的基础知识的最后一部分是 Twitter Bootstrap 使用的事件结构。
TWB 事件通常分为两部分。第一个事件意味着某事即将发生，第二个事件意味着某事已经发生。
例如，模式可以生成“显示”事件，随后是“显示”事件，或者按钮可以生成“点击”事件，随后是“点击”事件。
任何事件都可以通过返回“event.preventDefault”来取消，就像使用普通 jQuery 一样，如下所示:
$('#myDialog').on('show', function(event)
{
return event.preventDefault();
}这将阻止 id = "myDialog "引用的模式实际显示:
正如我之前提到的，我们不会涵盖所有这些。但是，为了让您了解可用的内容，这里列出了 Bootstrap 提供的所有 JavaScript 组件的完整列表:
- 过渡
- 模态对话框
- 下拉菜单
- 卷轴间谍
- 制表符
- 工具提示
- 波波夫斯
- 警告框
- 小跟班
- 可折叠部分
- 旋转木马
- 提前打字
- 固定面板
正如您在前面几章中注意到的，我们已经介绍了这个列表中的一些项目。因此，在本书的剩余部分，我们将把我们的描述限制在“模态对话框”、“工具提示”和“弹出窗口”
TWB 最令人印象深刻和易于使用的功能之一是模态对话框组件。
事实上，自从我开始使用它们以来，基于用户界面的警报和输入框的开发变得如此容易，以至于我很少需要考虑它。
像 TWB 提供的许多组件一样，有效地使用模态特性就是正确地构造 HTML 5 代码。
有五个主要的类名用于构造一个模式，所有这些名字都应该按照 div 的特定顺序出现。打开一个新的模板文件，并向其中添加以下正文:
<div class="container-fluid">
<div class="row-fluid">
<div class="page-header">
<h1>Twitter Bootstrap <small>Modal Dialog example</small></h1>
</div>
<div class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>I am some content that sits inside this dialog box</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>代码示例 40:基本模式对话框
如果你保存并加载到你的浏览器中，你会马上注意到你除了标题什么也看不到。
正如您所料，默认情况下模式对话框是隐藏的。如果您从围绕所有内容的主外部 div 中移除 hide 类，您将看到模态出现在页面中。但是，由于它没有正确激活，您将无法使用它做任何事情。
您的外部 div 必须有一个“模态”类，如果您不想让它在您的文档中内联显示，可选的“隐藏”类也是如此。
接下来，您需要用三个类定义三个 div 部分，如下所示:
- "模式标题"
- “模态体”
- "模态页脚"
每个部分都和类定义的一样:页眉、正文和页脚。
在标题中，您会看到我们添加了一个数据关闭按钮，就像我们在警报部分所做的那样。如果你记得的话，在那一节中，我们用了“alert”这个词作为参数。这一次，我们使用“模态”，这样框架就知道我们试图关闭什么元素。
除此之外，其他一切都很标准。如果我们想让关闭按钮关闭我们的对话框，我们可以像上面看到的那样简单地设置它的样式，然后添加一个数据消除属性，就像我们对关闭图标所做的那样。
我们可以从任何我们想要的元素中触发我们的对话框的显示；我们只需要确保带有类“modal hide”的父 div 有一个适合我们作为目标的 ID。
更改代码示例 37 中的以下行:
<div class="modal hide">致:
<div class="modal hide" id="myDialog">然后，在开始 div 标签之前的某个地方，插入一个按钮标签，如下所示:
<a href="#myDialog" class="btn" data-toggle="modal">Open a Modal Dialog</a>如果一切顺利，您刷新页面并单击按钮，您将看到以下内容:
图 83:基本模式对话框示例
正如您将看到的，当您单击按钮时，就此而言，单击关闭按钮，模态会突然出现和消失。如果将可选类“淡入淡出”添加到主父 div(在“模态隐藏”旁边)，您将看到更好的打开和关闭效果。
您也不必使用锚标签来打开模态。可以使用文档中任何可以接受点击的元素；您所要做的就是向组合中添加一个“数据目标”属性，如下所示:
<button class="btn" data-toggle="modal" data-target="#myDialog">Open a Modal Dialog</button>按钮标签可以很容易地是图像、标题、段落或其他任何东西。
你也可以从标准的 JavaScript 中控制模态。您可以使用以下方法将 JSON 对象传递到您的模式中:
$('#myDialog').modal({ … options json here … })定义了以下选项:
- 背景:真、假或静态。如果为真或假，则阴影背景将显示或不显示。如果是静态的，阴影背景将被显示，但防止点击背景关闭模式。
- 键盘:True 或 false 启用或禁用键盘交互。
- 显示:对或错，一旦对话框被激活就显示它，或者隐藏它。
- 远程:如果指定了这一点，那么当对话框打开时，jQuery 将用于从参数中指定的 URL 执行 AJAX 加载，允许您在运行时动态填充您的对话框。
最后，还可以使用以下命令在模态上调用以下方法:
$('#myDialog').modal('… method name here …')为了让模态从外部 JavaScript 做出反应，可用的方法如下:
- 切换:如果对话框是打开的，关闭它，否则打开它。
- 显示:显示对话框，如果已经打开则没有效果。
- 隐藏:关闭对话框，如果已经关闭，则不起作用。
该模式还将触发“显示”、“显示”、“隐藏”和“隐藏”事件，这些事件可以按照本章开头所示进行处理。
不管是喜欢还是讨厌工具提示，工具提示在许多场景中都非常有用，从附加有用的标签到输入控件，一直到广告商喜欢放在段落中间，在你最意想不到的时候弹出的那些可怕的东西。
在推特 Bootstrap 中，使用它们再容易不过了。您所需要做的就是以与您到目前为止尝试的其他数据 API 示例完全相同的方式使用到目前为止看到的数据属性。
不过，有一个小警告是工具提示特有的:你必须手动初始化它们。
与其他工具不同，要使用工具提示，您需要在文档加载后手动激活您在 document.ready handler 或类似工具中创建的任何工具提示。
这样做的原因不太清楚，文档也没有给出解释。让工具提示发挥作用的最好方法是使用类似以下的工具:
<p>This is some text with an embedded <a href="#" rel="tooltip" data-original-title="I Am Tooltip!">Tooltip</a> in line with the code</p>然后，您可以简单地执行以下命令来激活它们:
$(document).ready(function() {
$('[rel=tooltip]').tooltip();
});从那时起，当你将鼠标悬停在工具提示上时，工具提示应该会弹出。
您也可以使用另一种方式来定位选择器:
$('#someelementid').tooltip({
selector: "a[rel=tooltip]"
})如果您的所有工具提示都在主父元素(如模态对话框或页面文章)中，这将更有用。“# someelementid”选择器通常是 div 或其他块级元素的 id。
和其他组件一样，几乎所有东西都是由数据属性控制的。下面的属性名称列表应该以“数据”为前缀，并添加到用于存放提示的锚点或其他内联元素中。例如，“动画”将变成“数据动画”。这些选项也可以使用“”传递。工具提示”作为包含初始化时的初始化参数的 JSON 对象:
- 动画:True 或 false 启用或禁用动画效果。
- html: True 或 false 允许 html 直接插入到工具提示中。
- 位置:“顶部”、“底部”、“左侧”或“右侧”选择工具提示的弹出方向。
- 选择器:如上所述在初始选项中用于定义主选择器。
- 标题：默认工具提示标题。
- 触发器:“单击”、“悬停”、“聚焦”或“手动”决定了使工具提示出现的操作。
- 延迟:工具提示显示前的毫秒延迟，如果显示是自动的。也可以指定为延迟:{ show: x，hide: x }以独立设置显示和隐藏值。
就像模态对话框一样，有许多流畅的 API 调用也可以在工具提示上调用。
像其他人一样，您必须使用 jQuery 的选择器引擎来调用它们。
您可以使用以下方法调用方法:
$('#someElement').tooltip('… method name …')有效的方法有:
- '显示'
- 隐藏
- “切换”
- “摧毁”
弹出窗口和工具提示没有太大区别。然而，工具提示是为快速帮助提示而设计的，弹出窗口更像是带有标题栏和内容区域的迷你对话框。
它们被设计成容纳不止一小段文本，并且经常被用于图像、视频和页面预览，或者文本片断的扩展解释。
因为弹出窗口是工具提示的扩展，要使用它们，你需要确保你已经安装了工具提示模块。如果您正在使用完整的“bootstrap.js”文件，这不是您需要担心的事情。但是，如果您已经生成了一个自定义构建，并且只包含了您需要的模块，那么您需要确保工具提示是该构建的一部分。
与工具提示不同，您不需要在 document.ready 处理程序中手动初始化它们。您可以使用简单的旧数据属性将它们附加到元素上，如下所示:
<a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Popover content goes here." title="Popover on top">Popover on top</a>就像工具提示一样，您可以看到您可以使用与工具提示完全相同的方法来设置弹出窗口的标题、位置和内容(并允许它动态生成)。
但是，如果您愿意，您也可以直接用 HTML 代码自己构建 popovers:
<div class="popover left">
<div class="arrow"></div>
<h3 class="popover-title">Popover left</h3>
<div class="popover-content">
<p>Pop over content goes here.</p>
</div>
</div>代码示例 41:基本弹出窗口
就我个人而言，我更喜欢动态方法，但是，如果您使用 HTML 构建它们，您可以将它们与分配给它们的元素分开，并根据需要附加或分离它们。
如您所见，以类似于工具提示的方式，您可以将选项设置为弹出窗口作为 JSON 对象，并使用流畅的应用编程接口创建它。或者可以在每个选项前面加上前缀，并通过在它们前面加上“data-”将它们添加到它所附加的元素中
Popovers 使用相同的参数以及如下两个额外选项来理解工具提示下列出的所有内容:
- 内容:用于设置 popover 的实际内部内容，以及
- 容器:用于将 popover 仅附加到某个父容器。
同样的四种方法，“显示”、“隐藏”、“切换”和“销毁”也都可用。它们的调用方式与工具提示完全相同，只是您使用了”。波波夫“而不是”。工具提示”。
正如我已经提到的，在 JavaScript 部分有更多的内容。从我在一些版本 3 文档中读到的内容来看，似乎还添加了更多内容。
推特 Bootstrap 程序中的 JavaScript 特性可以轻松地独自占据整本书。那么，还有什么要报道的呢？
嗯，您知道下拉菜单、按钮、选项卡和警报的基本知识，我们在组件部分已经介绍过了。在这一节中，我们介绍了模态、工具提示和弹出窗口。这就留下了以下内容:
- 过渡
- 卷轴间谍
- 倒塌
- 旋转木马
- 提前打字
- 词缀
转场用于产生您在模态对话框中看到的淡入淡出和滑动效果。
当我们阅读这本书的时候，如果你正在浏览 Bootstrap 文档，你已经看到的滚动间谍；当您向下滚动时，该模块会在页面左侧的正确内容条目上保持蓝色高亮显示。
折叠通常用于创建手风琴，但任何需要可折叠面板的东西都是本模块的目标。
旋转木马用于创建旋转幻灯片，当与英雄单位一起使用时，可以创建一些非常令人印象深刻的效果。
Typeahead 正如它的名字所暗示的那样:将它附加到任何类型的输入中，以实现即时可预测的文本弹出。
最后，词缀确实做到了它所说的:它将一个元素附加到页面上的一个给定位置，并保持它在那里，不管页面滚动多少。
在下一章，也是最后一章，我们将看看 Bootstrap 可用的一些扩展，让您在如何使用它方面有更多的选择。