-
被點(diǎn)擊的菜單項鏈接或按鈕需要添加自定義屬性 data-toggle="dropdown"查看全部
-
模態(tài)彈出框--JavaScript觸發(fā)時的參數(shù)設(shè)置（二）查看全部
-
使用JavaScript觸發(fā)模態(tài)彈出窗時，Bootstrap框架提供了一些設(shè)置，主要包括屬性設(shè)置、參數(shù)設(shè)置和事件設(shè)置。 屬性設(shè)置 模態(tài)彈出窗默認(rèn)支持的自定義屬性主要有：查看全部
-
$(function(){ $(".btn").click(function(){ $("#mymodal").modal(); }); });查看全部
-
為模態(tài)彈出框增加過度動畫效果： 可通過給“.modal”增加類名“fade”為模態(tài)彈出框增加一個過渡動畫效果。 <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm"> 小的模態(tài)彈出窗 </button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">查看全部
-
JavaScript觸發(fā)可以這樣寫： $(function(){ $("#scrollspy").scrollspy({ target: "#navbar-menu" }); }) Bootstrap的滾動監(jiān)控還提供了一個方法scrollspy("refresh")。當(dāng)滾動監(jiān)控所作用的DOM有增加或刪除頁面元素的操作時，需要調(diào)用下面的refresh方法： $(function(){ $("[data-spy='scroll']").each(function(){ var $spy=$(this).scrollspy("refresh"); }) }) 需要注意的是，這種refresh方法只對聲明式用法有效。另外滾動監(jiān)控除了options參數(shù)“target”之外，還提供了一個offset參數(shù)，此參數(shù)默認(rèn)值為10。默認(rèn)情況下，滾動內(nèi)容距離滾動容器10px以內(nèi)的話，就高一片面前顯示所對應(yīng)的菜單項。查看全部
-
方法一：模態(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> 注意以下事項： 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ā)。查看全部
-
$(function(){ $(".dropdown-toggle").dropdown("toggle"); }) $(".dropdown-toggle").one("click",function(){ $(this).dropdown("toggle"); })查看全部
-
不錯查看全部
-
Bootstrap框架中的提示框的觸發(fā)方式和前面介紹的插件略有不同。不能直接通過自定義的屬性 data- 來觸發(fā)。必須得依賴于JavaScript的代碼觸發(fā)。查看全部
-
在Bootstrap框架中的提示框，結(jié)構(gòu)非常簡單，常常使用的是按鈕<button>標(biāo)簽或者鏈接<a>標(biāo)簽來制作。不管是使用按鈕還是鏈接來制作提示框，他們都有一個共性： 通過 title 屬性的值來定義提示信息(也可以使用自定義屬性 data-original-title 來設(shè)置提示信息)。 通過 data-placement 自定義屬性來控制提示信息框的位置，根據(jù)四種不同的位置，data-placement具有四個值：top、right、bottom和left，分別表示提示框出現(xiàn)的位置在頂部、右邊、底部和左邊。 還有一個最重要的參數(shù)不可缺少，data-toggle="tooltip"。查看全部
-
在每個鏈接的單擊事件中調(diào)用tab("show")方法，顯示對應(yīng)的標(biāo)簽面板內(nèi)容。針對上面的示例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，然后通過下面的腳本來調(diào)用：查看全部
-
在Web頁面中實(shí)現(xiàn)Bootstrap滾動監(jiān)控器其實(shí)非常簡單，接下來我們一步一步來看滾動監(jiān)控器是如何設(shè)計的。 第一步：使用滾動監(jiān)控器，首要的條件是在頁面中加載對應(yīng)的插件。在這里你可以加載合并好的bootstrap.js或者其獨(dú)立的插件文件scrollspy.js。這里以加載合并好的js為例： <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 第二步：設(shè)計一個帶有下拉菜單的導(dǎo)航條。分別為導(dǎo)航條和下拉菜單項定義一個錨點(diǎn)鏈接，錨點(diǎn)分別為“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同時為導(dǎo)航條定義一個id值“navbar-menu”（id名稱可自由定義），方便滾動監(jiān)控。 第三步：設(shè)計監(jiān)控對象。這里將監(jiān)控對象內(nèi)容都放置在一個div名為scrollspy（這個類名可自由定義）的容器中，其中放了多個子內(nèi)容框。每個子內(nèi)容框有一個標(biāo)題，而且每個標(biāo)題的ID值與導(dǎo)航菜單項中的錨點(diǎn)鏈接名相對應(yīng)，并且注意加入“data-target="#navbar-menu"”屬性（這個屬性值要與前面的nav標(biāo)簽的id名稱保持一致） 第四步：為監(jiān)控對象定義樣式，設(shè)置容器scrollspy大?。ㄔO(shè)置高度目的是為了產(chǎn)生垂直滾動條）。查看全部
-
按照制作菜單的結(jié)構(gòu)編寫結(jié)構(gòu)，如前面“下拉菜單”一節(jié)(5-21)所介紹 ? 被點(diǎn)擊的菜單項鏈接或按鈕需要添加自定義屬性 data-toggle="dropdown"查看全部
-
被點(diǎn)擊的菜單項鏈接或按鈕需要添加自定義屬性 data-toggle="dropdown"查看全部
舉報
0/150
提交
取消