掃二維碼與項(xiàng)目經(jīng)理溝通
我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
Bootstrap 5 提供了不同樣式的按鈕。
<
button
type
=
"
button
"
class
=
"
btn
"
>
基本按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
主要按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-secondary
"
>
次要按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-success
"
>
成功
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-info
"
>
信息
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-warning
"
>
警告
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-danger
"
>
危險(xiǎn)
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-dark
"
>
黑色
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-light
"
>
淺色
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-link
"
>
鏈接
button
>
嘗試一下 ?
按鈕類可用于 ,
<
a
href
=
"
#
"
class
=
"
btn btn-info
"
role
=
"
button
"
>
鏈接按鈕
a
>
<
button
type
=
"
button
"
class
=
"
btn btn-info
"
>
按鈕
button
>
<
input
type
=
"
button
"
class
=
"
btn btn-info
"
value
=
"
輸入框按鈕
"
>
<
input
type
=
"
submit
"
class
=
"
btn btn-info
"
value
=
"
提交按鈕
"
>
<
input
type
=
"
reset
"
class
=
"
btn btn-info
"
value
=
"
重置按鈕
"
>
嘗試一下 ?
Bootstrap 5 也可以設(shè)置按鈕多邊框，鼠標(biāo)移動(dòng)到按鈕上添加突出到效果：
<
button
type
=
"
button
"
class
=
"
btn btn-outline-primary
"
>
主要按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-outline-secondary
"
>
次要按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-outline-success
"
>
成功
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-outline-info
"
>
信息
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-outline-warning
"
>
警告
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-outline-danger
"
>
危險(xiǎn)
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-outline-dark
"
>
黑色
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-outline-light text-dark
"
>
淺色
button
>
嘗試一下 ?
Bootstrap 5 可以設(shè)置按鈕的大小，使用 .btn-lg 類設(shè)置大按鈕，使用 .btn-sm 類設(shè)置小按鈕：
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-lg
"
>
大號(hào)按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
默認(rèn)按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-sm
"
>
小號(hào)按鈕
button
>
嘗試一下 ?
通過(guò)添加 .btn-block 類可以設(shè)置塊級(jí)按鈕，.d-grid 類設(shè)置在父級(jí)元素中：
<
div
class
=
"
d-grid
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-block
"
>
按鈕 1
button
>
div
>
嘗試一下 ?
如果有多個(gè)塊級(jí)按鈕，你可以使用用 .gap-* 類來(lái)設(shè)置：
<
div
class
=
"
d-grid gap-3
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-block
"
>
100% 寬度的按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-block
"
>
100% 寬度的按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-block
"
>
100% 寬度的按鈕
button
>
div
>
嘗試一下 ?
按鈕可設(shè)置為激活或者禁止點(diǎn)擊的狀態(tài)。
.active 類可以設(shè)置按鈕是可用的， disabled 屬性可以設(shè)置按鈕是不可點(diǎn)擊的。 注意 元素不支持 disabled 屬性，你可以通過(guò)添加 .disabled 類來(lái)禁止鏈接的點(diǎn)擊。
<
button
type
=
"
button
"
class
=
"
btn btn-primary active
"
>
點(diǎn)擊后的按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
disabled
>
禁止點(diǎn)擊的按鈕
button
>
<
a
href
=
"
#
"
class
=
"
btn btn-primary disabled
"
>
禁止點(diǎn)擊的鏈接
a
>
嘗試一下 ?
我們也可以設(shè)置一個(gè)正在加載的按鈕。
<
button
class
=
"
btn btn-primary
"
>
<
span
class
=
"
spinner-border spinner-border-sm
"
>
span
>
button
>
<
button
class
=
"
btn btn-primary
"
>
<
span
class
=
"
spinner-border spinner-border-sm
"
>
span
>
Loading..
button
>
<
button
class
=
"
btn btn-primary
"
disabled
>
<
span
class
=
"
spinner-border spinner-border-sm
"
>
span
>
Loading..
button
>
<
button
class
=
"
btn btn-primary
"
disabled
>
<
span
class
=
"
spinner-grow spinner-grow-sm
"
>
span
>
Loading..
button
>
嘗試一下 ?
我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
微信二維碼
微信二維碼
移動(dòng)版官網(wǎng)