Bootstrap 的 JavaScript 插件是以 JQuery 為基礎(chǔ)，提供了全新的功能并且還可以擴(kuò)展現(xiàn)有的 Bootstrap 組件。通過(guò)添加 data attribute（data 屬性）可以輕松的使用這些插件，當(dāng)然你也可以使用編程方式的 API 來(lái)使用。
為了使用 Bootstrap 插件，我們需要添加 Bootstrap.js 或者 Bootstrap.min.js 文件到項(xiàng)目中。這兩個(gè)文件包含了所有的 Bootstrap 插件，推薦引用 Bootstrap.min.js。當(dāng)然你也可以包含指定的插件來(lái)定制化 Bootstrap.js，已達(dá)到更好的加載速度。
Bootstrap 提供了完全通過(guò) HTML 標(biāo)記的方式來(lái)使用插件，這意味著，你可以不寫(xiě)任何 JavaScript 代碼，事實(shí)上這也是 Bootstrap 推薦的使用方式。
舉個(gè)例子，若要使 Alert 組件支持關(guān)閉功能，你可以通過(guò)添加 data-dismiss="alert"屬性到按鈕(Botton)或者鏈接（A）元素上，如下代碼所示：
<div class="alert alert-danger">
<button data-dismiss="alert" class="close" type="button">x</button>
<strong>警告</strong>10秒敵人到達(dá)
</div>當(dāng)然，你也可以通過(guò)編程方式的 API 來(lái)實(shí)現(xiàn)同樣的功能：
<div class="alert alert-danger" id="myalert">
<button data-dismiss="alert" class="close" type="button" onclick="$('#myalert').alert('close')">x</button>
<strong>警告</strong>10秒敵人到達(dá)
</div>使用 dropdown 插件（增強(qiáng)交互性），你可以將下拉菜單添加到絕大多數(shù)的 Bootstrap 組件上，比如navbar、tabs 等。注：將下拉菜單觸發(fā)器和下拉菜單都包裹在 .dropdown 里，或者另一個(gè)聲明了 position: relative; 的元素中。
如下是一個(gè)地域的菜單，通過(guò) Razor 引擎動(dòng)態(tài)綁定菜單元素:
<div class="form-group">
@Html.LabelFor(model => model.TerritoryId, new { @class = "control-label col-md-2" })
@Html.HiddenFor(model => model.TerritoryId)
<div class="col-md-10">
<div id="territorydropdown" class="dropdown">
<button id="territorybutton" class="btn btn-sm btn-info" data-toggle="dropdown">@Model.Territory.TerritoryDescription</button>
<ul id="territories" class="dropdown-menu">
@foreach (var item in ViewBag.TerritoryId)
{
<li><a href="#" tabindex="-1" data-value="@item.Value">@item.Text</a></li>
}
</ul>
</div>
</div>
</div>注意：通過(guò)添加 data 屬性：data-toggle="dropdown" 到 Button 或者 Anchor 上，可以切換 dropdown 下拉菜單，增加了交互性。其中菜單的元素設(shè)置 tabindex=-1，這樣做是為了防止元素成為 tab 次序的一部分。
模態(tài)框以彈出框的形式可以為用戶(hù)提供信息亦或者在此之中完成表單提交功能。Bootstrap 的模態(tài)框本質(zhì)上有 3 部分組成：模態(tài)框的頭、體和一組放置于底部的按鈕。你可以在模態(tài)框的 Body 中添加任何標(biāo)準(zhǔn)的 HTML 標(biāo)記，包括 Text 或者嵌入的 Youtube 視頻。
一般來(lái)說(shuō)，務(wù)必將模態(tài)框的 HTML 代碼放在文檔的最高層級(jí)內(nèi)（也就是說(shuō)，盡量作為 body 標(biāo)簽的直接子元素），以避免其他組件影響模態(tài)框的展現(xiàn)和/或功能。
如下即為一個(gè)標(biāo)準(zhǔn)的模態(tài)框，包含 Header、Body、Footer:
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter4/1.png" alt="" />
將下面這段 HTML 標(biāo)記放在視圖的 Top 或者 Bottom：
<div class="modal fade" id="deleteConfirmationModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">刪除</h4>
</div>
<div class="modal-body">
<p>即將刪除 '@Model.CompanyName'. </p>
<p>
<strong>你確定要繼續(xù)嗎</strong>
</p>
@using (Html.BeginForm("Delete", "Customers", FormMethod.Post, new { @id = "delete-form", role = "form" }))
{
@Html.HiddenFor(m => m.CustomerId)
@Html.AntiForgeryToken()
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="$('#delete-form').submit();">是.刪除</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>注意：通過(guò)在 Button 上添加 data 屬性：data-dismiss="modal"可以實(shí)現(xiàn)對(duì)模態(tài)框的關(guān)閉，當(dāng)然你也可以使用編程方式 API 來(lái)完成：
<button type="button" class="btn btn-primary" onclick="$('#deleteConfirmationModal').modal('hide')">取消</button>為了展示模態(tài)框，我們可以不寫(xiě)任何 JavaScript 代碼，通過(guò)添加 data-toggle="modal"屬性到Button 或者 Anchor 元素上即可，同時(shí)，為了表示展示哪一個(gè)模態(tài)框，需要通過(guò) data-target 來(lái)指定模態(tài)框的 Id。
<a href="#" data-toggle="modal" data-target="#deleteConfirmationModal">Delete</a>同樣，也可以使用編程方式 API 來(lái)打開(kāi)一個(gè)模態(tài)框：
$(document).ready(function () {
$('#deleteConfirmationModal').modal('show');
});Tabs 可以使用在大的表單上，通過(guò) Tabs 分割成若干部分顯示局部信息，比如在 Northwind 數(shù)據(jù)庫(kù)中存在 Customer 顧客信息，它包含了基本信息和地址，可以通過(guò) Tabs 進(jìn)行 Split，如下所示：
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter4/2.png" alt="" />
要使用 Tabs 也是非常簡(jiǎn)單的：首先創(chuàng)建標(biāo)準(zhǔn)的無(wú)序列表 元素，需要為它的 class 設(shè)置為 nav nav-tabs 或者 nav nav-pills。其中 包含的元素即為 Tab 元素，需要設(shè)置其 data-toggle為tab 或者 pill 屬性以及點(diǎn)擊它指向的 內(nèi)容:
<ul id="customertab" class="nav nav-tabs">
<li class="active"><a href="#info" data-toggle="tab">Customer Info</a></li>
<li><a href="#address" data-toggle="tab">Address</a></li>
</ul>為了設(shè)置 Tabs 的內(nèi)容，需要?jiǎng)?chuàng)建一個(gè)父 元素并設(shè)置 class為tab-content，在父的 div 容器中為每一個(gè) Tab 內(nèi)容創(chuàng)建 div 元素，并設(shè)置class為tab-pane 和標(biāo)識(shí)的 Id，通過(guò)添加 active 來(lái)激活哪一個(gè) Tab 內(nèi)容的顯示。
<div class="tab-content well">
<div class="tab-pane active" id="info">
Customer Info
</div>
<div class="tab-pane" id="address">
Customer Address
</div>
</div>當(dāng)然也可以通過(guò)編程方式的 API 來(lái)激活：
$(document).ready(function () {
$('.nav-tabs a[href="#address"]').tab('show');
});Tooltip 能為用戶(hù)提供額外的信息，Boostrap Tooltip 能被用在各種元素上，比如 Anchor：
<a data-toggle="tooltip" data-placement="top" data-original-title="這是提示內(nèi)容" href="#" >工具提示？</a>你可以添加 data-toggle="tooltip"來(lái)使用 tooltip，當(dāng)然你也可以設(shè)置內(nèi)容的顯示位置，通過(guò)添加 data-placement 屬性來(lái)實(shí)現(xiàn)，Bootstrap 為我們提供了 4 種位置：
最后，通過(guò)設(shè)置 data-original-title 設(shè)置了需要顯示的 Title。
注意：為了性能的考慮，Tooltip 的 data-api 是可選的，這意味著你必須手動(dòng)初始化 tooltip 插件：
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>彈出框和 Tooltip 類(lèi)似，都可以為用戶(hù)提供額外的信息，但彈出框可以展示更多的信息，比如允許我們展示一個(gè) Header 和 Content，如下所示：
<a data-content="關(guān)于基礎(chǔ)建設(shè)問(wèn)題需要有具體的研討和商量...." data-placement="bottom" title="" data-toggle="popover" href="#" data-original-title="轉(zhuǎn)至百度">城市規(guī)劃</a>和 Tooltip 一樣，為了性能的考慮，data-api 是可選的，這意味著你必須手動(dòng)初始化 popover 插件:
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="popover"]').popover();
});
</script>http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter4/3.png" alt="" />
手風(fēng)琴組件有若干 panel groups 組成，每一個(gè) panel group 依次包含了若干 header 和 content 元素,最常見(jiàn)的使用場(chǎng)景就是 FAQ，如下所示：
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter4/4.png" alt="" />
為了使用手風(fēng)琴組件，需要對(duì) Panel Heading 中的設(shè)置 data-toggle="collapse"和點(diǎn)擊它展開(kāi)的容器(Div)Id，具體如下所示:
<div class="row">
<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="#questionOne">
問(wèn)題 1：什么是 Microsoft MVP 獎(jiǎng)勵(lì)？
</a>
</h4>
</div>
<div id="questionOne" class="panel-collapse collapse in">
<div class="panel-body">
解答 1：Microsoft 最有價(jià)值專(zhuān)家 (MVP) 獎(jiǎng)勵(lì)是一項(xiàng)針對(duì) Microsoft 技術(shù)社區(qū)杰出成員的年度獎(jiǎng)勵(lì)，根據(jù) Microsoft 技術(shù)社區(qū)的成員在過(guò)去 12 個(gè)月內(nèi)對(duì) Microsoft 相關(guān)離線(xiàn)和在線(xiàn)技術(shù)社區(qū)所作貢獻(xiàn)的大小而確定。
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#questionTwo">
問(wèn)題 2：MVP 獎(jiǎng)勵(lì)存在的意義何在？
</a>
</h4>
</div>
<div id="questionTwo" class="panel-collapse collapse">
<div class="panel-body">
解答 2：我們相信，技術(shù)社區(qū)可以促進(jìn)自由且客觀(guān)的知識(shí)交流，因此可以構(gòu)建出一個(gè)可靠、獨(dú)立、真實(shí)且可使每個(gè)人獲益的專(zhuān)業(yè)知識(shí)來(lái)源。Microsoft MVP 獎(jiǎng)勵(lì)旨在表彰那些能積極與其他技術(shù)社區(qū)成員分享自身知識(shí)的全球杰出技術(shù)社區(qū)領(lǐng)導(dǎo)者。
</div>
</div>
</div>
</div>
</div>Carousel 它本質(zhì)上是一個(gè)幻燈片，循環(huán)展示不同的元素,通常展示的是圖片，就像旋轉(zhuǎn)木馬一樣。你可以在許多網(wǎng)站上看到這種組件，要使用它也是非常方便的：
完成了基礎(chǔ)之后，將下面HTML標(biāo)識(shí)放在View中即可：
<div class="container-full">
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="10000">
<!-- 指示燈 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="@Url.Content("~/Images/slide1.jpg")" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Unto all said together great in image.</h1>
<p>Won't saw light to void brought fifth was brought god abundantly for you waters life seasons he after replenish beast. Creepeth beginning.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Read more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="@Url.Content("~/Images/slide2.jpg")" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Fowl, land him sixth moving.</h1>
<p>Morning wherein which. Fourth man life saying own creeping. Said sixth given.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="@Url.Content("~/Images/slide3.jpg")" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>Far far away, behind the word mountains.</h1>
<p>A small river named Duden flows by their place and supplies it with the necessary.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">See all</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>展示的效果如下：
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter4/7.png" alt="" />
在這篇博客中介紹了常見(jiàn)的 Bootstrap 插件，通過(guò)使用數(shù)據(jù)屬性和編程方式的 API 來(lái)使用這些插件，更多插件訪(fǎng)問(wèn)： 獲取。
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多