-
自定義Bootstrap框架主要有兩種方式來實現： 1.使用 CSS 預處理器語言 前提條件，那就是開發(fā)人員會使用 LESS 或 Sass 預處理器語言 2.使用在線自定義設置 在Bootstrap框架的官網為大家提供了一個在線自定義 Bootstrap 框架的配置頁面 http://getbootstrap.com/customize/ ，可以通過這里進行配置。查看全部
-
固定定位--聲明式觸發(fā)固定定位: Affix 插件可以對任何元素進行固定定位，其中比較簡單的方法，就是通過自定義屬性 data 來觸發(fā)。其主要包括兩個參數： 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 相反。 注意，在 body 要聲明滾動監(jiān)控。 <body data-spy="scroll" data-target="sidebarMenu">查看全部
-
圖片輪播--JavaScript觸發(fā)方法： 默認情況之下，如果 carousel 容器上定義了 data-ride="carousel" 屬性，頁面加載之后就會自動加載輪播圖片切換效果。如果沒有定義 data-ride 屬性，可以通過 JavaScript 方法來觸發(fā)輪播圖片切換。具體使用方法如下： $(".carousel").carousel(); 也可以通過容器的 ID 來指定： 在 carousel() 方法中可以設置具體的參數，如： 屬性名稱 類型 默認值 描述 interval number 5000 幻燈片輪換的等待時間（毫秒）。如果為false,輪播將不會自動開始循環(huán) pause string hover 默認鼠標懸停留在幻燈片區(qū)域即停止播放，離開即開始播放 wrap 布爾值 true 輪播是否持續(xù)循環(huán) 使用時，在初始化插件的時候可以傳關相關的參數，如： $("#slidershow").carousel({ interval: 3000 }); 實際上，當我們給carousel()方法配置參數之后，輪播效果就能自動切換。但 Bootstrap 框架中的 carousel 插件還給使用者提供了幾種特殊的調用方法，簡單說明如下： .carousel("cycle")：從左向右循環(huán)播放； .carousel("pause")：停止循環(huán)播放； .carousel("number")：循環(huán)到指定的幀，下標從0開始，類似數組； .carousel("prev")：返回到上一幀； .carousel("next")：下一幀查看全部
-
除了data-ride="carousel"、data-slide、data-slide-to 以外，輪播組件還支持其他三個自定義屬性： 屬性名稱 類型 默認值 描述 data-interval number 5000 幻燈片輪換的等待時間（毫秒）。如果為false,輪播將不會自動開始循環(huán) 如下代碼實現“輪播不持續(xù)循環(huán)”和“輪播時間間隔為1秒”。 <div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000"> ...... </div> 上面三個屬性可以在容器元素上定義，也可以在標示符（或左右控制鏈接）上定義，但是后者定義的優(yōu)先級比較高。 data-pause string hover 默認鼠標懸停留在幻燈片區(qū)域即停止播放，離開即開始播放 data-wrap 布爾值 true 輪播是否持續(xù)循環(huán)查看全部
-
圖片輪播--聲明式觸輪播圖的播放: 聲明式方法是通過定義 data 屬性來實現，data 屬性可以很容易地控制輪播的位置。其主要包括以下幾種： data-ride 屬性：取值 carousel，并且將其定義在 carousel 上。 data-target 屬性：取值 carousel 定義的 ID 名或者其他樣式識別符，如前面示例所示，取值為“#slidershow”，并且將其定義在輪播圖計數器的每個 li 上。 data-slide 屬性：取值包括 prev，next，prev表示向后滾動，next 表示向前滾動。該屬性值同樣定義在輪播圖控制器的 a 鏈接上，同時設置控制器 href 值為容器 carousel 的 ID 名或其他樣式識別符。 data-slide-to 屬性：用來傳遞某個幀的下標，比如 data-slide-to="2"，可以直接跳轉到這個指定的幀（下標從0開始計），同樣定義在輪播圖計數器的每個 li 上。 在這里需要注意可以為 #slidershow 層添加 slide 樣式，使用圖片與圖片切換效果有平滑感。查看全部
-
手風琴--聲明式觸發(fā)手風琴: <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">標題一</a></h4> </div> <div class="panel-collapse collapse in" id="panel1"> <div class="panel-body">折疊區(qū)內容...</div> </div> </div> </div> 使用 panel 的 panel-title 做為觸元素，使用panel-body的父元素作為折疊區(qū)； 使用一個 panel-group 來包含多個 panel，從而實現手風琴效果； 每個 panel 里的觸發(fā)元素都要指定data-parent屬性； data-parent 屬性的值對應 panel-group樣式元素的ID或者其他樣式標識符； 觸發(fā)元素需要指定 data-toggle，并且值為 collapse； 觸發(fā)元素都要指定 data-target屬性； data-target屬性的值對應 panel-body 的父元素的ID或者其他樣式標識符。查看全部
-
按鈕插件--JavaScript用法: 1、切換按鈕狀態(tài)（得到焦點）： $("#mybutton").button("toggle") 2、重新恢復按鈕： $("#mybutton").button("reset") 3、任意參數： $("#mybutton").button("任意字符參數名") 上面代碼作用：替換 data-任意字符參數名-text 的屬性值為“按鈕上顯示的文本值”。如下代碼： html: <button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" >確認</button>查看全部
-
按鈕插件--模擬復選按鈕: 使用按鈕組來模擬復選按鈕和模擬單選按鈕是一樣的，具有同等效果，也是通過在按鈕組上自定義data-toggle="buttons"來實現。唯一不同的是，將input[type="radio"]換成input[type="checkbox"]查看全部
-
按鈕插件--模擬單選擇按鈕: 模擬單選擇按鈕是通過一組按鈕來實現單選擇操作。使用按鈕組來模擬單選按鈕組，能夠讓設計更具個性化，可以定制出更美觀的單選按鈕組。 在Bootstrap框架中按鈕插件中，可以通過給按鈕組自定義屬性data-toggle="buttons" 注：使用這種效果的時候，無需借助JavaScript代碼來觸發(fā)，因為默認Bootstrap就已經為用戶初始化好了。查看全部
-
彈出框--自定義結構屬性: http://img1.sycdn.imooc.com//54af444c0001dd6a08600851.jpg查看全部
-
提示框--其他的自定義屬性: http://img1.sycdn.imooc.com//549162370001204910970690.jpg查看全部
-
下拉菜單--JavaScript觸發(fā)方法: 使用JavaScript調用dropdown()方法后，單擊激活按鈕，會彈出下拉菜單，再次單擊的時候會收起下拉菜單。 $(function(){ $(".dropdown-toggle").dropdown(); }) 還可以使用參數“toggle”。當下拉菜單隱藏時，調用dropdown(“toggle”)方法可以顯示下拉菜單，反之，如果下拉菜單顯示時，調用dropdown(“toggle”)方法可以讓下拉菜單隱藏。 $(function(){ $(".dropdown-toggle").dropdown("toggle"); }) 不過使用該參數，每次單擊都要兩次toggle，就會一直是一個不變的狀態(tài)。所以，一般情況下，使用示例中不帶參數的方法。就算你需要使用參數“toggle”，也建議使用jQuery的one方法： $(".dropdown-toggle").one("click",function(){ $(this).dropdown("toggle"); })查看全部
-
模態(tài)彈出框--JavaScript觸發(fā)時的參數設置（二） 參數設置： 參數 使用方法 描述 toggle $(“#mymodal”).modal(“toggle”) 觸發(fā)時，反轉模態(tài)彈出窗的狀態(tài)。如果模態(tài)彈出窗是顯示的，則關閉；反之，如果模態(tài)彈出窗是關閉的，則顯示 show $(“#mymodal”).modal(“show”) 觸發(fā)時，顯示模態(tài)彈出窗 hide $(“#mymodal”).modal(“hide”) 觸發(fā)時，關閉模態(tài)彈出窗查看全部
-
模態(tài)彈出框--JavaScript觸發(fā)時的參數設置（一） 使用JavaScript觸發(fā)模態(tài)彈出窗時，Bootstrap框架提供了一些設置，主要包括屬性設置、參數設置和事件設置。 屬性設置 模態(tài)彈出窗默認支持的自定義屬性主要有： http://img1.sycdn.imooc.com//544f0bd50001b34409020384.jpg查看全部
-
模態(tài)彈出框--模態(tài)彈出窗的使用（data-參數說明）: 以下是說明data-屬性的一些用途 http://img1.sycdn.imooc.com//544f09480001d6c409000872.jpg查看全部
舉報
0/150
提交
取消