-
代碼如下顯示查看全部
-
滾動(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)控器： 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ì)高亮顯示：查看全部
-
和模態(tài)彈出窗一樣，Bootstrap框架中的下拉菜單也支持JavaScript方法觸發(fā)下拉菜單顯示。使用JavaScript觸發(fā)下拉菜單和聲明式原理是基本類似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者樣式: $(function(){ $(".dropdown-toggle").dropdown(); }) 還可以使用參數(shù)“toggle”。當(dāng)下拉菜單隱藏時(shí)，調(diào)用dropdown(“toggle”)方法可以顯示下拉菜單，反之，如果下拉菜單顯示時(shí)，調(diào)用dropdown(“toggle”)方法可以讓下拉菜單隱藏。 $(function(){ $(".dropdown-toggle").dropdown("toggle"); }) 不過使用該參數(shù)，每次單擊都要兩次toggle，就會(huì)一直是一個(gè)不變的狀態(tài)。所以，一般情況下，使用示例中不帶參數(shù)的方法。就算你需要使用參數(shù)“toggle”，也建議使用jQuery的one方法： $(".dropdown-toggle").one("click",function(){ $(this).dropdown("toggle"); })查看全部
-
在Bootstrap框架中還為模態(tài)彈出窗提供了三種參數(shù)設(shè)置，具體說明如下： 參數(shù) 使用方法 描述 toggle $(“#mymodal”).modal(“toggle”) 觸發(fā)時(shí)，反轉(zhuǎn)模態(tài)彈出窗的狀態(tài)。如果模態(tài)彈出窗是顯示的，則關(guān)閉；反之，如果模態(tài)彈出窗是關(guān)閉的，則顯示 show $(“#mymodal”).modal(“show”) 觸發(fā)時(shí)，顯示模態(tài)彈出窗 hide $(“#mymodal”).modal(“hide”) 觸發(fā)時(shí)，關(guān)閉模態(tài)彈出窗查看全部
-
滾動(dòng)監(jiān)控器--滾動(dòng)監(jiān)控器的設(shè)計(jì)查看全部
-
滾動(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)。如Bootstrap官 2、用戶拖動(dòng)滾動(dòng)條，當(dāng)滾動(dòng)到@mdo時(shí)，上面的@mdo導(dǎo)航項(xiàng)就會(huì)高亮顯示：查看全部
-
<body data-spy="scroll" data-target="#sidebarMenu"> 提示中少了# <body data-spy="scroll" data-target="#sidebarMenu"> 提示中少了#查看全部
-
和模態(tài)彈出窗一樣，觸發(fā)下拉菜單方式有兩種，一種是屬性聲明式用法，另一種是JavaScript方法。查看全部
-
在線自定義設(shè)置--Bootstrap組件 在 Bootstrap 組件設(shè)置這一部分，提供了公共樣式（Common CSS），UI 組件(Components)和 JavaScript 組件(JavaScript components)三個(gè)部分查看全部
-
固定定位--聲明式觸發(fā)固定定位 Affix 插件可以對(duì)任何元素進(jìn)行固定定位，其中比較簡單的方法，就是通過自定義屬性 data 來觸發(fā)。其主要包括兩個(gè)參數(shù)： 1、data-spy：取值 affix，表示元素固定不變的。 2、data-offset：整數(shù)值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括兩種方式：data-offset-top 和 data-offset-bottom。 data-offset-top 用來設(shè)置元素距離頂部的距離。比如 90，表示元素距離頂部 90px，當(dāng)用戶從頂部向下拖動(dòng)滾動(dòng)條，當(dāng)滾動(dòng)的距離大于 90px 時(shí)，affix 元素不再滾動(dòng)，就會(huì)固定在瀏覽器窗口頂部。 data-offset-bottom 剛好與 data-offset-top 相反。 具體使用如下： <div data-spy="affix" data-offset="90">affix元素</div> 分開設(shè)置 data-offset 值方式： <div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div> 我們來看一個(gè)簡單的示例： <nav class="navbar navbar-default" role="navigation"> … </nav> <div class="container"> <div class="row"> <div class="col-md-3" id="sidebarMenu"> <ul class="navnav-pills nav-stacked" data-spy="affix" data-offset-top="20"> … </ul> </div> <div class="col-md-9"> … </div> </div> </div> 注意，在 body 要聲明滾動(dòng)監(jiān)控。 <body data-spy="scroll" data-target="sidebarMenu">查看全部
-
固定定位（Affix） Affix 一詞不好翻譯，根據(jù)其效果，我將其譯為固定定位。Affix 插件是從 Bootstrap V2.1 版本新增的一個(gè)插件，其主要功能就是通過插件給某個(gè)元素（需要固定的元素）添加或刪除 affix 類名，實(shí)現(xiàn)元素在瀏覽器窗口中固定（元素帶有 affix 類名固定）和不固定（元素不帶有 affix 類名）的效果。 Affix 效果常見的有以下三種： 頂部固定 側(cè)邊欄固定 底部固定查看全部
-
實(shí)際上，當(dāng)我們給carousel()方法配置參數(shù)之后，輪播效果就能自動(dòng)切換。但 Bootstrap 框架中的 carousel 插件還給使用者提供了幾種特殊的調(diào)用方法，簡單說明如下： .carousel("cycle")：從左向右循環(huán)播放； .carousel("pause")：停止循環(huán)播放； .carousel("number")：循環(huán)到指定的幀，下標(biāo)從0開始，類似數(shù)組； .carousel("prev")：返回到上一幀； .carousel("next")：下一幀 例如，前面的調(diào)用方法，向前和向后兩個(gè)按鈕還無法正常工作，其實(shí)可以通過 .carousel("prev") 和 .carousel("next") 方法讓他們能正常工作，代碼如下： $(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }); });查看全部
-
提示框（tooltip）與彈出框（popover）的區(qū)別： 提示框 tooltip 的默認(rèn)觸發(fā)事件是 hover 和 focus，而彈出框 popover 是 click 提示框 tooltip 只有一個(gè)內(nèi)容(title)，而彈出框不僅可以設(shè)置標(biāo)題（title）還可以設(shè)置內(nèi)容(content)查看全部
-
圖片輪播--聲明式觸輪播圖的播放（二） 除了data-ride="carousel"、data-slide、data-slide-to 以外，輪播組件還支持其他三個(gè)自定義屬性： 屬性名稱 類型 默認(rèn)值 描述 data-interval number 5000 幻燈片輪換的等待時(shí)間（毫秒）。如果為false,輪播將不會(huì)自動(dòng)開始循環(huán) data-pause string hover 默認(rèn)鼠標(biāo)懸停留在幻燈片區(qū)域即停止播放，離開即開始播放 data-wrap 布爾值 true 輪播是否持續(xù)循環(huán) 如下代碼實(shí)現(xiàn)“輪播不持續(xù)循環(huán)”和“輪播時(shí)間間隔為1秒”。 <div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000"> ...... </div> 上面三個(gè)屬性可以在容器元素上定義，也可以在標(biāo)示符（或左右控制鏈接）上定義，但是后者定義的優(yōu)先級(jí)比較高。查看全部
舉報(bào)
0/150
提交
取消