女人射精视频,国内在线精品久久,色色干在线视频

Bootstrap 插件概覽

在前面布局組件章節(jié)中所討論到的組件僅僅是個(gè)開(kāi)始。Bootstrap 自帶 12 種 jQuery 插件，擴(kuò)展了功能，可以給站點(diǎn)添加更多的互動(dòng)。即使您不是一名高級(jí)的 JavaScript 開(kāi)發(fā)人員，您也可以著手學(xué)習(xí) Bootstrap 的 JavaScript 插件。利用 Bootstrap 數(shù)據(jù) API（Bootstrap Data API），大部分的插件可以在不編寫(xiě)任何代碼的情況被觸發(fā)。

站點(diǎn)引用 Bootstrap 插件的方式有兩種：
單獨(dú)引用：使用 Bootstrap 的個(gè)別的 *.js 文件。一些插件和 CSS 組件依賴(lài)于其他插件。如果您單獨(dú)引用插件，請(qǐng)先確保弄清這些插件之間的依賴(lài)關(guān)系。
編譯（同時(shí)）引用：使用 bootstrap.js 或壓縮版的 bootstrap.min.js。
不要嘗試同時(shí)引用這兩個(gè)文件，因?yàn)?bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。
所有的插件依賴(lài)于 jQuery。所以必須在插件文件之前引用 jQuery。請(qǐng)?jiān)L問(wèn) bower.json 查看 Bootstrap 當(dāng)前支持的 jQuery 版本。

data 屬性

你可以?xún)H僅通過(guò) data 屬性 API 就能使用所有的 Bootstrap 插件，無(wú)需寫(xiě)一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應(yīng)該是你的首選方式。
話(huà)又說(shuō)回來(lái)，在某些情況下可能需要將此功能關(guān)閉。因此，我們還提供了關(guān)閉 data 屬性 API 的方法，即解除以 data-api 為命名空間并綁定在文檔上的事件。就像下面這樣：

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

如需關(guān)閉一個(gè)特定的插件，只需要在 data-api 命名空間前加上該插件的名稱(chēng)作為命名空間即可，如下所示：

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

編程方式的 API

