Bootstrap5 按钮

实例

<
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 也可以设置按钮多边框，鼠标移动到按钮上添加突出到效果：

实例

<
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
"
>
危险
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-outline-dark
"
>
黑色
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-outline-light text-dark
"
>
浅色
button
>

尝试一下 »

不同大小的按钮

Bootstrap 5 可以设置按钮的大小，使用 .btn-lg 类设置大按钮，使用 .btn-sm 类设置小按钮：

实例

<
button

type
=
"
button
"

class
=
"
btn btn-primary btn-lg
"
>
大号按钮
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-primary
"
>
默认按钮
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-primary btn-sm
"
>
小号按钮
button
>

尝试一下 »

块级按钮

通过添加 .btn-block 类可以设置块级按钮，.d-grid 类设置在父级元素中：

实例

<
div

class
=
"
d-grid
"
>

<
button

type
=
"
button
"

class
=
"
btn btn-primary btn-block
"
>
按钮 1
button
>

div
>

尝试一下 »

如果有多个块级按钮，你可以使用用 .gap-* 类来设置：

实例

<
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
>

尝试一下 »

激活和禁用的按钮

按钮可设置为激活或者禁止点击的状态。