Bootstrap 的 JavaScript 插件是以 JQuery 為基礎，提供了全新的功能并且還可以擴展現(xiàn)有的 Bootstrap 組件。通過添加 data attribute（data 屬性）可以輕松的使用這些插件，當然你也可以使用編程方式的 API 來使用。

為了使用 Bootstrap 插件，我們需要添加 Bootstrap.js 或者 Bootstrap.min.js 文件到項目中。這兩個文件包含了所有的 Bootstrap 插件，推薦引用 Bootstrap.min.js。當然你也可以包含指定的插件來定制化 Bootstrap.js，已達到更好的加載速度。

Data 屬性 VS 編程 API

Bootstrap 提供了完全通過 HTML 標記的方式來使用插件，這意味著，你可以不寫任何 JavaScript 代碼，事實上這也是 Bootstrap 推薦的使用方式。

舉個例子，若要使 Alert 組件支持關閉功能，你可以通過添加 data-dismiss="alert"屬性到按鈕(Botton)或者鏈接（A）元素上，如下代碼所示：

<div class="alert alert-danger">
    <button data-dismiss="alert" class="close" type="button">x</button>
    <strong>警告</strong>10秒敵人到達
</div>

當然，你也可以通過編程方式的 API 來實現(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秒敵人到達
</div>

下拉菜單（dropdown.js）

使用 dropdown 插件（增強交互性），你可以將下拉菜單添加到絕大多數(shù)的 Bootstrap 組件上，比如navbar、tabs 等。注：將下拉菜單觸發(fā)器和下拉菜單都包裹在 .dropdown 里，或者另一個聲明了 position: relative; 的元素中。

如下是一個地域的菜單，通過 Razor 引擎動態(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>

注意：通過添加 data 屬性：data-toggle="dropdown" 到 Button 或者 Anchor 上，可以切換 dropdown 下拉菜單，增加了交互性。其中菜單的元素設置 tabindex=-1，這樣做是為了防止元素成為 tab 次序的一部分。

模態(tài)框（modal.js）

模態(tài)框以彈出框的形式可以為用戶提供信息亦或者在此之中完成表單提交功能。Bootstrap 的模態(tài)框本質上有 3 部分組成：模態(tài)框的頭、體和一組放置于底部的按鈕。你可以在模態(tài)框的 Body 中添加任何標準的 HTML 標記，包括 Text 或者嵌入的 Youtube 視頻。

一般來說，務必將模態(tài)框的 HTML 代碼放在文檔的最高層級內(nèi)（也就是說，盡量作為 body 標簽的直接子元素），以避免其他組件影響模態(tài)框的展現(xiàn)和/或功能。

如下即為一個標準的模態(tài)框，包含 Header、Body、Footer:

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter4/1.png" alt="" />

將下面這段 HTML 標記放在視圖的 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">&times;</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>

注意：通過在 Button 上添加 data 屬性：data-dismiss="modal"可以實現(xiàn)對模態(tài)框的關閉，當然你也可以使用編程方式 API 來完成：

<button type="button" class="btn btn-primary" onclick="$('#deleteConfirmationModal').modal('hide')">取消</button>

為了展示模態(tài)框，我們可以不寫任何 JavaScript 代碼，通過添加 data-toggle="modal"屬性到Button 或者 Anchor 元素上即可，同時，為了表示展示哪一個模態(tài)框，需要通過 data-target 來指定模態(tài)框的 Id。

<a href="#" data-toggle="modal" data-target="#deleteConfirmationModal">Delete</a>

同樣，也可以使用編程方式 API 來打開一個模態(tài)框：

$(document).ready(function () {

    $('#deleteConfirmationModal').modal('show');

});

標簽頁（tab.js）

Tabs 可以使用在大的表單上，通過 Tabs 分割成若干部分顯示局部信息，比如在 Northwind 數(shù)據(jù)庫中存在 Customer 顧客信息，它包含了基本信息和地址，可以通過 Tabs 進行 Split，如下所示：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter4/2.png" alt="" />

要使用 Tabs 也是非常簡單的：首先創(chuàng)建標準的無序列表元素，需要為它的 class 設置為 nav nav-tabs 或者 nav nav-pills。其中包含的元素即為 Tab 元素，需要設置其 data-toggle為tab 或者 pill 屬性以及點擊它指向的內(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>

為了設置 Tabs 的內(nèi)容，需要創(chuàng)建一個父元素并設置 class為tab-content，在父的 div 容器中為每一個 Tab 內(nèi)容創(chuàng)建 div 元素，并設置class為tab-pane 和標識的 Id，通過添加 active 來激活哪一個 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>

當然也可以通過編程方式的 API 來激活：

$(document).ready(function () {
 $('.nav-tabs a[href="#address"]').tab('show');
});

工具提示（tooltip.js）

Tooltip 能為用戶提供額外的信息，Boostrap Tooltip 能被用在各種元素上，比如 Anchor：

<a data-toggle="tooltip" data-placement="top" data-original-title="這是提示內(nèi)容" href="#" >工具提示？</a>

你可以添加 data-toggle="tooltip"來使用 tooltip，當然你也可以設置內(nèi)容的顯示位置，通過添加 data-placement 屬性來實現(xiàn)，Bootstrap 為我們提供了 4 種位置：

top
bottom
left
right

最后，通過設置 data-original-title 設置了需要顯示的 Title。

注意：為了性能的考慮，Tooltip 的 data-api 是可選的，這意味著你必須手動初始化 tooltip 插件：

<script type="text/javascript">
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

彈出框（popover.js）

彈出框和 Tooltip 類似，都可以為用戶提供額外的信息，但彈出框可以展示更多的信息，比如允許我們展示一個 Header 和 Content，如下所示：

<a data-content="關于基礎建設問題需要有具體的研討和商量...." data-placement="bottom" title="" data-toggle="popover" href="#" data-original-title="轉至百度">城市規(guī)劃</a>

和 Tooltip 一樣，為了性能的考慮，data-api 是可選的，這意味著你必須手動初始化 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="" />

手風琴組件（collapse.js）

手風琴組件有若干 panel groups 組成，每一個 panel group 依次包含了若干 header 和 content 元素,最常見的使用場景就是 FAQ，如下所示：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter4/4.png" alt="" />

為了使用手風琴組件，需要對 Panel Heading 中的設置 data-toggle="collapse"和點擊它展開的容器(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">
                        問題 1：什么是 Microsoft MVP 獎勵？
                    </a>
                </h4>
            </div>
            <div id="questionOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    解答 1：Microsoft 最有價值專家 (MVP) 獎勵是一項針對 Microsoft 技術社區(qū)杰出成員的年度獎勵，根據(jù) Microsoft 技術社區(qū)的成員在過去 12 個月內(nèi)對 Microsoft 相關離線和在線技術社區(qū)所作貢獻的大小而確定。
                </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">
                        問題 2：MVP 獎勵存在的意義何在？
                    </a>
                </h4>
            </div>
            <div id="questionTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    解答 2：我們相信，技術社區(qū)可以促進自由且客觀的知識交流，因此可以構建出一個可靠、獨立、真實且可使每個人獲益的專業(yè)知識來源。Microsoft MVP 獎勵旨在表彰那些能積極與其他技術社區(qū)成員分享自身知識的全球杰出技術社區(qū)領導者。
                </div>
            </div>
        </div>
    </div>
</div>

旋轉木馬組件（carousel.js）

Carousel 它本質上是一個幻燈片，循環(huán)展示不同的元素,通常展示的是圖片，就像旋轉木馬一樣。你可以在許多網(wǎng)站上看到這種組件，要使用它也是非常方便的：

將 Carousel 組件被包含在一個 class 為 carousel 以及 data-ride 為"carousel"的元素中。
在上述容器里添加一個有序列表，它將渲染成小圓點代表當前激活的幻燈片（顯示在右下角）。
緊接著，添加一個 class為carousel-inner 的，這個容器包含了實際的幻燈片
然后，添加左右箭頭能讓用戶自由滑動幻燈片
最后，設置滑動切換的時間間隔，通過設置 data- interval 來實現(xiàn)。當然也可以通過編程方式 API 來實現(xiàn)：$('#myCarousel').carousel({interval: 10000})

完成了基礎之后，將下面HTML標識放在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="" />

小結

在這篇博客中介紹了常見的 Bootstrap 插件，通過使用數(shù)據(jù)屬性和編程方式的 API 來使用這些插件，更多插件訪問：獲取。

上一篇：作者簡介下一篇：ASP.NET MVC 隨想錄（1）——開始使用 Bootstrap