Jump Start Bootstrap 中文版 第4章

第4章 Bootstrap装饰插件

JavaScript是网页上事实上的脚本语言。流行的网页功能，例如：漂亮的图片幻灯片、下拉菜单、弹出框等，都可以结合JavaScript和CSS实现。在这章，我们将讨论一些Bootstrap 3 提供的随时可用的JavaScript插件，很容易创建一些高级的网页功能。

这里有两种不同的使用Bootstrap的JavaScript插件的方法。第一种根本不需要JavaScript，您只需要遵循一些推荐的HTML标记来使用它们。另一种需要一些JavaScript知识来初始化和定制这些插件。这两种使用插件的方式，我们都将讨论，你可以选择最适合你的。

本章将使用的全部插件都包含在文件bootstrap.js或bootstrap.min.js中。如果你遵循了第一章的Bootstrap下载说明，你将在项目的/js目录下找到bootstrap.js。

在继续之前，我们先为本章建立一个新项目。我们将使用和第一章相同的文件夹（Bootstrap_demos）。复制这个文件夹，并重命名为Chapter4。打开index.html；把<title>的内容替换为：“Bootstrap Plugins”；然后移除<h1>标签。最终，index.html如下所示：【注：应该再添加一个容器<div class="container">】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
➥initial-scale=1">
<title>Bootstrap Plugins</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
➥3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
➥1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

扩展功能

想象一个没有任何下拉功能的菜单栏。有点无聊,对吧?上一章，导航栏只包含一个简单的链接列表。在本节中，我们将使用一些Bootstrap的JavaScript插件帮助扩展我们网站现有组件的功能。我们将会看到如何添加下拉菜单到导航栏、切换按钮的状态、当点击按钮时漂亮的警告信息会在显示一段时间后消失等等功能。

下拉(Dropdowns)

实现下拉功能的代码如下：

<div class="dropdown">
<a data-toggle="dropdown" data-target="#"
➥href="http://www.google.com">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>

每个下拉都应该有两个重要元素:一个元素和一个ul元素。在这里，<ul>元素被默认隐藏，而<a>元素则用于切换下拉菜单。<a>元素有两个必要的data-*属性:data-toggle和data-target。data-toggle属性告诉Bootstrap当点链接击时，激活链接元素上的下拉效果。另一方面，data-target属性用于在单击链接时防止页面重定向。这里没有必要提供href属性，因为它将被忽略。这个链接元素应该包含一些锚文本，例如“下拉”和下箭头图标，它是使用一个caret类生成的。【注:data-target="#"经过测试会导致Uncaught Error: Syntax error, unrecognized expression: #，data-target不再是类属性】你也可以用Glyphicon来代替这个箭头；这需要你把caret创建的箭头替换成Glyphicon实现的。

Caret是Glyphicon吗?
Caret不是Glyphicon。
Bootstrap为类caret写了专门的CSS样式来生成这个下拉箭头图标。
如果你想学习这是怎么实现的，可以打开bootstrap.css，
查找".caret",你将找到一套与之关联的CSS属性。

<span class=" glyphicon glyphicon-chevron-down"></span>

一旦链接和图标被正确放置，您就可以创建一个ul列表来表示下拉菜单中的链接列表。这个ul元素应该有类"dropdown-menu"。现在，我们有了一个简单的下拉菜单，在单击链接时显示菜单。我们可以在浏览器中查看它，如图4.1所示。

图4.1

让我们结合使用下拉式插件和我们在前一章中创建的标签和按钮菜单。

这是按钮菜单的代码:

<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>

让我们在前一个列表的第二个列表项中创建一个下拉插件。

<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a data-toggle="dropdown" data-target="#"
➥href="http://www.google.com">
Profile <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Messages</a></li>
</ul>

我们已经在第二个<li>元素中添加了一个下拉插件。因此，上面包含下拉插件的的按钮菜单将如图4.2所示：

图4.2

您可以在任何组件中使用这个dropdown插件，将其注入前面代码中所示的内容。

使用JavaScript下拉

Bootstrap的下拉插件也可以使用JavaScript完成。你可以使用JavaScript对象来替代data-*提供自定义属性。Bootstrap使用JQuery库来完成全部和JavaScript相关的操作；因此，在Bootstrap中自定义JavaScript相关操作，导入JQuery.js是必须的。

要通过JQuery触发下拉插件，你需要使用方法dropdown();

$().dropdown('toggle');

在页面加载后，我们可以使用这个方法把下拉插件的从关闭状态切换到开启状态。例如，如果我们创建下拉列表的代码片段如下:【注：data-toggle="dropdown" data-target="#" href="#" 这几个参数都不应该存在，data-target已不再是类属性，会保持，其他两个不需要】

