2018-10-11Bootstrap08

Bootstrap 插件概覽

在前面布局組件章節(jié)中所討論到的組件僅僅是個開始细诸。Bootstrap 自帶 12 種 jQuery 插件辱挥，擴展了功能经备，可以給站點添加更多的互動冲秽。即使您不是一名高級的 JavaScript 開發(fā)人員颠毙，您也可以著手學習 Bootstrap 的 JavaScript 插件揭芍。利用 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）斑胜，大部分的插件可以在不編寫任何代碼的情況被觸發(fā)缸托。

站點引用 Bootstrap 插件的方式有兩種：
單獨引用：使用 Bootstrap 的個別的 *.js 文件跷叉。一些插件和 CSS 組件依賴于其他插件逸雹。如果您單獨引用插件，請先確保弄清這些插件之間的依賴關系云挟。
編譯（同時）引用：使用 bootstrap.js 或壓縮版的 bootstrap.min.js梆砸。
不要嘗試同時引用這兩個文件，因為 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件园欣。
所有的插件依賴于 jQuery帖世。所以必須在插件文件之前引用 jQuery。請訪問 bower.json 查看 Bootstrap 當前支持的 jQuery 版本沸枯。

data 屬性

你可以僅僅通過 data 屬性 API 就能使用所有的 Bootstrap 插件日矫，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API绑榴，也應該是你的首選方式哪轿。
話又說回來，在某些情況下可能需要將此功能關閉翔怎。因此窃诉，我們還提供了關閉 data 屬性 API 的方法杨耙，即解除以 data-api 為命名空間并綁定在文檔上的事件。就像下面這樣：

$(document).off('.data-api')

如需關閉一個特定的插件飘痛，只需要在 data-api 命名空間前加上該插件的名稱作為命名空間即可珊膜，如下所示：

$(document).off('.alert.data-api')

編程方式的 API

我們?yōu)樗?Bootstrap 插件提供了純 JavaScript 方式的 API。所有公開的 API 都是支持單獨或鏈式調用方式敦冬，并且返回其所操作的元素集合（注：和jQuery的調用形式一致）辅搬。例如：

$(".btn.danger").button("toggle").addClass("fat")

所有的方法都可以接受一個可選的選項對象作為參數(shù)唯沮，或者一個代表特定方法的字符串脖旱，或者不帶任何參數(shù)（這種情況下，將會初始化插件為默認行為）介蛉，如下所示：

// 初始化為默認行為
$("#myModal").modal()    
 // 初始化為不支持鍵盤               
$("#myModal").modal({ keyboard: false })  
// 初始化并立即調用 show
$("#myModal").modal('show')

每個插件在 Constructor 屬性上也暴露了其原始的構造函數(shù)：$.fn.popover.Constructor萌庆。如果您想獲取某個特定插件的實例，可以直接通過頁面元素獲缺揖伞：

$('[rel=popover]').data('popover').

避免命名空間沖突

某些時候 Bootstrap 插件可能需要與其他 UI 框架一起使用践险。在這種情況下，可能會發(fā)生命名空間沖突吹菱。如果不幸發(fā)生了這種情況巍虫，你可以通過調用插件的 .noConflict 方法恢復其原始值。

// 返回 $.fn.button 之前所賦的值
var bootstrapButton = $.fn.button.noConflict() 
// 為 $().bootstrapBtn 賦予 Bootstrap 功能                           
$.fn.bootstrapBtn = bootstrapButton

事件

Bootstrap 為大多數(shù)插件的獨特行為提供了自定義事件鳍刷。一般來說占遥，這些事件有兩種形式：

動詞不定式：這會在事件開始時被觸發(fā)。例如 ex: show输瓜。動詞不定式事件提供了 preventDefault 功能瓦胎。這使得在事件開始前可以停止操作的執(zhí)行。

$('#myModal').on('show.bs.modal', function (e) {
// 阻止模態(tài)框的顯示
  if (!data) return e.preventDefault() 
})

過去分詞形式：這會在動作執(zhí)行完畢之后被觸發(fā)尤揣。例如 ex: shown搔啊。

Bootstrap 過渡效果（Transition）插件

過渡效果（Transition）插件提供了簡單的過渡效果。
如果您想要單獨引用該插件的功能北戏，那么除了其他的 JS 文件负芋，您還需要引用 transition.js∈扔或者旧蛾，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js芝硬。

Transition.js 是 transitionEnd 事件和 CSS 過渡效果模擬器的基本幫助器類蚜点。它被其他插件用來檢查 CSS 過渡效果支持，并用來獲取過渡效果拌阴。

使用案例

過渡效果（Transition）插件的使用案例：

