實(shí)例

<
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
=
"
提交按鈕
"
>

嘗試一下 ?

按鈕設(shè)置邊框

實(shí)例

<
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 4 可以設(shè)置按鈕的大小：

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

嘗試一下 ?

塊級(jí)按鈕

通過(guò)添加 .btn-block 類可以設(shè)置塊級(jí)按鈕：

實(shí)例

<
button

type
=
"
button
"

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

嘗試一下 ?

激活和禁用的按鈕

按鈕可設(shè)置為激活或者禁止點(diǎn)擊的狀態(tài)。