<div class="dropdown" id="myDropdown">
<a class="myDropdownHandle" data-toggle="dropdown"
➥data-target="#" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>

你可以在JQuery的ready方法中调用dropdown方法：

<script type="text/javascript">
$(document).ready(function(){
$('.myDropdownHandle').dropdown('toggle');
});
</script>

你可以看到，我在调用了.myDropdownHandle之后，使用了dropdown()方法。下拉插件的默认状态是关闭的；然而你刷新页面后它将切换状态并使菜单可见。

Bootstrap为下拉插件提供了一些附加事件,它们是：
show.bs.dropdown: 这个事件在句柄被单击时触发;下拉句柄收到请求去显示隐藏菜单；
shown.bs.dropdown: 这个事件在菜单被显示时触发；
hide.bs.dropdown: 这个事件在菜单关闭前触发；
hidden.bs.dropdown: 这个事件在菜单关闭后触发；

show或hide事件在完成请求之前发生，而在请求完成时触发shown或hidden事件。在这里，请求是打开和关闭下拉菜单。

让我展示一个如何使用这些事件的例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态，并打印每个事件触发时的状态。

$('#myDropdown').on('show.bs.dropdown', function () {
console.log("Opening dropdown..");
});
$('#myDropdown').on('shown.bs.dropdown', function () {
console.log("Dropdown opened..");
});
$('#myDropdown').on('hide.bs.dropdown', function () {
console.log("Hiding dropdown..");
});
$('#myDropdown').on('hidden.bs.dropdown', function () {
console.log("Dropdown hidden..");
});

在单击链接句柄时，将在控制台依次打印:“Opening dropdown”和 “Dropdown opened”,如图4.3所示。

图4.3

再次点击句柄将依次显示后面的两条信息，如图4.4所示。

图4.4

最后，包含上述事件的index.html完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
➥initial-scale=1">
<title>Bootstrap Plugins</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
➥html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/
➥respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="dropdown" id="myDropdown">
<a class="myDropdownHandle" data-toggle="dropdown"
➥data-target="#" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myDropdown').on('show.bs.dropdown', function () {
console.log("Opening dropdown..");
});
$('#myDropdown').on('shown.bs.dropdown', function () {
console.log("Dropdown opened..");
});
$('#myDropdown').on('hide.bs.dropdown', function () {
console.log("Hiding dropdown..");
});
$('#myDropdown').on('hidden.bs.dropdown', function () {
console.log("Dropdown hidden..");
});
});
</script>
</body>
</html>

在下拉菜单中的链接动态地填充来自服务器的数据时，您会发现这些事件非常有用。在这种情况下，您可以在show.bs.dropdown事件中向服务器发出Ajax请求，并在显示之前填充下拉菜单。

警告消息

Bootstrap提供了一个非常有用的组件在网页的任何地方显示警告消息；你可以使用它们来显示成功消息、警告消息、失败消息、信息等；这些消息对访问者来说是恼人的，因此他们应该忽略添加的功能，让访问者能够隐藏它们。

在本节中，我们将使用Bootstrap创建一个警告消息，并查看如何添加解除功能。

这里是"成功"警告消息的代码：

每个警报都应该有一个警戒等级。它还应该有一个额外的上下文类，比如alert - success。有四个关于警告信息的自解释上下文类:

  1. alert-success
  2. alert-info
  3. alert-danger
  4. alert-warning

上面代码中所示的警报并没有解除功能，所以它在web页面中总是可见，如图4.5所示。

图4.5

一个可解除的警告框的标记，以及它在图4.6中的外观，如下所示:【注："×"即乘号×】

<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">&times;</button>
Amount has been transferred successfully.
</div>
图4.6

为了产生一个可解除的警告消息，我们需要给警告消息添加一个类"alter-dismissable"；然后我们需要一个按钮，点击它关闭警告消息；这个按钮需要有一个data-dismiss属性，用来告诉Bootstrap点击时解除警告。Bootstrap通过类"close"将按钮放置在警告消息的右上角。关闭按钮的解除动作靠data-dismiss属性来触发，由Bootstrap使用JavaScript实现。

在警告信息中使用链接

如果你想在警告信息中放入一个链接，你需要给<a>加上类"alter-link",
这提供了一个与警告框颜色匹配的链接:
【注：这个类只是匹配颜色，如果和btn类配合使用，会加粗链接字体】

警告消息和JavaScript

你也可以用Bootstrap的alert()方法来解除警告。

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

警告消息有两个关联的事件：

  1. close.bs.alert: 即将关闭警告信息时触发
  2. closed.bs.alert: 关闭警告信息后触发