具有幻燈片或淡入效果的模態(tài)對話框绍绘。具體實例參見 Bootstrap 模態(tài)框（Modal）插件。
具有淡出效果的標簽頁。具體實例參見 Bootstrap 標簽頁（Tab）插件陪拘。
具有淡出效果的警告框厂镇。具體實例參見 Bootstrap 警告框（Alert）插件。
具有幻燈片效果的輪播板左刽。具體實例參見 Bootstrap 輪播（Carousel）插件捺信。

Bootstrap 模態(tài)框（Modal）插件

模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常欠痴，目的是顯示來自一個單獨的源的內容迄靠，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息喇辽、交互等掌挚。
如果您想要單獨引用該插件的功能，那么您需要引用 modal.js菩咨》褪剑或者，正如 Bootstrap 插件概覽一章中所提到抽米，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js特占。

用法

您可以切換模態(tài)框（Modal）插件的隱藏內容：

通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設置屬性 data-toggle="modal"，同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態(tài)框（帶有 id="identifier"）云茸。
通過 JavaScript：使用這種技術是目，您可以通過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模態(tài)框：

$('#identifier').modal(options)

實例
一個靜態(tài)的模態(tài)窗口實例，如下面的實例所示：

<h2>創(chuàng)建模態(tài)框（Modal）</h2>
<!-- 按鈕觸發(fā)模態(tài)框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態(tài)框</button>
<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" id="myModalLabel">模態(tài)框（Modal）標題</h4>
            </div>
            <div class="modal-body">在這里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

image.png

代碼講解：

使用模態(tài)窗口查辩，您需要有某種觸發(fā)器胖笛。您可以使用按鈕或鏈接。這里我們使用的是按鈕宜岛。
如果您仔細查看上面的代碼长踊，您會發(fā)現(xiàn)在 <button> 標簽中，data-target="#myModal" 是您想要在頁面上加載的模態(tài)框的目標萍倡。您可以在頁面上創(chuàng)建多個模態(tài)框身弊，然后為每個模態(tài)框創(chuàng)建不同的觸發(fā)器。現(xiàn)在列敲，很明顯阱佛，您不能在同一時間加載多個模塊，但您可以在頁面上創(chuàng)建多個在不同時間進行加載戴而。
在模態(tài)框中需要注意兩點：

第一是 .modal凑术，用來把 <div> 的內容識別為模態(tài)框。
第二是 .fade class所意。當模態(tài)框被切換時淮逊，它會引起內容淡入淡出催首。

aria-labelledby="myModalLabel"，該屬性引用模態(tài)框的標題泄鹏。
屬性 aria-hidden="true" 用于保持模態(tài)窗口不可見郎任，直到觸發(fā)器被觸發(fā)為止（比如點擊在相關的按鈕上）。
<div class="modal-header">备籽，modal-header 是為模態(tài)窗口的頭部定義樣式的類舶治。
class="close"，close 是一個 CSS class车猬，用于為模態(tài)窗口的關閉按鈕設置樣式霉猛。
data-dismiss="modal"，是一個自定義的 HTML5 data 屬性诈唬。在這里它被用于關閉模態(tài)窗口韩脏。
class="modal-body"，是 Bootstrap CSS 的一個 CSS class铸磅，用于為模態(tài)窗口的主體設置樣式。
class="modal-footer"杭朱，是 Bootstrap CSS 的一個 CSS class阅仔，用于為模態(tài)窗口的底部設置樣式。
data-toggle="modal"弧械，HTML5 自定義的 data 屬性 data-toggle 用于打開模態(tài)窗口八酒。

選項

有一些選項可以用來定制模態(tài)窗口（Modal Window）的外觀和感觀，它們是通過 data 屬性或 JavaScript 來傳遞的刃唐。下表列出了這些選項：

image.png

方法

下面是一些可與 modal() 一起使用的有用的方法羞迷。

image.png

實例

下面的實例演示了方法的用法：

<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" id="myModalLabel">模態(tài)框（Modal）標題</h4>
            </div>
            <div class="modal-body">按下 ESC 按鈕退出。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

image.png

只需要點擊 ESC 鍵画饥，模態(tài)窗口即會退出衔瓮。

事件

下表列出了模態(tài)框中要用到事件。這些事件可在函數(shù)中當鉤子使用抖甘。

image.png

實例

下面的實例演示了事件的用法：

<!-- 模態(tài)框（Modal） -->
<h2>模態(tài)框（Modal）插件事件</h2>
<!-- 按鈕觸發(fā)模態(tài)框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態(tài)框</button>
<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" id="myModalLabel">模態(tài)框（Modal）標題</h4>
            </div>
            <div class="modal-body">點擊關閉按鈕檢查事件功能热鞍。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script>
$(function() {
    $('#myModal').modal('hide')
});
</script>
<script>
$(function() {
    $('#myModal').on('hide.bs.modal',
    function() {
        alert('嘿，我聽說您喜歡模態(tài)框...');
    })
});
</script>

image.png

