-
選項(xiàng)卡--JavaScript觸發(fā)方法 除了在HTML設(shè)置 data-toggle 來觸發(fā)選項(xiàng)卡之外，還可以通過JavaScript直接調(diào)用。 調(diào)用方法: 在每個(gè)鏈接的單擊事件中調(diào)用tab("show")方法，顯示對(duì)應(yīng)的標(biāo)簽面板內(nèi)容。針對(duì)上面的示例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，然后通過下面的腳本來調(diào)用： $(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); })查看全部
-
選項(xiàng)卡--膠囊式選項(xiàng)卡（nav-pills） 在Bootstrap除了可以讓 nav-tabs 具有選項(xiàng)卡的切換功能之外，還可以對(duì)膠囊式 nav-pills 導(dǎo)航也具有選項(xiàng)卡的功能。我們只需要將 nav-tabs 換成 nav-pills，另外關(guān)鍵一點(diǎn)是將 data-toggle="tab"換成data-toggle="pill"。 下面的示例是將上面的 nav-tabs 換成 nav-pills： <!-- 選項(xiàng)卡組件（菜單項(xiàng)nav-pills）--> <ul id="myTab" class="nav nav-pills" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li> <li><a href="#rule" role="tab" data-toggle="pill">規(guī)則</a></li> <li><a href="#forum" role="tab" data-toggle="pill">論壇</a></li> <li><a href="#security" role="tab" data-toggle="pill">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li> </ul>查看全部
-
項(xiàng)卡--為選擇卡添加fade樣式 為了讓面板的隱藏與顯示在切換的過程效果更流暢，可以在面板中添加類名 fade，讓其產(chǎn)生漸入的效果。 在添加 fade 樣式時(shí)，最初的默認(rèn)顯示的內(nèi)容面板一定要記得加上 in 類名，不然其內(nèi)容用戶無法看到。如下面的示例所示: <!-- 選項(xiàng)卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div> <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div> <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div> <div class="tab-pane fade" id="security">安全內(nèi)容面板</div> <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div> </div>查看全部
-
選項(xiàng)卡--觸發(fā)切換效果 同樣的，選項(xiàng)卡也定義data屬性來觸發(fā)切換效果。當(dāng)然前提你也要先加載bootstrap.js或者是tab.js。聲明式觸發(fā)選項(xiàng)卡需要滿足以下幾點(diǎn)要求： 1、選項(xiàng)卡導(dǎo)航鏈接中要設(shè)置 data-toggle="tab" 2、并且設(shè)置 data-target="對(duì)應(yīng)內(nèi)容面板的選擇符(一般是ID)"; 如果是鏈接的話，還可以通過 href="對(duì)應(yīng)內(nèi)容面板的選擇符(一般是ID)" 主要起的作用是用戶點(diǎn)擊的時(shí)候能找到該選擇符所對(duì)應(yīng)的面板內(nèi)容 tab-pane。 3、面板內(nèi)容統(tǒng)一放在 tab-content 容器中，而且每個(gè)內(nèi)容面板 tab-pane 都需要設(shè)置一個(gè)獨(dú)立的選擇符（最好是ID）與選項(xiàng)卡中的 data-target 或 href 的值匹配。查看全部
-
選項(xiàng)卡--選項(xiàng)卡的結(jié)構(gòu) 一個(gè)選項(xiàng)卡主要包括兩個(gè)部分，其一是菜單項(xiàng)，其二是內(nèi)容面板。 <!-- 選項(xiàng)卡組件（菜單項(xiàng)nav-tabs）--> <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab">公告</a></li> <li><a href="#rule" role="tab">規(guī)則</a></li> <li><a href="#forum" role="tab">論壇</a></li> <li><a href="#security" role="tab">安全</a></li> <li><a href="#welfare" role="tab">公益</a></li> </ul> <!-- 選項(xiàng)卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div> <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div> <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div> <div class="tab-pane fade" id="security">安全內(nèi)容面板</div> <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div> </div> 關(guān)鍵一點(diǎn)，選項(xiàng)卡中鏈接的錨點(diǎn)要與對(duì)應(yīng)的面板內(nèi)容容器的ID相匹配。查看全部
-
選項(xiàng)卡（Tabs） Bootstrap框架中的選項(xiàng)卡主要有兩部分組成： 1.選項(xiàng)卡組件（也就是菜單組件），對(duì)應(yīng)的是Bootstrap的nav-tabs。 2.底部可以切換到選項(xiàng)卡面板，在Bootstrap中通常tab-pane來表示。查看全部
-
滾動(dòng)監(jiān)聽器 -- JavaScript方法觸動(dòng)滾動(dòng)監(jiān)聽器 滾動(dòng)監(jiān)控器--JavaScript方法觸發(fā)滾動(dòng)監(jiān)控器 在Bootstrap框架中，使用JavaScript方法觸發(fā)滾動(dòng)監(jiān)控器相對(duì)來說較為簡單，只需要指定兩個(gè)容器的名稱即可。比如下面的結(jié)構(gòu)： <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" }); }) Bootstrap的滾動(dòng)監(jiān)控還提供了一個(gè)方法scrollspy("refresh")。當(dāng)滾動(dòng)監(jiān)控所作用的DOM有增加或刪除頁面元素的操作時(shí)，需要調(diào)用下面的refresh方法： $(function(){ $("[data-spy='scroll']").each(function(){ var $spy=$(this).scrollspy("refresh"); }) }) 需要注意的是，這種refresh方法只對(duì)聲明式用法有效。另外滾動(dòng)監(jiān)控除了options參數(shù)“target”之外，還提供了一個(gè)offset參數(shù)，此參數(shù)默認(rèn)值為10。默認(rèn)情況下，滾動(dòng)內(nèi)容距離滾動(dòng)容器10px以內(nèi)的話，就高一片面前顯示所對(duì)應(yīng)的菜單項(xiàng)查看全部
-
滾動(dòng)監(jiān)控器--在body中加監(jiān)控 除了這種方法之外，還可以直接在body上進(jìn)行滾動(dòng)條監(jiān)控，此時(shí)要將滾動(dòng)監(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> 注意：導(dǎo)航條必須設(shè)置為頂部固定樣式（navbar-fixed-top）。查看全部
-
滾動(dòng)監(jiān)控器 -- 聲明屬性觸發(fā)滾動(dòng)監(jiān)控 為監(jiān)控對(duì)象設(shè)置被監(jiān)控的data屬性：data-spy="scroll"，指定監(jiān)控的導(dǎo)航條：data-target="#navbar-menu"。同時(shí)定義監(jiān)控過程中滾動(dòng)條偏移位置data-offset="60"，代碼如下： <div class="scrollspy" data-spy="scroll" data-target="#navbar-menu" data-offset="60"> … </div>查看全部
-
滾動(dòng)監(jiān)控器--滾動(dòng)監(jiān)控器的設(shè)計(jì): 第一步：使用滾動(dòng)監(jiān)控器，首要的條件是在頁面中加載對(duì)應(yīng)的插件。在這里你可以加載合并好的bootstrap.js或者其獨(dú)立的插件文件scrollspy.js。 第二步：設(shè)計(jì)一個(gè)帶有下拉菜單的導(dǎo)航條。分別為導(dǎo)航條和下拉菜單項(xiàng)定義一個(gè)錨點(diǎn)鏈接，錨點(diǎn)分別為“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同時(shí)為導(dǎo)航條定義一個(gè)id值“navbar-menu”（id名稱可自由定義），方便滾動(dòng)監(jiān)控。 第三步：設(shè)計(jì)監(jiān)控對(duì)象。這里將監(jiān)控對(duì)象內(nèi)容都放置在一個(gè)div名為scrollspy（這個(gè)類名可自由定義）的容器中，其中放了多個(gè)子內(nèi)容框。每個(gè)子內(nèi)容框有一個(gè)標(biāo)題，而且每個(gè)標(biāo)題的ID值與導(dǎo)航菜單項(xiàng)中的錨點(diǎn)鏈接名相對(duì)應(yīng)，并且注意加入“data-target="#navbar-menu"”屬性（這個(gè)屬性值要與前面的nav標(biāo)簽的id名稱保持一致）。 第四步：為監(jiān)控對(duì)象定義樣式，設(shè)置容器scrollspy大?。ㄔO(shè)置高度目的是為了產(chǎn)生垂直滾動(dòng)條）。查看全部
-
滾動(dòng)監(jiān)控器 滾動(dòng)監(jiān)控器是Bootstrap提供的非常實(shí)用的JavaScript插件，被廣泛應(yīng)用到Web開發(fā)中。其表現(xiàn)形式是： 1、當(dāng)用戶鼠標(biāo)滾動(dòng)時(shí)，滾動(dòng)條的位置會(huì)自動(dòng)更新導(dǎo)航條中相應(yīng)的導(dǎo)航項(xiàng)。 2、用戶拖動(dòng)滾動(dòng)條，當(dāng)滾動(dòng)到@mdo時(shí)，上面的@mdo導(dǎo)航項(xiàng)就會(huì)高亮顯示。查看全部
-
下拉菜單--JavaScript觸發(fā)方法 和模態(tài)彈出窗一樣，Bootstrap框架中的下拉菜單也支持JavaScript方法觸發(fā)下拉菜單顯示。使用JavaScript觸發(fā)下拉菜單和聲明式原理是基本類似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者樣式. <script> $(function(){ $(".dropdown-toggle").one("click",function(){ $(this).dropdown("toggle"); }) }) </script>查看全部
-
下拉菜單--屬性聲明式方法（二) <!--代碼任務(wù)部分--> <ul class="nav nav-pills"> <li><a href="##">教程</a></li> <li class="active"><a href="##">前端論壇</a></li> <li class="dropdown"><a href="##" data-toggle="dropdown" role="button" id="tutorial">關(guān)于我們<span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial"> <li><a href="##">團(tuán)隊(duì)成長</a></li> <li><a href="##">leader成員</a></li> <li><a href="##">活動(dòng)</a></li> </ul> </li> </ul>查看全部
-
下拉菜單--屬性聲明式方法（一） 屬性聲明式方法： 1.一般下拉菜單都是出現(xiàn)在導(dǎo)航條中 2.在膠囊式導(dǎo)航中也具有下拉菜單查看全部
-
下拉菜單（Dropdown） 和模態(tài)彈出窗一樣，觸發(fā)下拉菜單方式有兩種，一種是屬性聲明式，另一種是JavaScript方法。查看全部
舉報(bào)
0/150
提交
取消