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