这里是一个使用上面事件的例子：

$('.alert').on('close.bs.alert', function () {
console.log("Closing alert..");
});

按钮

在前面的章节中，我们看到了如何创建各种类型的按钮。这里，我们将看到使用Bootstrap的JavaScript插件如何在不同的状态使用它们，并且让它们切换状态。

Bootstrap按钮有两个状态；active和inactive,active状态有一个类"active",但inactive状态没有关联类；相反的，你可以用下面的代码创建一个简单的按钮并切换状态。

<button type="button" class="btn btn-lg btn-default"
➥data-toggle="button">Toggle Me!</button>

在这代码中，我使用类btn、btn-lg、btn-default创建了一个大的灰色按钮，它正好处于inactive状态，当我们点击它，Bootstrap将在按钮上添加类active。

当你点击按钮时，你会看到一个类似于插图效果的样式;在再次单击时，它返回到原来的样式，如图4.7所示。data-toggle="button"实现了这个切换功能。

图4.7

包含CSS样式的单选、复选按钮用起来并不方便，Bootstrap提供了一个重新设计的方案：它将一组复选框或单选按钮组合成一组Bootstrap按钮，这些按钮被放在一起。让我们来看看一些示例代码，结果如图4.8所示:

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"
<input type="checkbox"> Option 1
</label>
<label class="btn btn-default">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-default">
<input type="checkbox"> Option 3
</label>
</div>
图4.8

您可以在图4.8中看到，Bootstrap已经完全修改了复选框(checkbox)的显示。它们现在看起来是一组Bootstrap按钮。因为它们是复选框，所以我可以选中选项1和选项3。要创建此复选框组，您需要一个带有类"btn-group"的<div>包裹按钮，这个<div>还应该具有一个data-toggle="buttons"属性来切换数据。所有复选框类型的输入元素都应该封装在标签元素中。这些标签必须有Bootstrap的按钮类。在这种情况下，我选择了灰色的按钮。

复选框的多种颜色

你您可以通过混合Bootstrap的按钮类来创建按钮组中的多色按钮，比如btn-primary、 btn-info等。

您还可以创建一组单选按钮，其中只有一个按钮是可选的。
下面是图4.9所示结果的代码:

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="radio" name="options"> Option 1
</label>
<label class="btn btn-info">
<input type="radio" name="options"> Option 2
</label>
<label class="btn btn-info">
<input type="radio" name="options"> Option 3
</label>
</div>
图4.9

标记的惟一更改是将输入元素的类型属性从checkbox修改为radio。此外，您还必须在所有的这些按钮中都包含一个统一name属性值，从而在逻辑上对这些按钮进行分组。在本例中，我还将btn-default替换为btn-info，这将使按钮的颜色从灰色改为浅蓝色。

按钮使用JavaScript

Bootstrap通过JQuery在所有按钮状态上附带了button()方法，你可以如下这样使用：

$("mybutton").button('toggle');

您还可以将按钮更改为其加载状态。在此状态下，按钮将保持禁用，但您需要在按钮元素中使用dataloading - text属性定义额外的加载文本:

<button id="myLoadingButton" type="button" class="btn btn-primary"
➥data-loading-text="loading stuff...">Load data</button>

让我们在按钮被点击时，用JQuery改变按钮的状态为加载状态：

$('#myLoadingButton').click(function () {
$(this).button('loading');
});

当点击时，按钮上的文字将从“Load data”变为“Loading stuff”；您还可以使用button()方法中的reset参数重置按钮状态:

$("myLoadingButton").button('reset');

当加载完成时，我们还可以选择显示不同的文本。我们可以在按钮上使用data- complete-text属性，并通过button('complete')方法来更改状态:

<button id="myLoadingButton" type="button" class="btn btn-primary"
➥data-complete-text="Completed!">Load data</button>

管理内容

正确管理内容对于任何网站来说都是非常重要的。如果事情变得复杂，访问者很可能不会回到你的网站。Bootstrap提供了许多JavaScript插件，可以帮助我们组织和显示我们的内容。让我们来看看其中的一些。

ScrollSpy(滚动监听)

ScrollSpy是当今最流行的JavaScript插件之一。它被广泛应用于只有单页面网站。该插件在任何DOM元素中侦听滚动，并根据元素的滚动位置在导航栏中突出显示菜单项。

基本上，它是一个双组件的插件;它由一个导航条和一个内容区域组成。内容区域划分为多个部分，每个部分都有一个惟一的ID。导航条仅由内部链接作为href属性的值组成。当用户开始滚动时，导航栏中的相应链接将按当前显示的部分高亮显示。

让我们先建立一个navbar，下面是代码：

