BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉)
布局組件
下拉按鈕
<div class="dropdown"> <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown"> 幫助<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 關(guān)于我們 </a> </li> <li role="presentation"> <a role="menuitem" href="#"> 關(guān)于我們 </a> </li> <li role="presentation"> <a role="menuitem" href="#"> 關(guān)于我們 </a> </li> <li role="presentation"> <a role="menuitem" href="#"> 關(guān)于我們 </a> </li> </ul> </div>
要構(gòu)建一個下拉菜單,首先,需要一個div加class(dropdown)來包容所有代碼(不然下拉菜單定位找不到),然后在加一個觸發(fā)下拉菜單的按鈕(或者a標(biāo)簽),再加一個下拉菜單ul
觸發(fā)者樣式: .dropdown-toggle ; 屬性:data-toggle=”dorpdown”
菜單樣式: .dropdown-menu 屬性:role=”menu” aria-labelledby='id'
其他:role=”presentation”; role=”menuitem”
樣式: .divider 分割線; .dropdown-header:下拉菜單頭部(不可點(diǎn)擊); .dropdown-menu-right:向右對齊的菜單; .dropup:上拉樣式(給父類容器添加)
按鈕組
<div class="btn-group" role="toolbar"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">按鈕 1</button> <button type="button" class="btn btn-default">按鈕 2</button> <button type="button" class="btn btn-default">按鈕 3</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">按鈕 4</button> <button type="button" class="btn btn-default">按鈕 5</button> <button type="button" class="btn btn-default">按鈕 6</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">按鈕 7</button> <button type="button" class="btn btn-default">按鈕 8</button> <button type="button" class="btn btn-default">按鈕 9</button> </div> </div>
由多個按鈕組構(gòu)成的一個toolbar!
每個按鈕組由一個div容器加 .btn-group樣式構(gòu)成(同時可以搭配大小等其他樣式)
每個按鈕組中由幾個按鈕組成
利用按鈕組和單獨(dú)的下拉菜單構(gòu)成分割下拉菜單
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默認(rèn) <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一個功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分離的鏈接</a> </li> </ul> </div>
以上所述是小編給大家介紹的BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- Markdown+Bootstrap圖片自適應(yīng)屬性詳解
- Markdown與Bootstrap相結(jié)合實(shí)現(xiàn)圖片自適應(yīng)屬性
- 使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口
- Bootstrap頁面布局基礎(chǔ)知識全面解析
- bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局
- BootStrap整體框架之基礎(chǔ)布局組件
- Bootstrap表單布局
- Bootstrap 布局組件(全)
- bootstrap實(shí)現(xiàn)的自適應(yīng)頁面簡單應(yīng)用示例
相關(guān)文章
才發(fā)現(xiàn)的超鏈接js導(dǎo)致網(wǎng)頁中GIF動畫停止的解決方法
才發(fā)現(xiàn)的超鏈接js導(dǎo)致網(wǎng)頁中GIF動畫停止的解決方法...2007-11-11JavaScript實(shí)現(xiàn)讀取與輸出XML文件數(shù)據(jù)的方法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)讀取與輸出XML文件數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了JavaScript基于ActiveXObject實(shí)現(xiàn)載入、讀取與輸出xml文件數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06bootstrap fileinput插件實(shí)現(xiàn)預(yù)覽上傳照片功能
這篇文章主要介紹了bootstrap fileinput插件實(shí)現(xiàn)預(yù)覽上傳照片功能,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-01-01淺談addEventListener和attachEvent的區(qū)別
下面小編就為大家?guī)硪黄獪\談addEventListener和attachEvent的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07JS+CSS實(shí)現(xiàn)自動切換的網(wǎng)頁滑動門菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)自動切換的網(wǎng)頁滑動門菜單效果代碼,涉及JavaScript基于時間函數(shù)動態(tài)變換頁面tab樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09JavaScript中內(nèi)置函數(shù)Map()的使用
Map()是JavaScript中內(nèi)置的一種數(shù)據(jù)結(jié)構(gòu),它允許您將鍵值對映射到任意類型的值,主要介紹了JavaScript中內(nèi)置函數(shù)Map()的使用,感興趣的可以了解一下2023-05-05