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="#"
?>
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="#"
?>
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閱讀 228,363評論 6贊 532
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,497評論 3贊 416
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,305評論 0贊 374
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,962評論 1贊 311
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,727評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,193評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,257評論 3贊 441
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,411評論 0贊 288
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,945評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,777評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,978評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,519評論 5贊 359
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,216評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,642評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,878評論 1贊 286
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,657評論 3贊 391
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,960評論 2贊 373

推薦閱讀更多精彩內容

  • 第3章 探索Bootstrap組件 在這一章，我們將開始使用Bootstrap的一些非常有用的HTML組件。諸如按...
    海上名月閱讀 949評論 1贊 6
  • 原文出處 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端進階之旅閱讀 7,108評論 0贊 42
  • 第5章 菜單、按鈕及導航 一、下拉菜單 小伙伴們注意，在Bootstrap框架中的下拉菜單組件是一個獨立的組件，根...
    凜0_0閱讀 5,024評論 0贊 66
  • 第一章 Bootstrap簡介 定義 Bootstrap官網給出的解釋是：簡潔、直觀、強悍、移動設備優先的前端開發...
    lvyweb閱讀 1,349評論 1贊 10
  • 第五天 中午吃了好大一盆 今天學習任務勉強完成 嘗試了多線程，進展比較慢，手機仍然是最大干擾因素…… 明天還要去給...
    28歲的櫻桃丸子想要變身閱讀 216評論 0贊 1