建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap 按鈕
本章將通過實例講解如何使用 Bootstrap 按鈕。任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認外觀。但是 Bootstrap 提供了一些選項來定義按鈕的樣式，具體如下表所示：
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供青河網(wǎng)站建設(shè)、青河做網(wǎng)站、青河網(wǎng)站設(shè)計、青河網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、青河企業(yè)網(wǎng)站模板建站服務(wù)，十多年青河做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
以下樣式可用于,
| 類 | 描述 | 實例 |
|---|---|---|
| .btn | 為按鈕添加基本樣式 | 嘗試一下 |
| .btn-default | 默認/標準按鈕 | 嘗試一下 |
| .btn-primary | 原始按鈕樣式（未被操作） | 嘗試一下 |
| .btn-success | 表示成功的動作 | 嘗試一下 |
| .btn-info | 該樣式可用于要彈出信息的按鈕 | 嘗試一下 |
| .btn-warning | 表示需要謹慎操作的按鈕 | 嘗試一下 |
| .btn-danger | 表示一個危險動作的按鈕操作 | 嘗試一下 |
| .btn-link | 讓按鈕看起來像個鏈接 (仍然保留按鈕行為) | 嘗試一下 |
| .btn-lg | 制作一個大按鈕 | 嘗試一下 |
| .btn-sm | 制作一個小按鈕 | 嘗試一下 |
| .btn-xs | 制作一個超小按鈕 | 嘗試一下 |
| .btn-block | 塊級按鈕(拉伸至父元素100%的寬度) | 嘗試一下 |
| .active | 按鈕被點擊 | 嘗試一下 |
| .disabled | 禁用按鈕 | 嘗試一下 |
下面的實例演示了上面所有的按鈕 class：
實例
<
button
type
=
"
button
"
class
=
"
btn btn-default
"
>
默認按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
原始按鈕
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
"
>
危險按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-link
"
>
鏈接按鈕
button
>
嘗試一下 ?
結(jié)果如下所示：
按鈕大小
下表列出了獲得各種大小按鈕的 class：
| Class | 描述 |
|---|---|
| .btn-lg | 這會讓按鈕看起來比較大。 |
| .btn-sm | 這會讓按鈕看起來比較小。 |
| .btn-xs | 這會讓按鈕看起來特別小。 |
| .btn-block | 這會創(chuàng)建塊級的按鈕，會橫跨父元素的全部寬度。 |
下面的實例演示了上面所有的按鈕 class：
實例
<
p
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-lg
"
>
大的原始按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-default btn-lg
"
>
大的按鈕
button
>
p
>
<
p
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
默認大小的原始按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-default
"
>
默認大小的按鈕
button
>
p
>
<
p
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-sm
"
>
小的原始按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-default btn-sm
"
>
小的按鈕
button
>
p
>
<
p
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-xs
"
>
特別小的原始按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-default btn-xs
"
>
特別小的按鈕
button
>
p
>
<
p
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-lg btn-block
"
>
塊級的原始按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-default btn-lg btn-block
"
>
塊級的按鈕
button
>
p
>
嘗試一下 ?
結(jié)果如下所示：
按鈕狀態(tài)
Bootstrap 提供了激活、禁用等按鈕狀態(tài)的 class，下面將進行詳細講解。
激活狀態(tài)
按鈕在激活時將呈現(xiàn)為被按壓的外觀（深色的背景、深色的邊框、陰影）。
下表列出了讓按鈕元素和錨元素呈激活狀態(tài)的 class：
| 元素 | Class |
|---|---|
| 按鈕元素 | 添加 .active class 來顯示它是激活的。 |
| 錨元素 | 添加 .active class 到 按鈕來顯示它是激活的。 |
下面的實例演示了這點：
實例
<
p
>
<
button
type
=
"
button
"
class
=
"
btn btn-default btn-lg
"
>
默認按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-default btn-lg active
"
>
激活按鈕
button
>
p
>
<
p
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-lg
"
>
原始按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-lg active
"
>
激活的原始按鈕
button
>
p
>
嘗試一下 ?
結(jié)果如下所示：
禁用狀態(tài)
當您禁用一個按鈕時，它的顏色會變淡 50%，并失去漸變。
下表列出了讓按鈕元素和錨元素呈禁用狀態(tài)的 class：
| 元素 | Class |
|---|---|
| 按鈕元素 | 添加 disabled 屬性 到 |
| 錨元素 | 添加 disabled class 到 按鈕。 |
下面的實例演示了這點：
實例
<
p
>
<
button
type
=
"
button
"
class
=
"
btn btn-default btn-lg
"
>
默認按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-default btn-lg
"
disabled
=
"
disabled
"
>
禁用按鈕
button
>
p
>
<
p
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-lg
"
>
原始按鈕
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary btn-lg
"
disabled
=
"
disabled
"
>
禁用的原始按鈕
button
>
p
>
<
p
>
<
a
href
=
"
#
"
class
=
"
btn btn-default btn-lg
"
role
=
"
button
"
>
鏈接
a
>
<
a
href
=
"
#
"
class
=
"
btn btn-default btn-lg disabled
"
role
=
"
button
"
>
禁用鏈接
a
>
p
>
<
p
>
<
a
href
=
"
#
"
class
=
"
btn btn-primary btn-lg
"
role
=
"
button
"
>
原始鏈接
a
>
<
a
href
=
"
#
"
class
=
"
btn btn-primary btn-lg disabled
"
role
=
"
button
"
>
禁用的原始鏈接
a
>
p
>
嘗試一下 ?
結(jié)果如下所示：
按鈕標簽
您可以在 、
下面的實例演示了這點：
實例
<
a
class
=
"
btn btn-default
"
href
=
"
#
"
role
=
"
button
"
>
鏈接
a
>
<
button
class
=
"
btn btn-default
"
type
=
"
submit
"
>
按鈕
button
>
<
input
class
=
"
btn btn-default
"
type
=
"
button
"
value
=
"
輸入
"
>
<
input
class
=
"
btn btn-default
"
type
=
"
submit
"
value
=
"
提交
"
>
嘗試一下 ?
結(jié)果如下所示：
按鈕組
在 div 中直接使用 .btn-group 可以創(chuàng)建按鈕組：
實例
<
div
class
=
"
btn-group
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Apple
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Samsung
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Sony
button
>
div
>
嘗試一下 ?
使用 .btn-group-lg|sm|xs 來控制按鈕組的大小：
實例
<
div
class
=
"
btn-group btn-group-lg
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Apple
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Samsung
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Sony
button
>
div
>
嘗試一下 ?
如果要設(shè)置垂直方向的按鈕可以通過 .btn-group-vertical 類來設(shè)置：
實例
<
div
class
=
"
btn-group-vertical
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Apple
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Samsung
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Sony
button
>
div
>
嘗試一下 ?
自適應(yīng)大小的按鈕組
可以通過 .btn-group-justified 類來設(shè)置自適應(yīng)大小的按鈕組。
以下實例使用 a 標簽來展示：
實例
<
div
class
=
"
btn-group btn-group-justified
"
>
<
a
href
=
"
#
"
class
=
"
btn btn-primary
"
>
Apple
a
>
<
a
href
=
"
#
"
class
=
"
btn btn-primary
"
>
Samsung
a
>
<
a
href
=
"
#
"
class
=
"
btn btn-primary
"
>
Sony
a
>
div
>
嘗試一下 ?
注意: 如果是 元素, 你需要在外層使用 .btn-group 類來包裹:
實例
<
div
class
=
"
btn-group btn-group-justified
"
>
<
div
class
=
"
btn-group
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Apple
button
>
div
>
<
div
class
=
"
btn-group
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Samsung
button
>
div
>
<
div
class
=
"
btn-group
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Sony
button
>
div
>
div
>
嘗試一下 ?
內(nèi)嵌下拉菜單的按鈕組
按鈕組內(nèi)嵌的按鈕可以設(shè)置下拉菜單，如下實例：
實例
<
div
class
=
"
btn-group
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Apple
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Samsung
button
>
<
div
class
=
"
btn-group
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary dropdown-toggle
"
data-toggle
=
"
dropdown
"
>
Sony
<
span
class
=
"
caret
"
>
span
>
button
>
<
ul
class
=
"
dropdown-menu
"
role
=
"
menu
"
>
<
li
>
<
a
href
=
"
#
"
>
Tablet
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
Smartphone
a
>
li
>
ul
>
div
>
div
>
嘗試一下 ?
分割按鈕
實例
<
div
class
=
"
btn-group
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Sony
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary dropdown-toggle
"
data-toggle
=
"
dropdown
"
>
<
span
class
=
"
caret
"
>
span
>
button
>
<
ul
class
=
"
dropdown-menu
"
role
=
"
menu
"
>
<
li
>
<
a
href
=
"
#
"
>
Tablet
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
Smartphone
a
>
li
>
ul
>
div
>
嘗試一下 ?
分享標題：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap按鈕
文章轉(zhuǎn)載：http://m.fisionsoft.com.cn/article/djoheds.html
