bootstrap組件之按鈕式下拉菜單小結(jié)
更新時(shí)間：2017年01月19日 11:41:52 作者：zaichuanguanshui
這篇文章主要介紹了bootstrap組件之按鈕式下拉菜單，包括單按鈕下拉菜單，分裂式下拉菜單和向上彈出式菜單，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧
1、單按鈕下拉菜單
基礎(chǔ)的下拉菜單最外層是.dropdown的div
現(xiàn)在只需要改成.btnd-group的div就可以實(shí)現(xiàn)單按鈕的下拉菜單
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
2、分裂式按鈕下拉菜單
分裂式按鈕下拉菜單，就是按鈕和圖表分離開
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
3、尺寸
在button上添加.btn-lg.btn-sm.btn-xs可以控制按鈕大小
<div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div>
4、向上彈出式菜單
只需要在最外層的div上添加一個(gè).dropup就可以實(shí)現(xiàn)向上彈出的菜單
<div class="btn-group dropup">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
以上所述是小編給大家介紹的bootstrap組件之按鈕式下拉菜單，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于WPS的JS宏操作方法總結(jié)的相關(guān)資料,WPS是一款常用的辦公軟件,其中的JS宏功能可以幫助用戶實(shí)現(xiàn)自動(dòng)化操作和批量處理等需求,需要的朋友可以參考下2023-09-09
深入理解JavaScript強(qiáng)制類型轉(zhuǎn)換
JavaScript中的強(qiáng)制類型轉(zhuǎn)換包括顯式和隱式轉(zhuǎn)換,涉及字符串、數(shù)字和布爾值三種基本類型,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法
這篇文章主要介紹了js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法,涉及javascript中onchange事件及頁面元素遍歷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
javascript截取字符串(通過substring實(shí)現(xiàn)并支持中英文混合)
用js方法substring()、方法substr()實(shí)現(xiàn)如標(biāo)題所示的截取字符串并支持中英文混合，具體代碼如下，感興趣的各位可以參考下哈2013-06-06
這篇文章主要為大家詳細(xì)介紹了js注入，黑客之路必備！本文告訴大家什么是js注入，如何進(jìn)行js注入攻防，感興趣的小伙伴們可以參考一下2016-09-09
PixiJS學(xué)習(xí)之Sprite類的使用詳解
Sprite 直譯為 “精靈”，是游戲開發(fā)中常見的術(shù)語，就是將一個(gè)角色的多個(gè)動(dòng)作放到一個(gè)圖片里，通過裁剪局部區(qū)域得到當(dāng)前的角色狀態(tài)圖。本文主要介紹了PixiJS中Sprite類的使用，需要的可以參考一下2023-02-02
詳解微信小程序網(wǎng)絡(luò)請(qǐng)求接口封裝實(shí)例
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請(qǐng)求接口封裝，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
uniapp組件之tab選項(xiàng)卡滑動(dòng)切換功能實(shí)現(xiàn)
這篇文章主要介紹了uniapp組件之tab選項(xiàng)卡滑動(dòng)切換功能實(shí)現(xiàn)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-01-01
利用js進(jìn)行加解密是我們經(jīng)常會(huì)遇到的一個(gè)功能，本文給大家介紹的是我目前見到的最全的個(gè)人js加解密功能頁面，分享出來供大家參考學(xué)習(xí)，需要的朋友們隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2007-12-12
這篇文章主要介紹了TypeScript 泛型的使用，在JavaScript中，封裝一個(gè)API可以具有多種用途，因?yàn)槠鋵?shí)弱類型語言，但是就因?yàn)槭侨躅愋涂梢宰罱K得到的結(jié)果并不是我們想要的，下面我們就來看看具體TypeScript 泛型的使用吧2021-12-12