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