我們?yōu)樗?Bootstrap 插件提供了純 JavaScript 方式的 API。所有公開(kāi)的 API 都是支持單獨(dú)或鏈?zhǔn)秸{(diào)用方式，并且返回其所操作的元素集合（注：和jQuery的調(diào)用形式一致）。例如：

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

所有的方法都可以接受一個(gè)可選的選項(xiàng)對(duì)象作為參數(shù)，或者一個(gè)代表特定方法的字符串，或者不帶任何參數(shù)（這種情況下，將會(huì)初始化插件為默認(rèn)行為），如下所示：

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

每個(gè)插件在 Constructor 屬性上也暴露了其原始的構(gòu)造函數(shù)：$.fn.popover.Constructor。如果您想獲取某個(gè)特定插件的實(shí)例，可以直接通過(guò)頁(yè)面元素獲?。?/p>

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

避免命名空間沖突

某些時(shí)候 Bootstrap 插件可能需要與其他 UI 框架一起使用。在這種情況下，可能會(huì)發(fā)生命名空間沖突。如果不幸發(fā)生了這種情況，你可以通過(guò)調(diào)用插件的 .noConflict 方法恢復(fù)其原始值。

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

事件

Bootstrap 為大多數(shù)插件的獨(dú)特行為提供了自定義事件。一般來(lái)說(shuō)，這些事件有兩種形式：

動(dòng)詞不定式：這會(huì)在事件開(kāi)始時(shí)被觸發(fā)。例如 ex: show。動(dòng)詞不定式事件提供了 preventDefault 功能。這使得在事件開(kāi)始前可以停止操作的執(zhí)行。

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

過(guò)去分詞形式：這會(huì)在動(dòng)作執(zhí)行完畢之后被觸發(fā)。例如 ex: shown。

Bootstrap 過(guò)渡效果（Transition）插件

過(guò)渡效果（Transition）插件提供了簡(jiǎn)單的過(guò)渡效果。
如果您想要單獨(dú)引用該插件的功能，那么除了其他的 JS 文件，您還需要引用 transition.js?；蛘?，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

Transition.js 是 transitionEnd 事件和 CSS 過(guò)渡效果模擬器的基本幫助器類(lèi)。它被其他插件用來(lái)檢查 CSS 過(guò)渡效果支持，并用來(lái)獲取過(guò)渡效果。

使用案例

過(guò)渡效果（Transition）插件的使用案例：

具有幻燈片或淡入效果的模態(tài)對(duì)話(huà)框。具體實(shí)例參見(jiàn) Bootstrap 模態(tài)框（Modal）插件。
具有淡出效果的標(biāo)簽頁(yè)。具體實(shí)例參見(jiàn) Bootstrap 標(biāo)簽頁(yè)（Tab）插件。
具有淡出效果的警告框。具體實(shí)例參見(jiàn) Bootstrap 警告框（Alert）插件。
具有幻燈片效果的輪播板。具體實(shí)例參見(jiàn) Bootstrap 輪播（Carousel）插件。

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

模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來(lái)自一個(gè)單獨(dú)的源的內(nèi)容，可以在不離開(kāi)父窗體的情況下有一些互動(dòng)。子窗體可提供信息、交互等。
如果您想要單獨(dú)引用該插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

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

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

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

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

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

image.png

代碼講解：

使用模態(tài)窗口，您需要有某種觸發(fā)器。您可以使用按鈕或鏈接。這里我們使用的是按鈕。
如果您仔細(xì)查看上面的代碼，您會(huì)發(fā)現(xiàn)在 <button> 標(biāo)簽中，data-target="#myModal" 是您想要在頁(yè)面上加載的模態(tài)框的目標(biāo)。您可以在頁(yè)面上創(chuàng)建多個(gè)模態(tài)框，然后為每個(gè)模態(tài)框創(chuàng)建不同的觸發(fā)器?，F(xiàn)在，很明顯，您不能在同一時(shí)間加載多個(gè)模塊，但您可以在頁(yè)面上創(chuàng)建多個(gè)在不同時(shí)間進(jìn)行加載。
在模態(tài)框中需要注意兩點(diǎn)：

第一是 .modal，用來(lái)把 <div> 的內(nèi)容識(shí)別為模態(tài)框。
第二是 .fade class。當(dāng)模態(tài)框被切換時(shí)，它會(huì)引起內(nèi)容淡入淡出。

aria-labelledby="myModalLabel"，該屬性引用模態(tài)框的標(biāo)題。
屬性 aria-hidden="true" 用于保持模態(tài)窗口不可見(jiàn)，直到觸發(fā)器被觸發(fā)為止（比如點(diǎn)擊在相關(guān)的按鈕上）。
<div class="modal-header">，modal-header 是為模態(tài)窗口的頭部定義樣式的類(lèi)。
class="close"，close 是一個(gè) CSS class，用于為模態(tài)窗口的關(guān)閉按鈕設(shè)置樣式。
data-dismiss="modal"，是一個(gè)自定義的 HTML5 data 屬性。在這里它被用于關(guān)閉模態(tài)窗口。
class="modal-body"，是 Bootstrap CSS 的一個(gè) CSS class，用于為模態(tài)窗口的主體設(shè)置樣式。
class="modal-footer"，是 Bootstrap CSS 的一個(gè) CSS class，用于為模態(tài)窗口的底部設(shè)置樣式。
data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用于打開(kāi)模態(tài)窗口。

選項(xiàng)

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

image.png

方法

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

image.png

實(shí)例

下面的實(shí)例演示了方法的用法：

<!-- 模態(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）標(biāo)題</h4>
            </div>
            <div class="modal-body">按下 ESC 按鈕退出。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

image.png

只需要點(diǎn)擊 ESC 鍵，模態(tài)窗口即會(huì)退出。

事件

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

image.png

實(shí)例

下面的實(shí)例演示了事件的用法：

<!-- 模態(tài)框（Modal） -->
<h2>模態(tài)框（Modal）插件事件</h2>
<!-- 按鈕觸發(fā)模態(tài)框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開(kāi)始演示模態(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）標(biāo)題</h4>
            </div>
            <div class="modal-body">點(diǎn)擊關(guān)閉按鈕檢查事件功能。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</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īng)說(shuō)您喜歡模態(tài)框...');
    })
});
</script>

image.png

Bootstrap 下拉菜單（Dropdown）插件

Bootstrap 下拉菜單這一章講解了下拉菜單，但是沒(méi)有涉及到交互部分，本章將具體講解下拉菜單的交互。使用下拉菜單（Dropdown）插件，您可以向任何組件（比如導(dǎo)航欄、標(biāo)簽頁(yè)、膠囊式導(dǎo)航菜單、按鈕等）添加下拉菜單。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用 dropdown.js?；蛘撸?Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

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