<nav id="navbarExample" class="navbar navbar-default"
➥role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button"
➥data-toggle="collapse" data-target=".navbarLinks">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SitePoint</a>
</div>
<div class="collapse navbar-collapse navbarLinks">
<ul class="nav navbar-nav">
<li class="active"><a href="#home">Home</a></li>
<li class=""><a href="#about">About</a></li>
<li class=""><a href="#contact">Contact Us</a></li>
<li class=""><a href="#map">Map</a></li>
</ul>
</div>
</div>
</nav>

navbar标记中的链接都是内容中的特定部分的内部链接。

内容部分的代码如下：

<div data-spy="scroll" data-target="#navbarExample" data-offset="0"
➥class="scrollspy-example">
<h4 id="Home">Home</h4>
<p>Lorem ipsum dolor sit amet, consectetur ... </p>
<h4 id="about">About</h4>
<p>Lorem ipsum dolor sit amet, consectetur ... </p>
<h4 id="contact">Contact Us</h4>
<p>Lorem ipsum dolor sit amet, consectetur ... </p>
<h4 id="map">Map</h4>
<p>Lorem ipsum dolor sit amet, consectetur ... </p>
</div>

内容部分由4对<h4><p>标签组成。每个h4元素都有唯一ID，它与上面navbar的内部链接相匹配。要获得ScrollSpy的工作，你需要添加两个自定义属性：data-spy和data-target。data-spy告诉Bootstrap，ScrollSpy插件的内容区域是什么。它应该有一个滚动条来监听在这个区域内的滚动。data-target属性告诉它必须高亮显示哪些链接。它应该包含导航元素父元素的ID。

data-offset属性告诉Bootstrap在激活ScrollSpy插件之前，从顶部离开多少像素。有时，在我们实际滚动到实际元素之前，导航栏元素可能会被更新。如果我们在ScrollSpy区域上添加了一些额外的HTML标记，可能会发生这种情况。这会干扰由插件内部完成的区域高度计算。我们可以使用数据偏移属性，将值设为干扰元素的高度。至此，一旦干扰元素被滚过，插件只会开始监听用户的滚动。

包含ScrollSpy的完整index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
➥initial-scale=1">
<title>Bootstrap Plugins</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
➥3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
➥1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.scrollspy-example{
position:relative;
height:200px;
margin-top:10px;
overflow:auto}
</style>
</head>
<body>
<div class="container">
<nav id="navbarExample" class="navbar navbar-default"
➥role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button"
➥data-toggle="collapse" data-target=".navbarLinks">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SitePoint</a>
</div>
<div class="collapse navbar-collapse navbarLinks">
<ul class="nav navbar-nav">
<li class="active"><a href="#home">Home</a></li>
<li class=""><a href="#about">About</a></li>
<li class=""><a href="#contact">Contact Us</a></li>
<li class=""><a href="#map">Map</a></li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbarExample"
➥data-offset="0" class="scrollspy-example">
<h4 id="Home">Home</h4>
<p>Lorem ipsum dolor sit amet, consectetur ... </p>
<h4 id="about">About</h4>
<p>Lorem ipsum dolor sit amet, consectetur ... </p>
<h4 id="contact">Contact Us</h4>
<p>Lorem ipsum dolor sit amet, consectetur ... </p>
<h4 id="map">Map</h4>
<p>Lorem ipsum dolor sit amet, consectetur ... </p>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

在图4.10中，您可以看到我已经滚动到“About”部分，并且在导航栏中突出显示了“About”链接。

图4.10

ScrollSpy使用JavaScript

Bootstrap有一个scrollspy()方法，该方法接受可选参数自定义ScrollSpy插件。您可以通过JavaScript传递适当的选项对象来设置目标导航条的父类:

$('.scrollspy-example').scrollspy({ target: '#navbarExample' });

如果您通过JavaScript传递选项，则可以忽略在元素的标记内设置data-*属性。

另一个可以通过的重要参数是刷新字段。如果您已经完成了DOM操作，比如在ScrollSpy中添加或删除元素区域，您需要调用scrollspy("refresh")方法。这将有助于ScrollSpy重新计算可滚动区域的高度，由于添加和删除DOM元素，可能会发生更改:

$('.scrollspy-example').scrollspy("refresh");

ScrollSpy只有一个附加的自定义事件:activate.bs.scrollspy。每当在导航栏中高亮显示新元素时就会触发。您可以捕获该事件来执行其他任务，例如向服务器发出Ajax请求、执行额外的计算等等。下面是我们如何使用它:

$('#navbarExample').on('activate.bs.scrollspy', function () {
console.log("New link highlighted!");
});

Tabs选项卡

