Bootstrap元件之下拉列表

2021-08-07 16:50:56 字數 3165 閱讀 3633

.dropdown——設定父元素為下拉列表元件,向下彈出子選單;

.dropup——設定父元素為下拉列表元件,向上彈出子選單;

.dropdown-toggle——設定按鈕為下拉列表切換按鈕;

.dropdown-menu——設定ul元素為下拉列表;

.dropdown-menu-right——將選單右對齊;

.pull-right——將選單元件的父元素右對齊;

.dropdown-header——為選單項新增標題;

.divider——為選單項新增分割線;

.disabled——禁用相應選單項;

[html]view plain

copy

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width,initial-scale=1"

>

<

title

>

css全域性樣式_下拉列表

title

>

<

link

rel=

"stylesheet"

href

="bootstrap.min.css"

type

="text/css"

>

<

script

src=

"jquery-1.11.1.min.js"

>

script

>

<

script

src=

"bootstrap.min.js"

>

script

>

head

>

<

body

>

<

divclass

="container"

>

<

divclass

="dropdown pull-right"

>

<

button

type

="button"

class

="btn btn-primary dropdown-toggle"

data-toggle

="dropdown"

>

下拉列表  

<

span

class

="caret"

>

span

>

button

>

<

ulclass

="dropdown-menu dropdown-menu-right"

role

="menu"

aria-labelledby

="dropdownmenu1"

>

<

lirole

="presentation"

class

="dropdown-header"

>

中超big4

li>

<

li>

<

ahref

="#"

role

="menuitem"

>

上海上港

a>

li>

<

li>

<

ahref

="#"

role

="menuitem"

>

廣州恆大

a>

li>

<

li>

<

ahref

="#"

role

="menuitem"

>

山東魯能

a>

li>

<

liclass

="disabled"

>

<

ahref

="#"

role

="menuitem"

>

北京國安

a>

li>

<

lirole

="presentation"

class

="divider"

>

li>

<

lirole

="presentation"

class

="dropdown-header"

>

中超5-8

li>

<

li>

<

ahref

="#"

role

="menuitem"

>

上海申花

a>

li>

<

li>

<

ahref

="#"

role

="menuitem"

>

江蘇舜天

a>

li>

<

li>

<

ahref

="#"

role

="menuitem"

>

長春亞泰

a>

li>

<

li>

<

ahref

="#"

role

="menuitem"

>

河南建業

Bootstrap元件之下拉列表

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

Bootstrap元件(2) 按鈕下拉列表

如需向按鈕新增下拉列表,只需要簡單地在在乙個 btn group 中放置按鈕和下拉列表即可。您也可以使用來指示按鈕作為下拉列表。示例 btn group button class btn btn primary dropdown toggle data toggle dropdown 原始 care...

Vue 元件放送之下拉省市區聯動

省市區聯動,又是乙個常見的元件。一般來說,通過select元素的onchange事件來實現,難度不大。而如今換作 vue 框架下,該如何實現呢?這正事我們接下來要 的,但先請容我說,甚至比舊方法更簡單!這就是來自資料驅動 mvvm 的威力!什麼是資料驅動呢?往大的說,可以很大 fei hua 且不同...