掃二維碼與項(xiàng)目經(jīng)理溝通
我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
下拉菜單可以是單選下拉菜單，也可以是多選的下拉菜單。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供沙坪壩企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、成都做網(wǎng)站、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為沙坪壩眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。
單選下拉菜單：
多選下拉菜單：
在 Bootstrap5 中下拉菜單 元素可以使用 .form-select 類來(lái)渲染 :
<
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)修改大?。?/p>
<
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 也可以通過(guò) datalist 標(biāo)簽為 元素設(shè)置下拉菜單：
以下實(shí)例從列表中選擇一個(gè)網(wǎng)站：
<
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
>
嘗試一下 ?
效果如下圖：
我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
微信二維碼
微信二維碼
移動(dòng)版官網(wǎng)