在前面的章节中，我们了解了如何使一组链接看起来像选项卡，但那不是真的选项卡。在本节中，我们将创建一些选项卡窗格，将一些虚拟数据放入其中，并使这些选项卡窗格响应相应的选项卡链接。

要让选项卡工作，我们需要Bootstrap的nav-tabs组件和tab-content组件。让我们创建一些nav-tabs:

<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

nav-tabs组件中的每个链接都应该有一个data-toggle="tab"属性。这允许引导程序将单击事件映射到相应的选项卡窗格。这些链接中的href属性应该包含相应的选项卡窗格的id。

这里是选项卡窗格的代码：

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">
<h3>The home</h3>
</div>
<div class="tab-pane" id="profile">
<h3>The profile</h3>
</div>
<div class="tab-pane" id="messages">
<h3>Messages central</h3>
</div>
<div class="tab-pane" id="settings">
<h3>Setting panel</h3>
</div>
</div>

要创建选项卡窗格，首先需要为它们定义一个容器。这个容器应该有一个类列表内容。对于一个选项卡窗格，我们需要创建一个新的包含类tab-pane的<div>元素。这些选项卡窗格也应该有惟一的id，因为它们将被引用到导航标签(nav-tabs)的链接中。选项卡窗格的数量应该等于显示在导航栏中的链接数。在nav-tabs包裹的一个<li>元素中添加一个类"active",将使它成为默认选项卡。

就是这样!你有了一个可以工作的选项卡插件。在浏览器中查看它,结果如图4.11所示。


图4.11

添加一个褪色(淡入淡出)的效果：
给每个tab-pane添加类fade，在选项卡切换时会有淡入淡出效果。默认选项卡不要包含此类，否则将不会显示内容:

<div class="tab-pane fade in active" id="home">
<h3>The home</h3>
</div>
<div class="tab-pane fade" id="profile">
<h3>The profile</h3>
</div>

选项卡使用JavaScript

选项卡插件有两个JavaScript事件，它们是：

  1. show.bs.tab: 事件在选项卡即将打开时触发；
  2. shown.bs.tab: 事件在选项卡打开后触发；

这里是如何使用它们的一个例子：

$('.nav-tabs li a').on('show.bs.tab', function () {
console.log("Opening tab");
});
$('.nav-tabs li a').on('shown.bs.tab', function () {
console.log("Tab opened!");
});

Collapse(手风琴插件)

折叠插件被广泛地称为Web上的“手风琴”插件。它是一个插入多个垂直堆叠标签的插件，但同一时间只能打开一个标签。图4.12显示了Collapse插件的屏幕截图。

图4.12

在Bootstrap中，通过将多个面板组件组合在一个容器中来创建Collapse。我们在最近一章看到了如何创建一个面板。我们还知道一个面板有两个组件:panel-heading和panel-body。

为了创建Collapse，我们需要一组嵌在容器内的面板，这个容器是使用div元素和类面板组创建的。它也应该有一个与之相关的ID。

<div class="panel-group" id="accordion">
</div>

我们需要用不同的面板组件来填充这个容器，这些组件将充当选项卡。让我们在这个面板组(panel-group)中创建一个面板组件(panel):

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
➥href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit ...
</div>
</div>
</div>
</div>

这里，我在panel-group容器中插入了一个panel组件的标记。每个panel都分为两个部分:一个a panel-heading元素和一个panel-body元素。

panel- heading元素包含一个嵌套了<a>元素的h4元素。这个组合的< h4 >和< a >标签在Collapse插件中制作了一个选项卡。<h4>元素应该有一个类panel-title。<a>元素应该有三个非常重要的属性:data-toggle、data-parent、href；data-toggle应该代表插件的类型(Collapse)；data-parent元素应该包含panel-group元素的ID；最后，这些链接的href应该包含panel-body的父元素的ID。

与普通面板的panel-body没有包装在任何div中不同，在这里被div包裹是强制性的，以达到折叠的效果。包裹体可以有三个类panel-collapse、collapse和in；类collapse用来折叠和隐藏面板中panel-body的内容，而in显示这些内容。因此，第一个包裹体同时拥有collapse和in来显示完整的内容，其他包裹体内只应该包含collapse。【注，如果有多个包裹体包含了in，在初始化界面后会有多个包裹体处于打开状态，这是应该避免的】Bootstrap的JavaScript依靠类panel-collapse来识别包裹体。

重复相似的代码来生成多个选项卡；下面的代码展示了一个包含三个竖直选项卡的collapse插件，结果如图4.13所示：

<div class="panel-group" id="accordion">
<!-- Panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
➥href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur ...
</div>
</div>
<!-- Panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
➥href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur ...
</div>
</div>
</div>
<!-- Panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
➥href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur ...
</div>
</div>
</div>
</div>
图4.13

