Bootstrap 按鈕

目標(biāo)

按鈕廣泛應(yīng)用于網(wǎng)站或應(yīng)用程序中。在本教程中，我們將通過實(shí)例、實(shí)例解釋來討論如何使用 Boostrap 3 按鈕，以及如何定制默認(rèn)的按鈕。

使用默認(rèn)的按鈕

下面的實(shí)例將演示如何通過 Bootstrap 3 快速創(chuàng)建按鈕。

以上代碼輸出如下。您可以點(diǎn)擊這里，在線查看實(shí)例。

CSS

我們將來探討一下用來創(chuàng)建這些按鈕的 CSS 規(guī)則。用于創(chuàng)建按鈕的主要的 class 是 btn，如下所示。

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
???? -moz-user-select: none;
????  -ms-user-select: none;
????   -o-user-select: none;
????????  user-select: none;
}

由于上面的 CSS 代碼，按鈕（帶有 btn class）呈現(xiàn)為 inline-block，允許按鈕與其具有共同基線的相鄰元素內(nèi)聯(lián)呈現(xiàn)，但是您可以給它添加 width 和 height 屬性。它的頂部填充和底部填充分別為 6 和 12 像素。底部外邊距設(shè)置為 0。

字體尺寸設(shè)置為 14 像素，且字體的粗細(xì)設(shè)置為 normal。帶有 btn class 的按鈕行高為 1.428571429，比默認(rèn)高度 1 稍高一點(diǎn)。文本居中對齊。

white-space 屬性設(shè)置為 nowrap，所以新行、空格和制表符將會折疊。相關(guān)的垂直居中的元素將會定位于高度的中間。當(dāng)您把鼠標(biāo)懸浮于相關(guān)元素之上時(shí)，光標(biāo)會呈現(xiàn)為指針形狀。這里不會顯示背景圖片。

這里將會呈現(xiàn)一個(gè)透明的，1 像素粗的實(shí)體邊框。由于 border-radius: 4px;，相關(guān)按鈕的邊角將是圓角狀的。通過增加或減少值 4px，您可以讓圓角的圓度變得更大或更小。由于 user-select: none，相關(guān)按鈕及子元素的文本將不可選。為了獲得跨瀏覽器的一致性，相同的屬性在應(yīng)用時(shí)帶有多個(gè)供應(yīng)商的前綴。

上面實(shí)例中顯示的每個(gè)按鈕除了 btn 之外還有另一個(gè) CSS class，比如 btn-default、btn-primary 等等。這些 class 用于設(shè)置按鈕的 color、background-color 和 border 屬性。他們是用于常規(guī)按鈕及帶有鏈接狀態(tài)（即 hover、active、focus 等等）按鈕的 CSS 規(guī)則。

btn-primary class 的代碼如下

.btn-primary {
  color: #ffffff;
  background-color: #428bca;
  border-color: #357ebd;
}

不同尺寸的按鈕

這里有三種尺寸可設(shè)置。為了設(shè)置每種尺寸，需要添加一個(gè)額外的 class。

btn-lg for setting large button.

<button type="button" class="btn btn-primary btn-lg">Large button</button>

btn-lg class 的 CSS 代碼如下

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

使用 btn-sm 和 btn-xs 設(shè)置帶有不同尺寸的按鈕。

<button type="button" class="btn btn-primary btn-sm">Large button</button>
<button type="button" class="btn btn-primary btn-xs">Large button</button>

btn-sm 和 btn-xs classe 的 CSS 代碼如下

.btn-sm,
.btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-xs {
  padding: 1px 5px;
}

下面的代碼演示了不同類型的帶有不同尺寸的按鈕。您可以點(diǎn)擊這里，在線查看演示。下面是效果截屏及代碼。

塊級按鈕

如需使用按鈕所在容器的所有寬度，Bootstrap 3 提供了塊級按鈕選項(xiàng)。您需要添加 btn-block class 到上面討論的 class 中來創(chuàng)建塊級按鈕。

<button type="button" class="btn btn-primary btn-lg btn-block">Large button</button>
<button type="button" class="btn btn-success btn-lg btn-block">Large button</button>  

創(chuàng)建塊級按鈕的 CSS 定義如下