通過(guò) data 屬性：向鏈接或按鈕添加 data-toggle="dropdown" 來(lái)切換下拉菜單，如下所示：

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

如果您需要保持鏈接完整（在瀏覽器不啟用 JavaScript 時(shí)有用），請(qǐng)使用 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>

通過(guò) JavaScript：通過(guò) JavaScript 調(diào)用下拉菜單切換，請(qǐng)使用下面的方法：

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

實(shí)例

在導(dǎo)航欄內(nèi)
下面的實(shí)例演示了在導(dǎo)航欄內(nèi)的下拉菜單的用法：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥(niǎo)教程</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="#">另一個(gè)分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

image.png

在標(biāo)簽頁(yè)內(nèi)
下面的實(shí)例演示了在標(biāo)簽頁(yè)內(nèi)的下拉菜單的用法：

<p>帶有下拉菜單的標(biāo)簽頁(yè)</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

選項(xiàng)

沒(méi)有選項(xiàng)。

方法

下拉菜單切換有一個(gè)簡(jiǎn)單的方法用來(lái)顯示或隱藏下拉菜單。

$().dropdown('toggle')

實(shí)例

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

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥(niǎo)教程</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="#">另一個(gè)分離的鏈接</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
</div>
<script>
$(function() {
    $(".dropdown-toggle").dropdown('toggle');
});
</script>

image.png

Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件

滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件，即自動(dòng)更新導(dǎo)航插件，會(huì)根據(jù)滾動(dòng)條的位置自動(dòng)更新對(duì)應(yīng)的導(dǎo)航目標(biāo)。其基本的實(shí)現(xiàn)是隨著您的滾動(dòng)，基于滾動(dòng)條的位置向?qū)Ш綑谔砑?.active class。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

您可以向頂部導(dǎo)航添加滾動(dòng)監(jiān)聽(tīng)行為：

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

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

通過(guò) JavaScript：您可以通過(guò) JavaScript 調(diào)用滾動(dòng)監(jiān)聽(tīng)，選取要監(jiān)聽(tīng)的元素，然后調(diào)用 .scrollspy() 函數(shù)：

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

實(shí)例

下面的實(shí)例演示了通過(guò) data 屬性使用滾動(dòng)監(jiān)聽(tīng)（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">切換導(dǎo)航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">教程名稱(chēng)</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 是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple
        TV。iOS 派生自 OS X，它們共享 Darwin 基礎(chǔ)。OS X 操作系統(tǒng)是用在蘋(píng)果電腦上，iOS 是蘋(píng)果的移動(dòng)版本。
    </p>
    <h4 id="svn">SVN</h4>
    <p>Apache Subversion，通?？s寫(xiě)為 SVN，是一款開(kāi)源的版本控制系統(tǒng)軟件。Subversion 由 CollabNet 公司在 2000 年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為 Apache Software Foundation 的一個(gè)項(xiàng)目，因此擁有豐富的開(kāi)發(fā)人員和用戶(hù)社區(qū)。
    </p>
    <h4 id="jmeter">jMeter</h4>
    <p>jMeter 是一款開(kāi)源的測(cè)試軟件。它是 100% 純 Java 應(yīng)用程序，用于負(fù)載和性能測(cè)試。
    </p>
    <h4 id="ejb">EJB</h4>
    <p>Enterprise Java Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如 JBOSS、Web Logic 等）的 J2EE 上。
    </p>
    <h4 id="spring">Spring</h4>
    <p>Spring 框架是一個(gè)開(kāi)源的 Java 平臺(tái)，為快速開(kāi)發(fā)功能強(qiáng)大的 Java 應(yīng)用程序提供了完備的基礎(chǔ)設(shè)施支持。
    </p>
    <p>Spring 框架最初是由 Rod Johnson 編寫(xiě)的，在 2003 年 6 月首次發(fā)布于 Apache 2.0 許可證下。
    </p>
</div>

image.png

選項(xiàng)

通過(guò) data 屬性或 JavaScript 來(lái)傳遞。下表列出了這些選項(xiàng)：

image.png

方法