Collapse使用JavaScript

Bootstrap提供了更改Collapse插件的默认行为的Collapse()方法。默认情况下，一次只能打开一个选项卡。我们可以通过将自定义选项对象传递到上面的方法来重写此行为。让我们做一下。

在之前的Collapse插件的代码中，我们给所有的panel-body包裹体添加了一个类Collapse。让我们选择这个类，并调用Collapse()方法:

$('.collapse').collapse({
toggle: false
});

在这一节，我传递了一个匿名对象，它拥有false值的toggle属性；这将迫使所有的选项卡在其他选项卡打开时保持打开。你自己试试吧。

如图4.14，你将看见所有的选项卡同时打开了。【注：可以保持打开的选项卡不关闭】

图4.14

你也可以给Collapse()方法传递参数

  1. collapse('toggle'): 切换选项卡状态
  2. collapse('show'): 打开一个选项卡
  3. collapse('hide'): 关闭一个选项卡

Bootstrap也给Collapse插件附加了四个自定义事件：

  1. show.bs.collapse: 即将打开选项卡时触发
  2. shown.bs.collapse: 打开选项卡后触发
  3. hide.bs.collapse: 关闭选项卡前触发
  4. hidden.bs.collapse: 关闭选项卡后触发

下面是如何使用它们：

$('.collapse').on('show.bs.collapse', function () {
console.log('Opening tab..');
});
$('.collapse').on('shown.bs.collapse', function () {
console.log('Tab opened.');
});
$('.collapse').on('hide.bs.collapse', function () {
console.log('Hiding tab..');
});
$('.collapse').on('hidden.bs.collapse', function () {
console.log('Tab hidden');
});

Tooltip(悬浮提示)

Bootstrap的Tooltip是一个鼠标移动到组件上出现的小型的浮动消息。它通常用于显示特定组件的帮助文本。

Bootstrap的Tooltip用CSS制作，通过JavaScript触发。时至今日，相对于其他可用的悬浮提示插件，它是及其轻量的。它也可以轻松的自定义相对父容器的位置（上下左右）。要使用悬浮提示，我们必须定义一些自定义的data-*属性。

让我们建立一个demo，演示按钮上的悬浮提示：
【注，悬浮提示不是移动端可用的功能，暂停此内容的后续翻译】

<button type="button" class="btn btn-default" data-toggle="tooltip"
➥data-placement="bottom" title="I am a Bootstrap button">Who am I?
➥</button>

Getting Fancy(异想天开)

在这一节，我们将讨论两个非常重要的插件：carousel和modal。

Carousel是一个响应式幻灯片插件、modal是一个灯箱插件；它们每一个都让你以一种奇特的方式展示你的内容。

Carousel(旋转木马)

幻灯片非常流行，可以用于新闻、电子商务和视频共享网站。这种类型的功能被用来在网站上展示最受欢迎的项目，有组织的，有吸引力的幻灯片。然而，构建这样的幻灯片可能很耗时，而且这些特性也很容易发生bug。在本节中，我们将看到如何使用Bootstrap的carousel插件来构建漂亮的响应式幻灯片。

创建一个Carousel的代码如下：

<div id="bestCarsCarousel" class="carousel slide"
➥data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bestCarsCarousel" data-slide-to="0"
➥class="active"></li>
<li data-target="#bestCarsCarousel" data-slide-to="1"></li>
<li data-target="#bestCarsCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/car1.jpg">
<div class="carousel-caption">
<h3>Car 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>
</div>
<div class="item">
<img src="images/car2.jpg">
<div class="carousel-caption">
<h3>Car 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>
</div>
<div class="item">
<img src="images/car3.jpg">
<div class="carousel-caption" >
<h3>Car 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#bestCarsCarousel"
➥data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#bestCarsCarousel"
➥data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

如代码中所示，我们的carousel的主包装容器应该有类：carousel和slide。类slide是用来给carousel的每张幻灯片产生滑动效果的。它还应该有一个自定义属性data-ride，它告诉Bootstrap在页面加载时就可以启动滑动效果。如果没有这个属性，在您第一次手动操作之前，幻灯片将不会自动更改。

每一个carousel都由三部分组成：指示器、本体、控制器

要创建carousel指示器，您必须定义一个包含类carousel-indicators的有序列表。<li>元素的数量取决于你想要的幻灯片的数量。每个<li>元素都应该有一个包含carousel容器ID的data-target属性。它还应该有一个data-slide-to属性，该属性包含它将要指向的特定幻灯片的序列号。

