Bootstrap5 下拉菜单

下拉菜单可以是单选下拉菜单，也可以是多选的下拉菜单。

成都创新互联公司是一家专业提供沙坪坝企业网站建设,专注与网站制作、成都做网站、H5网站设计、小程序制作等业务。10年已为沙坪坝众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

单选下拉菜单：

多选下拉菜单：

在 Bootstrap5 中下拉菜单 元素可以使用 .form-select 类来渲染 :

实例

<
select

class
=
"
form-select
"
>

<
option
>
1
option
>

<
option
>
2
option
>

<
option
>
3
option
>

<
option
>
4
option
>

select
>

尝试一下 »

下拉菜单通过 .form-select-lg 或 .form-select-sm 类来修改大小：

实例

<
select

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

<
select

class
=
"
form-select
"
>

<
select

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

尝试一下 »

效果如下图：

disabled 属性可以禁止下拉菜单被选择：

实例

<
select

class
=
"
form-select
"

disabled
>

<
option
>
1
option
>

<
option
>
2
option
>

<
option
>
3
option
>

<
option
>
4
option
>

select
>

尝试一下 »

数据列表

Bootstrap 也可以通过 datalist 标签为

元素设置下拉菜单：

以下实例从列表中选择一个网站：

实例

<
label

for
=
"
browser
"

class
=
"
form-label
"
>
选择你喜欢的网站：
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
>

尝试一下 »

效果如下图：