.scrollspy('refresh')：當(dāng)通過(guò) JavaScript 調(diào)用 scrollspy 方法時(shí)，您需要調(diào)用 .refresh 方法來(lái)更新 DOM。這在 DOM 的任意元素發(fā)生變更（即，您添加或移除了某些元素）時(shí)非常有用。下面是使用該方法的語(yǔ)法。

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

實(shí)例

下面的實(shí)例演示了 .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">切換導(dǎo)航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">教程名稱(chēng)</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 是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它們共享 Darwin 基礎(chǔ)。OS X 操作系統(tǒng)是用在蘋(píng)果電腦上，iOS 是蘋(píng)果的移動(dòng)版本。</p>
    </div>
    <div class="section">
        <h4 id="svn">SVN<small></small></h4>
        <p>Apache Subversion，通?？s寫(xiě)為 SVN，是一款開(kāi)源的版本控制系統(tǒng)軟件。Subversion 由 CollabNet 公司在 2000 年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為 Apache Software Foundation 的一個(gè)項(xiàng)目，因此擁有豐富的開(kāi)發(fā)人員和用戶(hù)社區(qū)。</p>
    </div>
    <div class="section">
        <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
                    &times; 刪除該部分</a></small>
        </h4>
        <p>jMeter 是一款開(kāi)源的測(cè)試軟件。它是 100% 純 Java 應(yīng)用程序，用于負(fù)載和性能測(cè)試。</p>
    </div>
    <div class="section">
        <h4 id="ejb">EJB</h4>
        <p>Enterprise Java Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
    </div>
    <div class="section">
        <h4 id="spring">Spring</h4>
        <p>Spring 框架是一個(gè)開(kāi)源的 Java 平臺(tái)，為快速開(kāi)發(fā)功能強(qiáng)大的 Java 應(yīng)用程序提供了完備的基礎(chǔ)設(shè)施支持。</p>
        <p>Spring 框架最初是由 Rod Johnson 編寫(xiě)的，在 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

事件

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

image.png

實(shí)例

下面的實(shí)例演示了 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">切換導(dǎo)航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">教程名稱(chēng)</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 是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它們共享 Darwin 基礎(chǔ)。OS X 操作系統(tǒng)是用在蘋(píng)果電腦上，iOS 是蘋(píng)果的移動(dòng)版本。</p>
    </div>
    <div class="section">
        <h4 id="svn">SVN<small></small></h4>
        <p>Apache Subversion，通?？s寫(xiě)為 SVN，是一款開(kāi)源的版本控制系統(tǒng)軟件。Subversion 由 CollabNet 公司在 2000 年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為 Apache Software Foundation 的一個(gè)項(xiàng)目，因此擁有豐富的開(kāi)發(fā)人員和用戶(hù)社區(qū)。</p>
    </div>
    <div class="section">
        <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
                    &times; 刪除該部分</a></small>
        </h4>
        <p>jMeter 是一款開(kāi)源的測(cè)試軟件。它是 100% 純 Java 應(yīng)用程序，用于負(fù)載和性能測(cè)試。</p>
    </div>
    <div class="section">
        <h4 id="ejb">EJB</h4>
        <p>Enterprise Java Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
    </div>
    <div class="section">
        <h4 id="spring">Spring</h4>
        <p>Spring 框架是一個(gè)開(kāi)源的 Java 平臺(tái)，為快速開(kāi)發(fā)功能強(qiáng)大的 Java 應(yīng)用程序提供了完備的基礎(chǔ)設(shè)施支持。</p>
        <p>Spring 框架最初是由 Rod Johnson 編寫(xiě)的，在 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)建水平滾動(dòng)監(jiān)聽(tīng)

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

<!-- 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)建垂直滾動(dòng)監(jiān)聽(tīng)

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

<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 標(biāo)簽頁(yè)（Tab）插件

標(biāo)簽頁(yè)（Tab）在 Bootstrap 導(dǎo)航元素一章中介紹過(guò)。通過(guò)結(jié)合一些 data 屬性，您可以輕松地創(chuàng)建一個(gè)標(biāo)簽頁(yè)界面。通過(guò)這個(gè)插件您可以把內(nèi)容放置在標(biāo)簽頁(yè)或者是膠囊式標(biāo)簽頁(yè)甚至是下拉菜單標(biāo)簽頁(yè)中。
如果您想要單獨(dú)引用該插件的功能，那么您需要引用 tab.js?；蛘撸?Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

您可以通過(guò)以下兩種方式啟用標(biāo)簽頁(yè)：

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