接下来，我们构建旋转木马的心脏:幻灯片。首先，我们为所有的幻灯片创建一个包装器元素。这将是一个包含类carousel-inner的div。每个幻灯片由一个具有类"item"的<div>元素定义。每个项目都必须有一个表示图像和可选的文本数据。这个图像将被用作这个特殊的幻灯片项目的背景。对于每个图像，我们可以添加相关的标题和一些额外的文本数据。这些标题由一个<div>元素包装，它有一个类carousel-caption。可以使用任何一个HTML标题标签插入标题:< h1 >，< h2 >，< h3 >，等等。对于相关文本，可以使用< p >标记。

对每张幻灯片重复相同的项目标记。在您完成创建所有幻灯片之后，我们将构建一个用于导航carousel内容的控件部分。

carousel控制器是使用< a >标记和一个类carouselcontrol和一个方向类(如左或右)构造的。这些链接的href属性应该包含carousel包装的ID。一旦控制器成形，我们就插入左右符号。这些符号是glyphicons类型的。

现在是查看浏览器中的carousel的时候了，如图4.18所示。

图4.18

神奇的,不是吗?我们已经创建了一个强大的响应式幻灯片，不需要编写一个JavaScript或CSS。

Carousels和旧版本的IE浏览器

虽然Bootstrap可能与IE8和以上兼容，但carousel并不能完全兼容。
这种滑动效应将无法在css3不兼容的浏览器中工作，如IE8和I9。
carousel指示器将在这些浏览器中显示为正方形，而不是圆形。

Carousels使用JavaScript

Bootstrap通过JavaScript调用carousel()方法来操作Carousels。您可以使用此方法通过定制参数来更改Carousels的默认行为。

Carousels有三个参数：interval(间隔), pause(停顿),wrap(包裹)；下面是它们的代码：

var options = {
interval: 7000,
pause: 'hover',
wrap: true
};
$('#bestCarsCarousel').carousel(options);

interval参数指定两张幻灯片之间的时间间隔；pause参数设为:"hover"：用来在鼠标经过的时候暂停幻灯片，设为null，不会对鼠标响应；wrap参数是Carousels旋转的开关，如果设为true，Carousels会在最后一张幻灯片显示之后，回到第一张。

还可以传递给carousel()方法的其他参数包括:

  1. cycle:旋转carousel
  2. pause:暂停幻灯片播放
  3. number: 转到指定帧（基于0，类似于数组）
  4. prev: 转到前一帧
  5. next: 转到后一帧

Carousels插件有两个事件：
1、slide.bs.carousel: 滚动前触发
2、slid.bs.carousel: 滚动后触发

这里是如何使用它们：

$('#bestCarsCarousel').on('slide.bs.carousel', function () {
console.log("Changing slide..");
});
$('#bestCarsCarousel').on('slid.bs.carousel', function () {
console.log("Slide changed.");
});

Modals(模式对话框)

Modals是在网页中隐藏的HTML元素，在触发时从屏幕顶部滑下来。它是用来显示对话框提示的最佳插件之一，例如警告和确认对话框。您还可以使用它来展示一个更大的图像版本，显示一长串的术语和条件，或者显示注册/登录表单。

在Bootstrap 3版本,modals已经变得有响应性;这意味着它们看起来很好，即使在小屏幕上也能运行良好。让我们来创建一个modals:

<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"
➥data-dismiss="modal">&times;</button>
<h4 class="modal-title">Welcome Back!</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<h1>Hello Readers!</h1>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
➥data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">
➥Save changes</button>
</div>
</div>
</div>
</div>

每个模式对话框都应该有一个带有类modal的容器。为了给模式对话框提供一个逐渐消失的效果，我们需要在这个容器中添加类fade。接下来，我们定义一个包含类modal-dialog的div元素。这是负责控制模态的大小。默认情况下，它按屏幕大小调整大小。不久，我们将看到如何通过在modal-dialog中添加一些额外的类来更改模式的大小。在模式对话框中，我们将创建一个包裹体元素，它封装了一个模式对话框的各个子部分。这个包裹体元素应该有一个名为modal-content的类。

模式对话框的子部分是页眉、本体和页脚。页眉和页脚部分是可选的。要创建页眉，您需要一个带有类modal-header的div元素。在里面你可以放一个标题和关闭按钮。该标题是包含类modal-title的<h4>元素。这里的关闭按钮图标是一个乘法(x)符号。这个按钮应该有一个close类，这样它就可以对齐到模式对话框的左上角。添加data-dismiss使按钮在单击时关闭模式对话框。

对于本体，我们需要一个包含类modal-body的<div>元素。您可以将几乎任何内容放到该元素中。你甚至可以使用Bootstrap的网格系统来组织内容。

