Bootstrap下拉列表

2021-09-07 12:28:56 字數 969 閱讀 3070

使用下拉列表(dropdown)外掛程式,能夠向不論什麼元件(比方導航欄、標籤頁、膠囊式導航選單、button等)加入下拉列表。

假設想要單獨引用該外掛程式的功能,那麼須要引用 dropdown.js。或者能夠引入bootstrap.js或壓縮版的bootstrap.min.js。

通過 data 屬性:向鏈結或button加入 data-toggle="dropdown" 來切換下拉列表

下拉列表

我們不使用a標籤時,能夠看出,排版和使用了a標籤是不一樣的,通過審查元素能夠看出,css中對.dropdown-menu>li>a是設定了樣式的。

.dropdown-menu>li>a 

.dropdown-menu>li>a:focus,

.dropdown-menu>li>a:hover

給li加上class = "divider"

下拉列表

通過給.dropdown-menu 加上class pill-right能夠使其向右對齊。

下拉列表

通過給li加入class dropdown-header給下拉列表的標籤區域加入標題(注意,li中不巢狀a標籤)

下拉列表

Bootstrap多級下拉列表

首先需要將資料組裝成樹狀資料,就這個樣子的資料 組裝資料的函式如下 組裝資料 pid為父節點的id function rec data,id return arr 組裝資料後可以將遞迴將資料拼接成選單欄 拼接函式如下,遞迴不是很好理解,可以多看幾遍 載入導航欄,頁面初始化時載入多級選單 functi...

Bootstrap元件之下拉列表

dropdown 設定父元素為下拉列表元件,向下彈出子選單 dropup 設定父元素為下拉列表元件,向上彈出子選單 dropdown toggle 設定按鈕為下拉列表切換按鈕 dropdown menu 設定ul元素為下拉列表 dropdown menu right 將選單右對齊 pull righ...

Bootstrap元件之下拉列表

dropdown 設定父元素為下拉列表元件,向下彈出子選單 dropup 設定父元素為下拉列表元件,向上彈出子選單 dropdown toggle 設定按鈕為下拉列表切換按鈕 dropdown menu 設定ul元素為下拉列表 dropdown menu right 將選單右對齊 pull righ...