添加 nav 和 nav-tabs 類(lèi)到 ul 中，將會(huì)應(yīng)用 Bootstrap 標(biāo)簽樣式，添加 nav 和 nav-pills 類(lèi)到 ul 中，將會(huì)應(yīng)用 Bootstrap 膠囊式樣式。

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

通過(guò) JavaScript：您可以使用 Javascript 來(lái)啟用標(biāo)簽頁(yè)，如下所示：

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

下面的實(shí)例演示了以不同的方式來(lái)激活各個(gè)標(biāo)簽頁(yè)：

// 通過(guò)名稱(chēng)選取標(biāo)簽頁(yè)
$('#myTab a[href="#profile"]').tab('show')

// 選取第一個(gè)標(biāo)簽頁(yè)
$('#myTab a:first').tab('show')

// 選取最后一個(gè)標(biāo)簽頁(yè)
$('#myTab a:last').tab('show')

// 選取第三個(gè)標(biāo)簽頁(yè)（從 0 開(kāi)始索引）
$('#myTab li:eq(2) a').tab('show')

淡入淡出效果

如果需要為標(biāo)簽頁(yè)設(shè)置淡入淡出效果，請(qǐng)?zhí)砑?.fade 到每個(gè) .tab-pane 后面。第一個(gè)標(biāo)簽頁(yè)必須添加 .in 類(lèi)，以便淡入顯示初始內(nèi)容，如下面實(shí)例所示：

<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>

實(shí)例

下面的實(shí)例演示了使用 data 屬性的標(biāo)簽頁(yè)（Tab）插件及其淡入淡出的效果：

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            菜鳥(niǎo)教程
        </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>菜鳥(niǎo)教程是一個(gè)提供最新的web技術(shù)站點(diǎn)，本站免費(fèi)提供了建站相關(guān)的技術(shù)文檔，幫助廣大web技術(shù)愛(ài)好者快速入門(mén)并建立自己的網(wǎng)站。菜鳥(niǎo)先飛早入行——學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它們共享 Darwin 基礎(chǔ)。OS X 操作系統(tǒng)是用在蘋(píng)果電腦上，iOS 是蘋(píng)果的移動(dòng)版本。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款開(kāi)源的測(cè)試軟件。它是 100% 純 Java 應(yīng)用程序，用于負(fù)載和性能測(cè)試。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
    </div>
</div>

image.png

方法

.$().tab：該方法可以激活標(biāo)簽頁(yè)元素和內(nèi)容容器。標(biāo)簽頁(yè)需要用一個(gè) data-target 或者一個(gè)指向 DOM 中容器節(jié)點(diǎn)的 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>

實(shí)例

下面的實(shí)例演示了標(biāo)簽頁(yè)（Tab）插件方法 .tab 的用法。在本實(shí)例中，第二個(gè)標(biāo)簽頁(yè) iOS 是激活的：

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">
            菜鳥(niǎo)教程</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>菜鳥(niǎo)教程是一個(gè)提供最新的web技術(shù)站點(diǎn)，本站免費(fèi)提供了建站相關(guān)的技術(shù)文檔，幫助廣大web技術(shù)愛(ài)好者快速入門(mén)并建立自己的網(wǎng)站。菜鳥(niǎo)先飛早入行——學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它們共享 Darwin 基礎(chǔ)。OS X 操作系統(tǒng)是用在蘋(píng)果電腦上，iOS 是蘋(píng)果的移動(dòng)版本。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款開(kāi)源的測(cè)試軟件。它是 100% 純 Java 應(yīng)用程序，用于負(fù)載和性能測(cè)試。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
    </div>
</div>
<script>
    $(function () {
        $('#myTab li:eq(1) a').tab('show');
    });
</script>

事件

下表列出了標(biāo)簽頁(yè)（Tab）插件中要用到的事件。這些事件可在函數(shù)中當(dāng)鉤子使用。

image.png

實(shí)例

下面的實(shí)例演示了標(biāo)簽頁(yè)（Tab）插件事件的用法。在本實(shí)例中，將顯示當(dāng)前和前一個(gè)訪問(wèn)過(guò)的標(biāo)簽頁(yè)：

