-
data-backdrop="static"點擊背景不會關閉，設置為true點擊背景會關閉模態框 data-keyboard="true"當按ESC按鍵時 模態框會關閉，設置為false時不會關閉查看全部
-
<!-- 觸發模態彈出窗的元素 --> <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點擊我會彈出模態彈出窗</button> <!-- 模態彈出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模態彈出窗內容 --> </div> </div> </div>查看全部
-
模態框直接調用一個html頁面查看全部
-
動畫過度包括 模態彈出窗 警告框 圖片輪播 選擇卡查看全部
-
圖片輪播--JavaScript觸發方法 默認情況之下，如果 carousel 容器上定義了 data-ride="carousel" 屬性，頁面加載之后就會自動加載輪播圖片切換效果。如果沒有定義 data-ride 屬性，可以通過 JavaScript 方法來觸發輪播圖片切換。具體使用方法如下： $(".carousel").carousel(); 也可以通過容器的 ID 來指定： $("#slidershow").carousel(); 使用時，在初始化插件的時候可以傳關相關的參數，如： $("#slidershow").carousel({ interval: 3000 }); 實際上，當我們給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"); }); });查看全部
-
鈕插件--模擬單選擇按鈕 模擬單選擇按鈕是通過一組按鈕來實現單選擇操作。使用按鈕組來模擬單選按鈕組，能夠讓設計更具個性化，可以定制出更美觀的單選按鈕組。 在Bootstrap框架中按鈕插件中，可以通過給按鈕組自定義屬性data-toggle="buttons"，如下所示： <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="options1">男 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options2">女 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options3">未知 </label> </div>查看全部
-
警告框--JavaScript觸發警告框 除了通過自定義data-dismiss="alert"屬性來觸發警告框關閉之外，還可以通過JavaScript方法。只需要在關閉按鈕上綁定一個事件。如下所示： html代碼: <div class="alert alert-warning" role="alert" id="myAlert"> <h4>謹防被騙</h4> <p>請確認您轉賬的信息是你的親朋好友，不要輕意相信不認識的人...</p> <button type="button" class="btn btn-danger" id="close">關閉</button> </div> 通過下面的JavaScript代碼來觸發： $(function(){ $("#close").on("click",function(){ $(this).alert("close"); }); });查看全部
-
提示框--其他的自定義屬性 除此之外，提示框還有其他的自定義屬性，每個自定義屬性都具自身存在的意義查看全部
-
選項卡--JavaScript觸發方法 除了在HTML設置 data-toggle 來觸發選項卡之外，還可以通過JavaScript直接調用。 調用方法: 在每個鏈接的單擊事件中調用tab("show")方法，顯示對應的標簽面板內容。針對上面的示例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，然后通過下面的腳本來調用： $(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); })查看全部
-
為防止在點擊向左、向右按鈕時，頁面跳轉到頂部，可以把兩個<a>標簽里的href屬性換為data-target?。。?查看全部
-
方法一：模態彈出窗聲明，只需要自定義兩個必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發方法一般依賴于這些自定義的data-xxx 屬性。比如data-toggle="" 或者 data-dismiss=""）。例如： <!-- 觸發模態彈出窗的元素 --> <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點擊我會彈出模態彈出窗</button> <!-- 模態彈出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模態彈出窗內容 --> </div> </div> </div> 注意以下事項： 1、data-toggle必須設置為modal(toggle中文翻譯過來就是觸發器)； 2、data-target可以設置為CSS的選擇符，也可以設置為模態彈出窗的ID值，一般情況設置為模態彈出窗的ID值，因為ID值是唯一的值。 方法二：觸發模態彈出窗也可以是一個鏈接<a>元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性，如： <!-- 觸發模態彈出窗的元素 --> <a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點擊我會彈出模態彈出窗</a> <!-- 模態彈出窗 --> <div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模態彈出窗內容 --> </div> </div> </div> 不過建議還是使用統一使用data-target的方式來觸發。查看全部
-
1、data-spy：取值 affix，表示元素固定不變的。 2、data-offset：整數值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括兩種方式：data-offset-top 和 data-offset-bottom。查看全部
-
使用 panel 的 panel-title 做為觸元素，使用panel-body的父元素作為折疊區 使用一個 panel-group 來包含多個 panel，從而實現手風琴效果； 每個 panel 里的觸發元素都要指定data-parent屬性； data-parent 屬性的值對應 panel-group樣式元素的ID或者其他樣式標識符； 觸發元素需要指定 data-toggle，并且值為 collapse； 觸發元素都要指定 data-target屬性； data-target屬性的值對應 panel-body 的父元素的ID或者其他樣式標識符。查看全部
-
1.選項卡導航鏈接中要設置 data-toggle="tab" 2.設置 data-target="對應內容面板的選擇符(一般是ID)"; 如果是鏈接的話，還可以通過 href="對應內容面板的選擇符(一般是ID)" 主要起的作用是用戶點擊的時候能找到該選擇符所對應的面板內容 tab-pane。 3、面板內容統一放在 tab-content 容器中，而且每個內容面板 tab-pane 都需要設置一個獨立的選擇符（最好是ID）與選項卡中的 data-target 或 href 的值匹配。查看全部
-
Bootstrap框架中的模態彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內容都放置在“modal-content”中，其主要又包括三個部分： 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕 彈出框主體，一般使用“modal-body”表示，彈出框的主要內容 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕查看全部
舉報
0/150
提交
取消