Bootstrap5 下拉菜單

下拉菜單可以是單選下拉菜單，也可以是多選的下拉菜單。

成都創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供沙坪壩企業(yè)網(wǎng)站建設(shè),專(zhuān)注與網(wǎng)站制作、成都做網(wǎng)站、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為沙坪壩眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

單選下拉菜單：

多選下拉菜單：

在 Bootstrap5 中下拉菜單 元素可以使用 .form-select 類(lèi)來(lái)渲染 :

實(shí)例

<
select

class
=
"
form-select
"
>

<
option
>
1
option
>

<
option
>
2
option
>

<
option
>
3
option
>

<
option
>
4
option
>

select
>

嘗試一下 ?

下拉菜單通過(guò) .form-select-lg 或 .form-select-sm 類(lèi)來(lái)修改大?。?/p>

實(shí)例

<
select

class
=
"
form-select form-select-lg
"
>

<
select

class
=
"
form-select
"
>

<
select

class
=
"
form-select form-select-sm
"
>

嘗試一下 ?

效果如下圖：

disabled 屬性可以禁止下拉菜單被選擇：

實(shí)例

<
select

class
=
"
form-select
"

disabled
>

<
option
>
1
option
>

<
option
>
2
option
>

<
option
>
3
option
>

<
option
>
4
option
>

select
>

嘗試一下 ?

數(shù)據(jù)列表

Bootstrap 也可以通過(guò) datalist 標(biāo)簽為

元素設(shè)置下拉菜單：

以下實(shí)例從列表中選擇一個(gè)網(wǎng)站：

實(shí)例

<
label

for
=
"
browser
"

class
=
"
form-label
"
>
選擇你喜歡的網(wǎng)站：
label
>

<
input

class
=
"
form-control
"

list
=
"
sites
"

name
=
"
site
"

id
=
"
site
"
>

<
datalist

id
=
"
sites
"
>

<
option

value
=
"
Google
"
>

<
option

value
=
"
Runoob
"
>

<
option

value
=
"
Taobao
"
>

<
option

value
=
"
Wiki
"
>

<
option

value
=
"
Zhihu
"
>

datalist
>

嘗試一下 ?

效果如下圖：