最后，为了创建一个模式页脚，我们定义了一个div元素，它有一个类modalfooter。在默认情况下，模式页脚中的内容是右对齐的。

如果您在浏览器中检查前面的模式对话框代码片段，则将一无所获;模式对话框是隐藏的。你必须创建一个句柄来触发它:

<button class="btn btn-primary btn-lg" data-toggle="modal"
➥data-target="#myModal">
Launch modal
</button>

在这段代码中，我使用了一个按钮来触发模式对话框。它应该有一个data-target属性来告诉Bootstrap，在一个网页中可以有多个模式对话框。我们还需要定义的data-toggle属性来确定单击时触发的内容。

现在我们准备好使用我们的模式对话框了。点击按钮，查看浏览器中的模式对话框，如图4.19所示。

图4.19
模式对话框的放置

模式对话框必须放在文档的顶层位置，以防止与其他组件发生冲突。
【注：顶层是指<div class="container">内第一层】
然而，当放置模式句柄时，没有限制。它可以放在文档的任何位置。

Modals有三个宽度:大的，默认的，小的。这些对于在模式对话框中适当地填充内容非常有帮助。如果没有为modal-dialog元素提供额外的类，它的默认宽度是600px。为了调整大小，您需要将下面的一个类添加到modal-dialog元素:

modal-lg: 大型模式对话框，宽度900px
modal-sm: 小型模式对话框，宽度300px

Modals使用JavaScript

Bootstrap提供了通过JavaScript触发模式对话框的modal()方法。该方法还接受包含多种属性的选项对象，用于定制模式对话框的默认行为:

var options = {
backdrop: true,
keyboard: false,
show: true,
remote: false
}
$("#myModal").modal(options);

backdrop属性接受布尔值或字符串值“static”。当一个模式对话框被启动时，一个黑暗透明的背景会默认出现在模式对话框的后面；将此属性设置为true可以使背景可见。把它设为false，背景就消失了。当设置为“静态”时，当在模态主体外的任何地方点击时，模式对话框不会关闭。

keyboard属性用于启用或禁用键盘的escape键功能，当设置为false时，Esc键不会关闭模式对话框。

show属性用于通过JavaScript切换模式的可见性。当设置为true时，模式对话框将自动显示，不需要单击任何句柄元素。

<a>元素，可以作为一个modal handle元素，可以包含一个包含链接的属性href。Bootstrap模式对话框有一个选项，当单击该句柄时，将该链接加载到它的modal-body元素中。这个特性在默认情况下是关闭的。如果您想要使用该特性并加载modal内的链接，则将remote属性设置为true。

与Bootstrap模式对话框相关的事件包括:

  1. show.bs.modal: 即将打开对话框前触发
  2. shown.bs.modal: 打开对话框后触发
  3. hide.bs.modal: 即将隐藏对话框前触发
  4. hidden.bs.modal: 隐藏对话框后触发
  5. loaded.bs.modal: 远程容器加载后触发

下面是如何使用它们：

$('#myModal').on('show.bs.modal', function () {
console.log("Opening Modal..");
});
$('#myModal').on('shown.bs.modal', function () {
console.log("Modal opened.");
});
$('#myModal').on('hide.bs.modal', function () {
console.log("Hiding Modal..");
});
$('#myModal').on('hidden.bs.modal', function () {
console.log("Modal hidden.");
});

小结

通过本章，我们了解了如何使用许多流行的Bootstrap JavaScript插件。我们还学习了如何通过设置自定义data-*属性和通过JavaScript来定制它们。当使用Bootstrap时，您应该始终使用内置的插件，避免编写自定义插件。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,117评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,963评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 107,897评论 0赞 240
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,805评论 0赞 203
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,208评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,535评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,797评论 2赞 311
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,493评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,215评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,325评论 2赞 252
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,971评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2赞 266

推荐阅读更多精彩内容

  • Jump Start Bootstrap 中文版 第3章
    第3章 探索Bootstrap组件 在这一章，我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按...
    海上名月阅读 886评论 1赞 6
  • bootstrap总结篇
    原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    程序员poetry阅读 6,957评论 0赞 42
  • Bootstrap（基础二）
    第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根...
    凛0_0阅读 4,866评论 0赞 66
  • Bootstrap简单入门（1）
    第一章 Bootstrap简介 定义 Bootstrap官网给出的解释是：简洁、直观、强悍、移动设备优先的前端开发...
    lvyweb阅读 1,299评论 1赞 10
  • 5/100
    第五天 中午吃了好大一盆 今天学习任务勉强完成 尝试了多线程，进展比较慢，手机仍然是最大干扰因素…… 明天还要去给...
    28岁的樱桃丸子想要变身阅读 185评论 0赞 1