-
JS代碼中的屬性的值，依然要加引號??！查看全部
-
最簡單的觸發(fā)方式如下： $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 也可以單獨(dú)指定一個元素，在該元素上調(diào)用提示框，并且可能通過JavaScript的各種參數(shù)來實(shí)現(xiàn)，無需定義一些 data 屬性，如： $(function(){ $('#myTooltip').tooltip({ title:"我是一個提示框，我在頂部出現(xiàn)", placement:'top' }); });查看全部
-
【注意】： 1、如果同時設(shè)置了 data-original-title 和 title 定義提示信息，那么 data-original-title 的優(yōu)先級要高于 title。只有 data-original-title 值為空時，才會取 title 的值做為提示信息的內(nèi)容。 2、Bootstrap框架中的提示框的觸發(fā)方式和前面介紹的插件略有不同。不能直接通過自定義的屬性 data- 來觸發(fā)。必須得依賴于JavaScript的代碼觸發(fā)。查看全部
-
在Bootstrap框架中的提示框，常常使用的是按鈕<button>標(biāo)簽或者鏈接<a>標(biāo)簽來制作。 不管是使用按鈕還是鏈接來制作提示框，他們都有一個共性： 通過 title 屬性的值來定義提示信息(也可以使用自定義屬性 data-original-title 來設(shè)置提示信息)。 通過 data-placement 自定義屬性來控制提示信息框的位置，根據(jù)四種不同的位置，data-placement具有四個值：top、right、bottom和left，分別表示提示框出現(xiàn)的位置在頂部、右邊、底部和左邊。 還有一個最重要的參數(shù)不可缺少，data-toggle="tooltip"。查看全部
-
調(diào)用方法: 在每個鏈接的單擊事件中調(diào)用tab("show")方法，顯示對應(yīng)的標(biāo)簽面板內(nèi)容。針對上面的示例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，然后通過下面的腳本來調(diào)用： $(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); })查看全部
-
選項(xiàng)卡是建立在【導(dǎo)航】和【面板】的基礎(chǔ)上，可以回顧下相關(guān)章節(jié)的內(nèi)容查看全部
-
在Bootstrap除了可以讓 nav-tabs 具有選項(xiàng)卡的切換功能之外，還可以對膠囊式 nav-pills 導(dǎo)航也具有選項(xiàng)卡的功能。我們只需要將 nav-tabs 換成 nav-pills，另外關(guān)鍵一點(diǎn)是將 data-toggle="tab"換成data-toggle="pill"。查看全部
-
為了讓面板的隱藏與顯示在切換的過程效果更流暢，可以在面板中添加類名 fade，讓其產(chǎn)生漸入的效果。 在添加 fade 樣式時，最初的默認(rèn)顯示的內(nèi)容面板一定要記得加上 in 類名，不然其內(nèi)容用戶無法看到。查看全部
-
聲明式觸發(fā)選項(xiàng)卡需要滿足以下幾點(diǎn)要求： 1、選項(xiàng)卡導(dǎo)航鏈接中要設(shè)置 data-toggle="tab" 2、并且設(shè)置 data-target="對應(yīng)內(nèi)容面板的選擇符(一般是ID)"; 如果是鏈接的話，還可以通過 href="對應(yīng)內(nèi)容面板的選擇符(一般是ID)" 主要起的作用是用戶點(diǎn)擊的時候能找到該選擇符所對應(yīng)的面板內(nèi)容 tab-pane。 3、面板內(nèi)容統(tǒng)一放在 tab-content 容器中，而且每個內(nèi)容面板 tab-pane 都需要設(shè)置一個獨(dú)立的選擇符（最好是ID）與選項(xiàng)卡中的 data-target 或 href 的值匹配。查看全部
-
關(guān)鍵一點(diǎn)，選項(xiàng)卡中鏈接的錨點(diǎn)要與對應(yīng)的面板內(nèi)容容器的ID相匹配。查看全部
-
Bootstrap框架中的選項(xiàng)卡主要有兩部分內(nèi)容組成： ·選項(xiàng)卡組件（也就是菜單組件），對應(yīng)的是 Bootstrap的 nav-tabs） ·底部可以切換的選項(xiàng)卡面板，在 Bootstrap 中通常 tab-pane 來表示查看全部
-
Bootstrap的滾動監(jiān)控還提供了一個方法scrollspy("refresh")。當(dāng)滾動監(jiān)控所作用的DOM有增加或刪除頁面元素的操作時，需要調(diào)用下面的refresh（刷新）方法： $(function(){ $("[data-spy='scroll']").each(function(){ var $spy=$(this).scrollspy("refresh"); }) }) 需要注意的是，這種refresh方法只對【聲明屬性式】用法有效。查看全部
-
糾正和補(bǔ)充：【所以說，一般對于JS觸發(fā)的組件不需要用到data-toggle和data-target，只要設(shè)置唯一的id名或class類名即可】 【根據(jù)事件觸發(fā)方式不同：“data-toggle”也可能為“data-spy”或其它！】查看全部
-
在Bootstrap框架中，使用JavaScript方法觸發(fā)滾動監(jiān)控器相對來說較為簡單，只需要指定兩個容器的名稱即可。 <nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation"> … </nav> <div class="scrollspy" id="scrollspy"> … </div> JavaScript觸發(fā)可以這樣寫： $(function(){ $("#scrollspy").scrollspy({ target: "#navbar-menu" }); }) 【所以說，一般對于JS觸發(fā)的組件不需要用到data-toggle和data-target，只要設(shè)置唯一的id名或class類名即可】查看全部
-
還可以直接在body上進(jìn)行滾動條監(jiān)控，此時要將滾動監(jiān)控器移到body上，而且導(dǎo)航nav一定要在body內(nèi)部。 <body data-spy="scroll" data-target="#navbar-menu"> <div class="navbar navbar-default navbar-fixed-top" id="navbar-menu"> </div> <h3 id="blog">Blog</h3> <p>…</p> </body> 【注意：必須設(shè)置導(dǎo)航條的位置屬性】：導(dǎo)航條必須設(shè)置為頂部固定樣式（navbar-fixed-top）。查看全部
舉報
0/150
提交
取消