<hr>
<p class="active-tab"><strong>激活的標(biāo)簽頁(yè)</strong>：<span></span></p>
<p class="previous-tab"><strong>前一個(gè)激活的標(biāo)簽頁(yè)</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">
            菜鳥(niǎo)教程</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>菜鳥(niǎo)教程是一個(gè)提供最新的web技術(shù)站點(diǎn)，本站免費(fèi)提供了建站相關(guān)的技術(shù)文檔，幫助廣大web技術(shù)愛(ài)好者快速入門(mén)并建立自己的網(wǎng)站。菜鳥(niǎo)先飛早入行——學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它們共享 Darwin 基礎(chǔ)。OS X 操作系統(tǒng)是用在蘋(píng)果電腦上，iOS 是蘋(píng)果的移動(dòng)版本。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款開(kāi)源的測(cè)試軟件。它是 100% 純 Java 應(yīng)用程序，用于負(fù)載和性能測(cè)試。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
    </div>
</div>
<script>
    $(function(){
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            // 獲取已激活的標(biāo)簽頁(yè)的名稱(chēng)
            var activeTab = $(e.target).text();
            // 獲取前一個(gè)激活的標(biāo)簽頁(yè)的名稱(chēng)
            var previousTab = $(e.relatedTarget).text();
            $(".active-tab span").html(activeTab);
            $(".previous-tab span").html(previousTab);
        });
    });
</script>

image.png

Bootstrap 提示工具（Tooltip）插件

當(dāng)您想要描述一個(gè)鏈接的時(shí)候，提示工具（Tooltip）就顯得非常有用。提示工具（Tooltip）插件是受 Jason Frame 寫(xiě)的 jQuery.tipsy 的啟發(fā)。提示工具（Tooltip）插件做了很多改進(jìn)，例如不需要依賴(lài)圖像，而是改用 CSS 實(shí)現(xiàn)動(dòng)畫(huà)效果，用 data 屬性存儲(chǔ)標(biāo)題信息。
如果您想要單獨(dú)引用該插件的功能，那么您需要引用 tooltip.js。或者，正如 Bootstrap 插件概覽一章中所提到，您可以引用bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

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

通過(guò) data 屬性：如需添加一個(gè)提示工具（tooltip），只需向一個(gè)錨標(biāo)簽添加 data-toggle="tooltip" 即可。錨的 title 即為提示工具（tooltip）的文本。默認(rèn)情況下，插件把提示工具（tooltip）設(shè)置在頂部。

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

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

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

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

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

實(shí)例

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

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

image.png

選項(xiàng)

有一些選項(xiàng)是通過(guò) Bootstrap 數(shù)據(jù) API（Bootstrap Data API）添加或通過(guò) JavaScript 調(diào)用的。下表列出了這些選項(xiàng)：

image.png

方法

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

image.png

實(shí)例

下面的實(shí)例演示了提示工具（Tooltip）插件方法的用法。

<div style="padding: 100px 100px 10px;">
    這是一個(gè) <a href="#" class="tooltip-show" data-toggle="tooltip"
            title="show">Tooltip 方法 show
    </a>.
 
    這是一個(gè) <a href="#" class="tooltip-hide" data-toggle="tooltip"
            data-placement="left" title="hide">Tooltip 方法 hide
    </a>.
 
    這是一個(gè) <a href="#" class="tooltip-destroy" data-toggle="tooltip"
            data-placement="top" title="destroy">Tooltip 方法 destroy
    </a>.
 
    這是一個(gè) <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" >
        這是一個(gè) <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ù)中當(dāng)鉤子使用。

image.png

實(shí)例
下面的實(shí)例演示了提示工具（Tooltip）插件事件的用法。

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

image.png

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

2018-10-11Bootstrap08

Bootstrap 插件概覽

data 屬性

編程方式的 API

避免命名空間沖突

事件

Bootstrap 過(guò)渡效果（Transition）插件

使用案例

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

用法

選項(xiàng)

方法

實(shí)例

事件

實(shí)例

Bootstrap 下拉菜單（Dropdown）插件

用法

實(shí)例

選項(xiàng)

方法

實(shí)例

Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件

用法

實(shí)例

選項(xiàng)

方法

實(shí)例

事件

實(shí)例

更多實(shí)例

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

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

Bootstrap 標(biāo)簽頁(yè)（Tab）插件

用法

淡入淡出效果

實(shí)例

方法

實(shí)例

事件

實(shí)例

Bootstrap 提示工具（Tooltip）插件

用法

實(shí)例

選項(xiàng)

方法

實(shí)例

事件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av