Bootstrap 下拉菜單.dropdown的具體使用方法
本章將具體講解下拉菜單的交互。使用下拉菜單(Dropdown)插件,您可以向任何組件(比如導(dǎo)航欄、標(biāo)簽頁(yè)、膠囊式導(dǎo)航菜單、按鈕等)添加下拉菜單。
下拉菜單.dropdown具體用法
.dropdown <下拉菜單觸發(fā)器button+下拉菜單ul>
.dropdown 包裹層
.dropdown-toggle 下拉菜單觸發(fā)器
data-toggle="dropdown 自定義屬性 可以與js關(guān)聯(lián)起來(lái)
.dropdown-menu 下拉菜單
具體實(shí)例:
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li> </ul> </div>
如果你想讓菜單默認(rèn)是打開(kāi)狀態(tài),需要添加一個(gè).open的類
<div class="dropdown open"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li> </ul> </div>
.dropup 向上彈出菜單
通過(guò)為下拉菜單的父元素設(shè)置 .dropup 類,可以讓菜單向上彈出(默認(rèn)是向下彈出的)
<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li> </ul> </div>
1、對(duì)齊方式:默認(rèn)左對(duì)齊
右對(duì)齊:給.dropdown-menu添加.dropdown-menu-right類就可以
注意:它是以父級(jí)的位置來(lái)對(duì)齊的
怎么樣讓下拉菜單以下拉菜單觸發(fā)器的右端對(duì)齊呢?那就需要給下拉菜單觸發(fā)器button添加一個(gè).btn block的類
<div class="dropup"> <button class="btn btn-default dropdown-toggle btn-block" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right " aria-labelledby="dropdownMenu2"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li> </ul> </div>
2、下拉菜單的標(biāo)題 dropdown-header
在任何下拉菜單中均可通過(guò)添加標(biāo)題來(lái)標(biāo)明一組動(dòng)作。
如果想讓下拉菜單的標(biāo)題居中,就需要添加一個(gè).text-center的類
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3"> ... <li class="dropdown-header text-center">Dropdown header</li> ... </ul>
3、分割線: .divider
為下拉菜單添加一條分割線,用于將多個(gè)鏈接分組。
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider"> ... <li role="separator" class="divider"></li> ... </ul>
4、禁用菜單:disabled
為下拉菜單中的 <li> 元素添加 .disabled 類,從而禁用相應(yīng)的菜單項(xiàng)。
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Regular link</a></li> <li class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Disabled link</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another link</a></li> </ul>
注意:
aria-haspopup="true" aria-expanded="true" 為需要借助屏幕閱讀器的特殊人群設(shè)置的
id="dropdownMenu1" aria-labelledby="dropdownMenu1" 通過(guò)id將觸發(fā)器和下拉菜單關(guān)聯(lián)起來(lái)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解bootstrap用dropdown-menu實(shí)現(xiàn)上下文菜單
- bootstrap如何讓dropdown menu按鈕式下拉框長(zhǎng)度一致
- Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼
- Bootstrap CSS組件之下拉菜單(dropdown)
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
- JQuery組件基于Bootstrap的DropDownList(完整版)
- 創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件
- 基于Bootstrap里面的Button dropdown打造自定義select
- Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
- JS組件Bootstrap dropdown組件擴(kuò)展hover事件
相關(guān)文章
Android 使用volley過(guò)程中遇到的問(wèn)題解決辦法
這篇文章主要介紹了Android 使用volley過(guò)程中遇到的問(wèn)題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-06-06Android 通過(guò)當(dāng)前經(jīng)緯度獲得城市的實(shí)例代碼
Android 通過(guò)當(dāng)前經(jīng)緯度獲得城市的實(shí)例代碼,需要的朋友可以參考一下2013-06-06Android RecyclerView的刷新分頁(yè)的實(shí)現(xiàn)
這篇文章主要介紹了Android RecyclerView的刷新分頁(yè)的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05使用Timer實(shí)現(xiàn)網(wǎng)頁(yè)勻速加載的進(jìn)度條樣式
這篇文章主要介紹了使用Timer實(shí)現(xiàn)網(wǎng)頁(yè)勻速加載的進(jìn)度條樣式,在使用WebView加載網(wǎng)頁(yè)時(shí)有時(shí)候網(wǎng)速等原因加載比較慢時(shí),影響用戶的體驗(yàn)度,今天小編給大家分享使用timer實(shí)現(xiàn)網(wǎng)頁(yè)勻速加載的進(jìn)度條樣式,需要的的朋友參考下吧2017-01-01零基礎(chǔ)學(xué)習(xí)教程之Linux下搭建android開(kāi)發(fā)環(huán)境
這篇文章主要介紹了Linux下搭建android開(kāi)發(fā)環(huán)境,特別適合零基礎(chǔ)的同學(xué)學(xué)習(xí),想要在Linux及ubuntu11.10下配置android4.0.3開(kāi)發(fā)環(huán)境的朋友可以參考一下2015-12-12Android RecyclerView添加頭部和底部實(shí)例詳解
這篇文章主要介紹了Android RecyclerView添加頭部和底部實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06Android基礎(chǔ)控件(EditView、SeekBar等)的使用方法
這篇文章主要介紹了Android基礎(chǔ)控件的屬性及使用方法,介紹了基礎(chǔ)控件有TextView、ImageView、Button、EditView等,感興趣的小伙伴們可以參考一下2016-03-03解決Android啟動(dòng)APP的一瞬間系統(tǒng)欄會(huì)變成藍(lán)色問(wèn)題
這篇文章主要介紹了解決Android啟動(dòng)APP的一瞬間系統(tǒng)欄會(huì)變成藍(lán)色問(wèn)題,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06