Bootstrap 下拉菜單（Dropdown）插件

Bootstrap 下拉菜單這一章講解了下拉菜單衔彻，但是沒有涉及到交互部分薇宠，本章將具體講解下拉菜單的交互。使用下拉菜單（Dropdown）插件艰额，您可以向任何組件（比如導航欄澄港、標簽頁、膠囊式導航菜單柄沮、按鈕等）添加下拉菜單回梧。

如果您想要單獨引用該插件的功能逐工，那么您需要引用 dropdown.js∑或者泪喊，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js髓涯。

用法

您可以切換下拉菜單（Dropdown）插件的隱藏內容：

通過 data 屬性：向鏈接或按鈕添加 data-toggle="dropdown" 來切換下拉菜單袒啼，如下所示：

<div class="dropdown">
  <a data-toggle="dropdown" href="#">下拉菜單（Dropdown）觸發(fā)器</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

如果您需要保持鏈接完整（在瀏覽器不啟用 JavaScript 時有用），請使用 data-target 屬性代替 href="#"：

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    下拉菜單（Dropdown） <span class="caret"></span>
  </a>


  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

通過 JavaScript：通過 JavaScript 調用下拉菜單切換纬纪，請使用下面的方法：

$('.dropdown-toggle').dropdown()

實例

在導航欄內
下面的實例演示了在導航欄內的下拉菜單的用法：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java 
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的鏈接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

image.png

在標簽頁內
下面的實例演示了在標簽頁內的下拉菜單的用法：

<p>帶有下拉菜單的標簽頁</p>
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">Home</a></li>
    <li>
        <a href="#">SVN</a></li>
    <li>
        <a href="#">iOS</a></li>
    <li>
        <a href="#">VB.Net</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Java
            <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <a href="#">Swing</a></li>
            <li>
                <a href="#">jMeter</a></li>
            <li>
                <a href="#">EJB</a></li>
            <li class="divider"></li>
            <li>
                <a href="#">分離的鏈接</a></li>
        </ul>
    </li>
    <li>
        <a href="#">PHP</a></li>
</ul>

image.png

選項

沒有選項蚓再。

方法

下拉菜單切換有一個簡單的方法用來顯示或隱藏下拉菜單。

$().dropdown('toggle')

實例

下面的實例演示了下拉菜單（Dropdown）插件方法的用法：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div id="myexample">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="#">iOS</a>
            </li>
            <li>
                <a href="#">SVN</a>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a id="action-1" href="#">jmeter</a>
                    </li>
                    <li>
                        <a href="#">EJB</a>
                    </li>
                    <li>
                        <a href="#">Jasper Report</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">分離的鏈接</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">另一個分離的鏈接</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
</div>
<script>
$(function() {
    $(".dropdown-toggle").dropdown('toggle');
});
</script>

image.png

Bootstrap 滾動監(jiān)聽（Scrollspy）插件

滾動監(jiān)聽（Scrollspy）插件包各，即自動更新導航插件摘仅，會根據(jù)滾動條的位置自動更新對應的導航目標。其基本的實現(xiàn)是隨著您的滾動问畅，基于滾動條的位置向導航欄添加 .active class娃属。

如果您想要單獨引用該插件的功能，那么您需要引用 scrollspy.js护姆》耍或者，正如 Bootstrap 插件概覽一章中所提到卵皂，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js秩铆。

用法

您可以向頂部導航添加滾動監(jiān)聽行為：

通過 data 屬性：向您想要監(jiān)聽的元素（通常是 body）添加 data-spy="scroll"。然后添加帶有 Bootstrap .nav 組件的父元素的 ID 或 class 的屬性 data-target灯变。為了它能正常工作殴玛，您必須確保頁面主體中有匹配您所要監(jiān)聽鏈接的 ID 的元素存在。

<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
    <ul class="nav nav-tabs">
        ...
    </ul>
</div>
...
</body>

通過 JavaScript：您可以通過 JavaScript 調用滾動監(jiān)聽添祸，選取要監(jiān)聽的元素滚粟，然后調用 .scrollspy() 函數(shù)：

$('body').scrollspy({ target: '.navbar-example' })

實例

