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