.btn-block {
  display: block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

下面顯示了塊級按鈕的截屏和代碼。您可以 點(diǎn)擊這里，在線查看實(shí)例。

活動的按鈕

您可以使用 active CSS class 來給按鈕或鏈接添加不同的外觀，以顯示它是活動的。這里是一個(gè) 實(shí)例演示、截屏和代碼。

使用 Chrome 開發(fā)者工具，我們會發(fā)現(xiàn)當(dāng)按鈕被添加了 active class 時(shí)，CSS 規(guī)則生效。

Default 活動按鈕

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}

Primary 活動按鈕

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
color: #fff;
background-color: #3276b1;
border-color: #285e8e;
}

Success 活動按鈕

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
color: #fff;
background-color: #47a447;
border-color: #398439;
}

Info 活動按鈕

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
color: #fff;
background-color: #39b3d7;
border-color: #269abc;
}

Warning 活動按鈕

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {
color: #fff;
background-color: #ed9c28;
border-color: #d58512;
}

Danger 活動按鈕

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
color: #fff;
background-color: #d2322d;
border-color: #ac2925;
}

Link 活動按鈕

.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
border-color: transparent;
}

所以，您可以看到這些是通過改變 color、backgound-color 和 border-color 屬性來實(shí)現(xiàn)的。

禁用的按鈕

您可以使用 disabled CSS class 來給按鈕或鏈接添加不同的外觀，以顯示它是禁用的。這里是一個(gè) 實(shí)例演示、截屏和代碼。

為了使按鈕有點(diǎn)模糊，使用下面的 CSS 規(guī)則（通過 Chrome 開發(fā)者工具查找）

.btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}

禁用的錨元素

當(dāng)帶有 btn 和其他相關(guān)的 class 的錨元素呈現(xiàn)為禁用狀態(tài)時(shí)，它與平常有點(diǎn)不同。首先，錨元素的鏈接仍然存在，只有外觀和感觀改變了。此外，您不能在導(dǎo)航欄中使用它們。

點(diǎn)擊這里，在線查看演示。代碼如下：

請注意，role="button" 是為了便于使用的目的而使用的。

按鈕標(biāo)簽

您可以通過 button、a 和 input 元素使用按鈕 class，來把按鈕當(dāng)成標(biāo)簽使用。但是推薦您通常是通過 button 元素來使用，否則它將引起跨瀏覽器不一致問題。

下面的實(shí)例演示了如何使用按鈕標(biāo)簽

點(diǎn)擊這里，在線查看演示。

定制按鈕

現(xiàn)在我們將以默認(rèn)按鈕開始進(jìn)行定制，讓它擁有一個(gè)完全不同的外觀和感觀。

我們將按如下的按鈕代碼開始

<button type="button" class="btn btn-default">Default</button>

現(xiàn)在我們要創(chuàng)建一個(gè) CSS class btn-w3r，并用它替換 btn-default。所以，我們將編寫如下代碼來取代上面的代碼

<button type="button" class="btn btn-w3r">Default</button>

首先我們將改變背景顏色，添加如下的 CSS

.btn-w3r {
????background: #cb60b3; /* Old browsers */
????background: -moz-linear-gradient(top,  #cb60b3 0%, #ad1283 50%, #de47ac 100%); /* FF3.6+ */
????background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#ad1283), color-stop(100%,#de47ac)); /   *   Chrome,Safari4+ */
????background: -webkit-linear-gradient(top,  #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Chrome10+,Safari5.1+ */
????background: -o-linear-gradient(top,  #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Opera 11.10+ */
????background: -ms-linear-gradient(top,  #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* IE10+ */
????background: linear-gradient(to bottom,  #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* W3C */
????filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=0 ); /* IE6-9 */
????}

現(xiàn)在按鈕如下所示

如需改變字體顏色，我們將在已存在的 btn-w3r class 的 CSS 代碼后追加如下的 CSS

color:#fff;

現(xiàn)在，為了讓按鈕形狀看起來像圓形，我們將在已存在的 btn-w3r class 的 CSS 代碼前添加如下的 CSS

width: 200px;
????height: 200px;
????-moz-border-radius: 50%;
????-webkit-border-radius: 50%;
????border-radius: 50%;

如需添加一個(gè)懸停效果，我們將添加如下的 CSS 代碼

.btn-w3r:hover {
????background: #333; 
????color:#e75616;
????}

下面是添加上述 CSS 代碼后的按鈕懸停效果

您可以 點(diǎn)擊這里，查看我們所創(chuàng)建的定制按鈕的在線演示。