下面的實例演示了通過 data 屬性使用滾動監(jiān)聽（Scrollspy）插件：

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">切換導航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">教程名稱</a>
    </div>
    <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
        <ul class="nav navbar-nav">
            <li><a href="#ios">iOS</a></li>
            <li><a href="#svn">SVN</a></li>
            <li class="dropdown">
                <a href="#" id="navbarDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu"
                    aria-labelledby="navbarDrop1">
                    <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                    <li><a href="#ejb" tabindex="-1">ejb</a></li>
                    <li class="divider"></li>
                    <li><a href="#spring" tabindex="-1">spring</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div> 
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">iOS</h4>
    <p>iOS 是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone膝捞、iPod Touch 和 Apple
        TV坦刀。iOS 派生自 OS X，它們共享 Darwin 基礎蔬咬。OS X 操作系統(tǒng)是用在蘋果電腦上鲤遥，iOS 是蘋果的移動版本。
    </p>
    <h4 id="svn">SVN</h4>
    <p>Apache Subversion林艘，通掣悄危縮寫為 SVN，是一款開源的版本控制系統(tǒng)軟件狐援。Subversion 由 CollabNet 公司在 2000 年創(chuàng)建钢坦。但是現(xiàn)在它已經發(fā)展為 Apache Software Foundation 的一個項目究孕，因此擁有豐富的開發(fā)人員和用戶社區(qū)。
    </p>
    <h4 id="jmeter">jMeter</h4>
    <p>jMeter 是一款開源的測試軟件爹凹。它是 100% 純 Java 應用程序厨诸，用于負載和性能測試。
    </p>
    <h4 id="ejb">EJB</h4>
    <p>Enterprise Java Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應用程序的開發(fā)架構禾酱，部署在兼容應用程序服務器（比如 JBOSS微酬、Web Logic 等）的 J2EE 上。
    </p>
    <h4 id="spring">Spring</h4>
    <p>Spring 框架是一個開源的 Java 平臺颤陶，為快速開發(fā)功能強大的 Java 應用程序提供了完備的基礎設施支持颗管。
    </p>
    <p>Spring 框架最初是由 Rod Johnson 編寫的，在 2003 年 6 月首次發(fā)布于 Apache 2.0 許可證下滓走。
    </p>
</div>

image.png

選項

通過 data 屬性或 JavaScript 來傳遞垦江。下表列出了這些選項：

image.png

方法

.scrollspy('refresh')：當通過 JavaScript 調用 scrollspy 方法時，您需要調用 .refresh 方法來更新 DOM搅方。這在 DOM 的任意元素發(fā)生變更（即比吭，您添加或移除了某些元素）時非常有用。下面是使用該方法的語法腰懂。

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

實例

下面的實例演示了 .scrollspy('refresh') 方法的用法：

<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">切換導航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">教程名稱</a>
    </div>
    <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#ios">iOS</a></li>
            <li><a href="#svn">SVN</a></li>
            <li class="dropdown">
                <a href="#" id="navbarDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu"
                    aria-labelledby="navbarDrop1">
                    <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                    <li><a href="#ejb" tabindex="-1">ejb</a></li>
                    <li class="divider"></li>
                    <li><a href="#spring" tabindex="-1">spring</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <div class="section">
        <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
                    &times; 刪除該部分</a></small>
        </h4>
        <p>iOS 是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)梗逮。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple
            TV绣溜。iOS 派生自 OS X，它們共享 Darwin 基礎娄蔼。OS X 操作系統(tǒng)是用在蘋果電腦上怖喻，iOS 是蘋果的移動版本。</p>
    </div>
    <div class="section">
        <h4 id="svn">SVN<small></small></h4>
        <p>Apache Subversion岁诉，通趁校縮寫為 SVN，是一款開源的版本控制系統(tǒng)軟件涕癣。Subversion 由 CollabNet 公司在 2000 年創(chuàng)建哗蜈。但是現(xiàn)在它已經發(fā)展為 Apache Software Foundation 的一個項目，因此擁有豐富的開發(fā)人員和用戶社區(qū)坠韩。</p>
    </div>
    <div class="section">
        <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
                    &times; 刪除該部分</a></small>
        </h4>
        <p>jMeter 是一款開源的測試軟件距潘。它是 100% 純 Java 應用程序，用于負載和性能測試只搁。</p>
    </div>
    <div class="section">
        <h4 id="ejb">EJB</h4>
        <p>Enterprise Java Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應用程序的開發(fā)架構音比，部署在兼容應用程序服務器（比如 JBOSS、Web Logic 等）的 J2EE 上氢惋。</p>
    </div>
    <div class="section">
        <h4 id="spring">Spring</h4>
        <p>Spring 框架是一個開源的 Java 平臺洞翩，為快速開發(fā)功能強大的 Java 應用程序提供了完備的基礎設施支持稽犁。</p>
        <p>Spring 框架最初是由 Rod Johnson 編寫的，在 2003 年 6 月首次發(fā)布于 Apache 2.0 許可證下骚亿。</p>
    </div>
</div>
<script>
    $(function(){
        removeSection = function(e) {
            $(e).parents(".section").remove();
            $('[data-spy="scroll"]').each(function () {
                var $spy = $(this).scrollspy('refresh')
            });
        }
        $("#myScrollspy").scrollspy();
    });
</script>

image.png

事件

下表列出了滾動監(jiān)聽中要用到事件已亥。這些事件可在函數(shù)中當鉤子使用。

image.png

實例

下面的實例演示了 activate.bs.scrollspy 事件的用法：

