-
在Bootstrap框架中的提示框，結(jié)構(gòu)非常簡(jiǎn)單，常常使用的是按鈕<button>標(biāo)簽或者鏈接<a>標(biāo)簽來(lái)制作。不管是使用按鈕還是鏈接來(lái)制作提示框，他們都有一個(gè)共性： 通過(guò) title 屬性的值來(lái)定義提示信息(也可以使用自定義屬性 data-original-title 來(lái)設(shè)置提示信息)。 通過(guò) data-placement 自定義屬性來(lái)控制提示信息框的位置，根據(jù)四種不同的位置，data-placement具有四個(gè)值：top、right、bottom和left，分別表示提示框出現(xiàn)的位置在頂部、右邊、底部和左邊。 還有一個(gè)最重要的參數(shù)不可缺少，data-toggle="tooltip"。 Bootstrap框架中的提示框的觸發(fā)不能直接通過(guò)自定義的屬性 data- 來(lái)觸發(fā)。必須得依賴于JavaScript的代碼觸發(fā)。查看全部
-
實(shí)現(xiàn)下拉菜單原理： Dropdown插件加載時(shí)，對(duì)所有帶 有“data-toggle=dropdown”樣式的元素綁定了事件，用戶單擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時(shí)， 會(huì)觸發(fā)JavaScript事件代碼。當(dāng)用戶點(diǎn)擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時(shí)，下拉菜單的父容器（上面的示例是 “<li class="dropdown">”）會(huì)添加一個(gè)open類名，此時(shí)下拉菜單顯示；再次單擊時(shí)，JavaScript會(huì)刪除剛添加的open類 名，此時(shí)下拉菜單將隱藏。 其結(jié)構(gòu)基本如下： <div class="dropdown"> <a data-toggle="dropdown" href="#">下拉菜單觸發(fā)器</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> 如果觸發(fā)下拉菜單的元素是一個(gè)鏈接元素，為了避免點(diǎn)擊鏈接，頁(yè)面跳到頂部，可以使用data-target="#"來(lái)替代href="#"：查看全部
-
方法二：觸發(fā)模態(tài)彈出窗也可以是一個(gè)鏈接<a>元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性， <a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點(diǎn)擊我會(huì)彈出模態(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ài)彈出窗聲明，只需要自定義兩個(gè)必要的屬性：data-toggle和data-target <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點(diǎn)擊我會(huì)彈出模態(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>查看全部
-
彈出框頭部，一般使用“modal-header”表示，主要包括標(biāo)題和關(guān)閉按鈕 彈出框主體，一般使用“modal-body”表示，彈出框的主要內(nèi)容 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕查看全部
-
手風(fēng)琴 <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">標(biāo)題一</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body">標(biāo)題一對(duì)應(yīng)的內(nèi)容</div> </div> </div> </div> in默認(rèn)內(nèi)容展開(kāi)查看全部
-
Bootstrap V3.2中提供了12種JavaScript插件，他們分別是： 動(dòng)畫(huà)過(guò)渡（Transitions）:對(duì)應(yīng)的插件文件“transition.js” 模態(tài)彈窗（Modal）:對(duì)應(yīng)的插件文件“modal.js” 下拉菜單（Dropdown）：對(duì)應(yīng)的插件文件“dropdown.js” 滾動(dòng)偵測(cè)（Scrollspy）：對(duì)應(yīng)的插件文件“scrollspy.js” 選項(xiàng)卡（Tab）：對(duì)應(yīng)的插件文件“tab.js” 提示框（Tooltips）：對(duì)應(yīng)的插件文件“tooltop.js” 彈出框（Popover）：對(duì)應(yīng)的插件文件“popover.js” 警告框（Alert）：對(duì)應(yīng)的插件文件“alert.js” 按鈕（Buttons）：對(duì)應(yīng)的插件文件“button.js” 折疊/手風(fēng)琴（Collapse）：對(duì)應(yīng)的插件文件“collapse.js” 圖片輪播Carousel：對(duì)應(yīng)的插件文件“carousel.js” 自動(dòng)定位浮標(biāo)Affix：對(duì)應(yīng)的插件文件“affix.js” 上述單獨(dú)插件的下載可到github去下載（https://github.com/twbs/bootstrap）。查看全部
-
事件類型 描述 show.bs.modal 在show方法調(diào)用時(shí)立即觸發(fā)（尚未顯示之前）；如果單擊了一個(gè)元素，那么該元素將作為事件的relatedTarget屬性 shown.bs.modal 該事件在模態(tài)彈出窗完全顯示給用戶之后（并且等CSS動(dòng)畫(huà)完成之后）觸發(fā)；如果單擊了一個(gè)元素，那么該元素將作為事件的relatedTarget事件 hide.bs.modal 在hide方法調(diào)用時(shí)（但還未關(guān)閉隱藏）立即觸發(fā) hidden.bs.modal 該事件在模態(tài)彈出窗完全隱藏之后（并且CSS動(dòng)畫(huà)漂完成之后）觸發(fā)查看全部
-
data-toggle : 標(biāo)記用于觸發(fā)的； data-dismiss：標(biāo)記點(diǎn)擊后消失； data-target：一般用于button標(biāo)簽里面，后面的參數(shù)是響應(yīng)的標(biāo)簽對(duì)應(yīng)的ID查看全部
-
選項(xiàng)卡查看全部
-
這一小節(jié)我們先來(lái)講“動(dòng)畫(huà)過(guò)渡（Transitions）”這個(gè)插件的使用，源文件：transition.js Bootstrap框架默認(rèn)給各個(gè)組件提供了基本動(dòng)畫(huà)的過(guò)渡效果，如果要使用，有兩種方法： 調(diào)用統(tǒng)一編譯的bootstrap.js； 調(diào)用單一的過(guò)渡動(dòng)畫(huà)的JavaScript插件文件transition.js（右側(cè)第29行引入Bootstrap上對(duì)外公布的transition.js的地址）。 transition.js文件為Bootstrap具有過(guò)渡動(dòng)畫(huà)效果的組件提供了動(dòng)畫(huà)過(guò)渡效果。不過(guò)需要注意的是，這些過(guò)渡動(dòng)畫(huà)都是采用CSS3來(lái)實(shí)現(xiàn)的，所以IE6-8瀏覽器是不具備這些過(guò)渡動(dòng)畫(huà)效果。 默認(rèn)情況之下，Bootstrap框架中以下組件使用了過(guò)渡動(dòng)畫(huà)效果： 模態(tài)彈出窗（Modal）的滑動(dòng)和漸變效果； 選項(xiàng)卡（Tab）的漸變效果； 警告框（Alert）的漸變效果； 圖片輪播（Carousel）的滑動(dòng)效果。 右側(cè)舉了一個(gè)“模態(tài)彈出窗（Modal）的滑動(dòng)和漸變效果”源代碼例子。查看全部
-
單獨(dú)導(dǎo)入： 為方便單獨(dú)導(dǎo)入特效文件，Bootstrap V3.2中提供了12種JavaScript插件，他們分別是： 動(dòng)畫(huà)過(guò)渡（Transitions）:對(duì)應(yīng)的插件文件“transition.js” 模態(tài)彈窗（Modal）:對(duì)應(yīng)的插件文件“modal.js” 下拉菜單（Dropdown）：對(duì)應(yīng)的插件文件“dropdown.js” 滾動(dòng)偵測(cè)（Scrollspy）：對(duì)應(yīng)的插件文件“scrollspy.js” 選項(xiàng)卡（Tab）：對(duì)應(yīng)的插件文件“tab.js” 提示框（Tooltips）：對(duì)應(yīng)的插件文件“tooltop.js” 彈出框（Popover）：對(duì)應(yīng)的插件文件“popover.js” 警告框（Alert）：對(duì)應(yīng)的插件文件“alert.js” 按鈕（Buttons）：對(duì)應(yīng)的插件文件“button.js” 折疊/手風(fēng)琴（Collapse）：對(duì)應(yīng)的插件文件“collapse.js” 圖片輪播Carousel：對(duì)應(yīng)的插件文件“carousel.js” 自動(dòng)定位浮標(biāo)Affix：對(duì)應(yīng)的插件文件“affix.js” 上述單獨(dú)插件的下載可到github去下載（https://github.com/twbs/bootstrap）。查看全部
-
增加類名“fade”為模態(tài)彈出框增加過(guò)度動(dòng)畫(huà)效果 <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"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態(tài)彈出窗標(biāo)題</h4> </div> <div class="modal-body"> <p>模態(tài)彈出窗主體內(nèi)容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div>查看全部
-
Bootstrap框架中的模態(tài)彈出框，分別運(yùn)用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內(nèi)容都放置在“modal-content”中，其主要又包括三個(gè)部分： 彈出框頭部，一般使用“modal-header”表示，主要包括標(biāo)題和關(guān)閉按鈕 彈出框主體，一般使用“modal-body”表示，彈出框的主要內(nèi)容 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕 模態(tài)彈出窗的結(jié)構(gòu)如下： <div class="modal show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態(tài)彈出窗標(biāo)題</h4></div> <div class="modal-body"> <p>模態(tài)彈出窗主體內(nèi)容</p></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button> <button type="button" class="btn btn-primary">保存</button></div> </div> </div> </div> 類名show的樣式為 .show{display:block !important;} 聲明了它的優(yōu)先級(jí)，已經(jīng)把關(guān)閉和X的樣式覆蓋掉（去掉這個(gè)類名就好了）。查看全部
-
最后一種情況下 如果要連同div之外的button按鈕一起都關(guān)閉掉的話，先給button按鈕加個(gè)獨(dú)有的id或者class屬性，假設(shè)button的id="col"，然后設(shè)置 data-target="#myAlert,#col"，這樣就可以連同按鈕一起關(guān)閉了。當(dāng)然 除此之外 你還可以通過(guò)這個(gè)關(guān)閉按鈕去關(guān)閉其他的東西?？傊O(shè)置了data-dismiss屬性的時(shí)候 通過(guò)data-target指向誰(shuí) 就是關(guān)閉誰(shuí)~查看全部
舉報(bào)
0/150
提交
取消