<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">切換導航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">教程名稱</a>
    </div>
    <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#ios">iOS</a></li>
            <li><a href="#svn">SVN</a></li>
            <li class="dropdown">
                <a href="#" id="navbarDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu"
                    aria-labelledby="navbarDrop1">
                    <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                    <li><a href="#ejb" tabindex="-1">ejb</a></li>
                    <li class="divider"></li>
                    <li><a href="#spring" tabindex="-1">spring</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div> 
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <div class="section">
        <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
                    &times; 刪除該部分</a></small>
        </h4>
        <p>iOS 是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)来屠。最初是于 2007 年首次發(fā)布 iPhone虑椎、iPod Touch 和 Apple
            TV。iOS 派生自 OS X的妖，它們共享 Darwin 基礎绣檬。OS X 操作系統(tǒng)是用在蘋果電腦上，iOS 是蘋果的移動版本嫂粟。</p>
    </div>
    <div class="section">
        <h4 id="svn">SVN<small></small></h4>
        <p>Apache Subversion娇未，通常縮寫為 SVN星虹，是一款開源的版本控制系統(tǒng)軟件零抬。Subversion 由 CollabNet 公司在 2000 年創(chuàng)建。但是現(xiàn)在它已經發(fā)展為 Apache Software Foundation 的一個項目宽涌，因此擁有豐富的開發(fā)人員和用戶社區(qū)平夜。</p>
    </div>
    <div class="section">
        <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
                    &times; 刪除該部分</a></small>
        </h4>
        <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序卸亮，用于負載和性能測試忽妒。</p>
    </div>
    <div class="section">
        <h4 id="ejb">EJB</h4>
        <p>Enterprise Java Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應用程序的開發(fā)架構，部署在兼容應用程序服務器（比如 JBOSS兼贸、Web Logic 等）的 J2EE 上段直。</p>
    </div>
    <div class="section">
        <h4 id="spring">Spring</h4>
        <p>Spring 框架是一個開源的 Java 平臺，為快速開發(fā)功能強大的 Java 應用程序提供了完備的基礎設施支持溶诞。</p>
        <p>Spring 框架最初是由 Rod Johnson 編寫的鸯檬，在 2003 年 6 月首次發(fā)布于 Apache 2.0 許可證下饮六。</p>
    </div>
</div>
<span id="activeitem" style="color:red;"></span>
<script>
    $(function(){
        removeSection = function(e) {
            $(e).parents(".section").remove();
            $('[data-spy="scroll"]').each(function () {
                var $spy = $(this).scrollspy('refresh')
            });
        }
        $("#myScrollspy").scrollspy();
        $('#myScrollspy').on('activate.bs.scrollspy', function () {
            var currentItem = $(".nav li.active > a").text();
            $("#activeitem").html("目前您正在查看 - " + currentItem);
        })
    });
</script>

image.png

創(chuàng)建水平滾動監(jiān)聽

以下實例演示了如何創(chuàng)建水平滾動監(jiān)聽:

<!-- The navbar: used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
  <ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>

<!-- The scrollable area -->
<div data-spy="scroll" data-target=".navbar" data-offset="12">
  <!-- Section 1 -->
  <div id="section1">
    <h1>Section 1</h1>
    <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
  </div>
  ...
</div>

image.png

如何創(chuàng)建垂直滾動監(jiān)聽

以下實例演示了如何創(chuàng)建垂直滾動監(jiān)聽:

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

  <div class="container">
    <div class="row">
      <nav class="col-sm-3" id="myScrollspy">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#section1">Section 1</a></li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9">
        <div id="section1"> 
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the navigation list while scrolling!</p>
        </div> 
        ...
      </div>
    </div>
  </div>

</body>

image.png

Bootstrap 標簽頁（Tab）插件

標簽頁（Tab）在 Bootstrap 導航元素一章中介紹過区匠。通過結合一些 data 屬性，您可以輕松地創(chuàng)建一個標簽頁界面缺虐。通過這個插件您可以把內容放置在標簽頁或者是膠囊式標簽頁甚至是下拉菜單標簽頁中枉圃。
如果您想要單獨引用該插件的功能功茴，那么您需要引用 tab.js⊙镀眩或者痊土，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js墨林。

用法

您可以通過以下兩種方式啟用標簽頁：

通過 data 屬性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到錨文本鏈接中赁酝。

添加 nav 和 nav-tabs 類到 ul 中犯祠，將會應用 Bootstrap 標簽樣式，添加 nav 和 nav-pills 類到 ul 中酌呆，將會應用 Bootstrap 膠囊式樣式衡载。

<ul class="nav nav-tabs">
    <li><a href="#identifier" data-toggle="tab">Home</a></li>
    ...
</ul>

通過 JavaScript：您可以使用 Javascript 來啟用標簽頁，如下所示：

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

下面的實例演示了以不同的方式來激活各個標簽頁：

// 通過名稱選取標簽頁
$('#myTab a[href="#profile"]').tab('show')

// 選取第一個標簽頁
$('#myTab a:first').tab('show')

// 選取最后一個標簽頁
$('#myTab a:last').tab('show')

// 選取第三個標簽頁（從 0 開始索引）
$('#myTab li:eq(2) a').tab('show')

淡入淡出效果

如果需要為標簽頁設置淡入淡出效果隙袁，請?zhí)砑?.fade 到每個 .tab-pane 后面痰娱。第一個標簽頁必須添加 .in 類，以便淡入顯示初始內容菩收，如下面實例所示：

<div class="tab-content">
    <div class="tab-pane fade in active" id="home">...</div>
    <div class="tab-pane fade" id="svn">...</div>
    <div class="tab-pane fade" id="ios">...</div>
    <div class="tab-pane fade" id="java">...</div>
</div>

實例

下面的實例演示了使用 data 屬性的標簽頁（Tab）插件及其淡入淡出的效果：

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            菜鳥教程
        </a>
    </li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
           data-toggle="dropdown">Java
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>菜鳥教程是一個提供最新的web技術站點梨睁，本站免費提供了建站相關的技術文檔，幫助廣大web技術愛好者快速入門并建立自己的網站娜饵。菜鳥先飛早入行——學的不僅是技術坡贺，更是夢想。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)箱舞。最初是于 2007 年首次發(fā)布 iPhone遍坟、iPod Touch 和 Apple
            TV。iOS 派生自 OS X晴股，它們共享 Darwin 基礎愿伴。OS X 操作系統(tǒng)是用在蘋果電腦上，iOS 是蘋果的移動版本电湘。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款開源的測試軟件隔节。它是 100% 純 Java 應用程序，用于負載和性能測試寂呛。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應用程序的開發(fā)架構官帘，部署在兼容應用程序服務器（比如 JBOSS、Web Logic 等）的 J2EE 上昧谊。
        </p>
    </div>
</div>

image.png

方法

.$().tab：該方法可以激活標簽頁元素和內容容器。標簽頁需要用一個 data-target 或者一個指向 DOM 中容器節(jié)點的 href酗捌。

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>
    .....
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    .....
</div>
<script>
    $(function () {
        $('#myTab a:last').tab('show')
    })
</script>

實例

下面的實例演示了標簽頁（Tab）插件方法 .tab 的用法呢诬。在本實例中，第二個標簽頁 iOS 是激活的：

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">
            菜鳥教程</a>
    </li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
           data-toggle="dropdown">Java <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">
                    jmeter</a>
            </li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">
                    ejb</a>
            </li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>菜鳥教程是一個提供最新的web技術站點胖缤，本站免費提供了建站相關的技術文檔尚镰，幫助廣大web技術愛好者快速入門并建立自己的網站。菜鳥先飛早入行——學的不僅是技術哪廓，更是夢想狗唉。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone涡真、iPod Touch 和 Apple
            TV分俯。iOS 派生自 OS X肾筐，它們共享 Darwin 基礎。OS X 操作系統(tǒng)是用在蘋果電腦上缸剪，iOS 是蘋果的移動版本吗铐。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序杏节，用于負載和性能測試唬渗。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應用程序的開發(fā)架構，部署在兼容應用程序服務器（比如 JBOSS奋渔、Web Logic 等）的 J2EE 上镊逝。
        </p>
    </div>
</div>
<script>
    $(function () {
        $('#myTab li:eq(1) a').tab('show');
    });
</script>

事件

下表列出了標簽頁（Tab）插件中要用到的事件。這些事件可在函數(shù)中當鉤子使用嫉鲸。

image.png

實例

下面的實例演示了標簽頁（Tab）插件事件的用法撑蒜。在本實例中，將顯示當前和前一個訪問過的標簽頁：

<hr>
<p class="active-tab"><strong>激活的標簽頁</strong>：<span></span></p>
<p class="previous-tab"><strong>前一個激活的標簽頁</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">
            菜鳥教程</a></li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
           data-toggle="dropdown">
            Java <b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>菜鳥教程是一個提供最新的web技術站點充坑，本站免費提供了建站相關的技術文檔减江，幫助廣大web技術愛好者快速入門并建立自己的網站。菜鳥先飛早入行——學的不僅是技術捻爷，更是夢想辈灼。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone也榄、iPod Touch 和 Apple
            TV巡莹。iOS 派生自 OS X，它們共享 Darwin 基礎甜紫。OS X 操作系統(tǒng)是用在蘋果電腦上降宅，iOS 是蘋果的移動版本。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款開源的測試軟件囚霸。它是 100% 純 Java 應用程序腰根，用于負載和性能測試。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應用程序的開發(fā)架構拓型，部署在兼容應用程序服務器（比如 JBOSS额嘿、Web Logic 等）的 J2EE 上。
        </p>
    </div>
</div>
<script>
    $(function(){
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            // 獲取已激活的標簽頁的名稱
            var activeTab = $(e.target).text();
            // 獲取前一個激活的標簽頁的名稱
            var previousTab = $(e.relatedTarget).text();
            $(".active-tab span").html(activeTab);
            $(".previous-tab span").html(previousTab);
        });
    });
</script>

image.png

Bootstrap 提示工具（Tooltip）插件

當您想要描述一個鏈接的時候劣挫，提示工具（Tooltip）就顯得非常有用册养。提示工具（Tooltip）插件是受 Jason Frame 寫的 jQuery.tipsy 的啟發(fā)。提示工具（Tooltip）插件做了很多改進压固，例如不需要依賴圖像球拦，而是改用 CSS 實現(xiàn)動畫效果，用 data 屬性存儲標題信息。
如果您想要單獨引用該插件的功能坎炼，那么您需要引用 tooltip.js愧膀。或者点弯，正如 Bootstrap 插件概覽一章中所提到扇调，您可以引用bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

提示工具（Tooltip）插件根據(jù)需求生成內容和標記抢肛，默認情況下是把提示工具（tooltip）放在它們的觸發(fā)元素后面狼钮。您可以有以下兩種方式添加提示工具（tooltip）：

通過 data 屬性：如需添加一個提示工具（tooltip），只需向一個錨標簽添加 data-toggle="tooltip" 即可捡絮。錨的 title 即為提示工具（tooltip）的文本熬芜。默認情況下，插件把提示工具（tooltip）設置在頂部福稳。

<a href="#" data-toggle="tooltip" title="Example tooltip">請懸停在我的上面</a>

通過 JavaScript：通過 JavaScript 觸發(fā)提示工具（tooltip）：

$('#identifier').tooltip(options)

提示工具（Tooltip）插件不像之前所討論的下拉菜單及其他插件那樣涎拉，它不是純 CSS 插件。如需使用該插件的圆，您必須使用 jquery 激活它（讀取 javascript）鼓拧。使用下面的腳本來啟用頁面中的所有的提示工具（tooltip）：

$(function () { $("[data-toggle='tooltip']").tooltip(); });

實例

下面的實例演示了通過 data 屬性使用提示工具（Tooltip）插件的用法。

<h4>提示工具（Tooltip）插件 - 錨</h4>
這是一個 <a href="#" class="tooltip-test" data-toggle="tooltip"
        title="默認的 Tooltip">
    默認的 Tooltip
</a>.
這是一個 <a href="#" class="tooltip-test" data-toggle="tooltip"
        data-placement="left" title="左側的 Tooltip">
    左側的 Tooltip
</a>.
這是一個 <a href="#" data-toggle="tooltip" data-placement="top"
        title="頂部的 Tooltip">
    頂部的 Tooltip
</a>.
這是一個 <a href="#" data-toggle="tooltip" data-placement="bottom"
        title="底部的 Tooltip">
    底部的 Tooltip
</a>.
這是一個 <a href="#" data-toggle="tooltip" data-placement="right"
        title="右側的 Tooltip">
    右側的 Tooltip
</a>
 
<br>
 
<h4>提示工具（Tooltip）插件 - 按鈕</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        title="默認的 Tooltip">
    默認的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="left" title="左側的 Tooltip">
    左側的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="top" title="頂部的 Tooltip">
    頂部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="bottom" title="底部的 Tooltip">
    底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="right" title="右側的 Tooltip">
    右側的 Tooltip
</button>
<script>
    $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

image.png

選項

有一些選項是通過 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）添加或通過 JavaScript 調用的越妈。下表列出了這些選項：

image.png

方法

下面是一些提示工具（Tooltip）插件中有用的方法：

image.png

實例

下面的實例演示了提示工具（Tooltip）插件方法的用法季俩。

<div style="padding: 100px 100px 10px;">
    這是一個 <a href="#" class="tooltip-show" data-toggle="tooltip"
            title="show">Tooltip 方法 show
    </a>.
 
    這是一個 <a href="#" class="tooltip-hide" data-toggle="tooltip"
            data-placement="left" title="hide">Tooltip 方法 hide
    </a>.
 
    這是一個 <a href="#" class="tooltip-destroy" data-toggle="tooltip"
            data-placement="top" title="destroy">Tooltip 方法 destroy
    </a>.
 
    這是一個 <a href="#" class="tooltip-toggle" data-toggle="tooltip"
            data-placement="bottom" title="toggle">Tooltip 方法 toggle
    </a>.
    <br><br><br><br><br><br>
    <p class="tooltip-options" >
        這是一個 <a href="#" data-toggle="tooltip" title="<h2>'am Header2
         </h2>">Tooltip 方法 options
        </a>.
    </p>
 
    <script>
$(function () { $('.tooltip-show').tooltip('show');});
        $(function () { $('.tooltip-hide').tooltip('hide');});
        $(function () { $('.tooltip-destroy').tooltip('destroy');});
        $(function () { $('.tooltip-toggle').tooltip('toggle');});
        $(function () { $(".tooltip-options a").tooltip({html : true });
        });
</script>
</div>

image.png

事件

下表列出了提示工具（Tooltip）插件中要用到的事件。這些事件可在函數(shù)中當鉤子使用梅掠。

image.png

實例
下面的實例演示了提示工具（Tooltip）插件事件的用法酌住。

<h4>提示工具（Tooltip）插件 - 錨</h4>
這是一個 <a href="#" class="tooltip-show" data-toggle="tooltip"
        title="默認的 Tooltip">默認的 Tooltip
</a>.
 
<script>
$(function () { $('.tooltip-show').tooltip('show');});
    $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
        alert("Alert message on show");
    })
});
</script>

image.png

最后編輯于：2018.10.13 14:11:45

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市阎抒，隨后出現(xiàn)的幾起案子酪我，更是在濱河造成了極大的恐慌，老刑警劉巖且叁，帶你破解...
沈念sama閱讀 216,496評論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件都哭，死亡現(xiàn)場離奇詭異，居然都是意外死亡逞带，警方通過查閱死者的電腦和手機质涛，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,407評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來掰担，“玉大人，你說我怎么就攤上這事怒炸〈ィ” “怎么了？”我有些...
開封第一講書人閱讀 162,632評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長勺疼。經常有香客問我教寂，道長，這世上最難降的妖魔是什么执庐？我笑而不...
開封第一講書人閱讀 58,180評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任酪耕，我火速辦了婚禮，結果婚禮上轨淌，老公的妹妹穿的比我還像新娘迂烁。我一直安慰自己，他們只是感情好递鹉，可當我...
茶點故事閱讀 67,198評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布盟步。她就那樣靜靜地躺著，像睡著了一般躏结。火紅的嫁衣襯著肌膚如雪却盘。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,165評論 1贊 299
城市分裂傳說
那天媳拴，我揣著相機與錄音黄橘，去河邊找鬼。笑死屈溉，一個胖子當著我的面吹牛塞关，可吹牛的內容都是我干的。我是一名探鬼主播语婴，決...
沈念sama閱讀 40,052評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼描孟，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了砰左？” 一聲冷哼從身側響起匿醒，我...
開封第一講書人閱讀 38,910評論 0贊 274
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎缠导，沒想到半個月后廉羔，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
沈念sama閱讀 45,324評論 1贊 310
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡僻造，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,542評論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年憋他，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片髓削。...
茶點故事閱讀 39,711評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡竹挡，死狀恐怖，靈堂內的尸體忽然破棺而出立膛，到底是詐尸還是另有隱情揪罕，我是刑警寧澤梯码，帶...
沈念sama閱讀 35,424評論 5贊 343
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站好啰，受9級特大地震影響轩娶，放射性物質發(fā)生泄漏。R本人自食惡果不足惜框往，卻給世界環(huán)境...
茶點故事閱讀 41,017評論 3贊 326
男人毒藥：我在死后第九天來索命
文/蒙蒙一鳄抒、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧椰弊，春花似錦许溅、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,668評論 0贊 22
一樁弒父案闹司，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至沐飘，卻和暖如春游桩，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背耐朴。一陣腳步聲響...
開封第一講書人閱讀 32,823評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工借卧，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人筛峭。一個月前我還...
沈念sama閱讀 47,722評論 2贊 368
代替公主和親
正文我出身青樓铐刘，卻偏偏與公主長得像，于是被迫代替她去往敵國和親影晓。傳聞我的和親對象是個殘疾皇子镰吵，可洞房花燭夜當晚...
茶點故事閱讀 44,611評論 2贊 353

2018-10-11Bootstrap08

Bootstrap 插件概覽

data 屬性

編程方式的 API

避免命名空間沖突

事件

Bootstrap 過渡效果（Transition）插件

使用案例

Bootstrap 模態(tài)框（Modal）插件

用法

選項

方法

實例

事件

實例

Bootstrap 下拉菜單（Dropdown）插件

用法

實例

選項

方法

實例

Bootstrap 滾動監(jiān)聽（Scrollspy）插件

用法

實例

選項

方法

實例

事件

實例

更多實例

創(chuàng)建水平滾動監(jiān)聽

如何創(chuàng)建垂直滾動監(jiān)聽

Bootstrap 標簽頁（Tab）插件

用法

淡入淡出效果

實例

方法

實例

事件

實例

Bootstrap 提示工具（Tooltip）插件

用法

實例

選項

方法

實例

事件

推薦閱讀更多精彩內容