和input等表單控件一樣，在Bootstrap框架的按鈕中也具有禁用狀態(tài)的設(shè)置。禁用狀態(tài)與其他狀態(tài)按鈕相比，就是背景顏色的透明度做了一定的處理，opcity的值從100%調(diào)整為65%。

在Bootstrap框架中，要禁用按鈕有兩種實現(xiàn)方式：

方法1：在標簽中添加disabled屬性

方法2：在元素標簽中添加類名“disabled”

兩者的主要區(qū)別是：

“.disabled”樣式不會禁止按鈕的默認行為，比如說提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認行為，則需要通過JavaScript這樣的語言來處理。對于<a>標簽也存在類似問題，如果通過類名“.disable”來禁用按鈕，其鏈接行為是無法禁止。而在元素標簽中添加“disabled”屬性的方法是可以禁止元素的默認行為的。

下面是兩種方法的舉例：

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通過disabled屬性禁用按鈕</button>
<button class="btnbtn-primary btn-block disabled" type="button">通過添加類名disabled禁用按鈕</button>
<button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按鈕</button>

運行效果如下或查看右側(cè)結(jié)果窗口：

對應(yīng)的樣式代碼請查閱bootstrap.css文件第2030行～第2039行：

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

同樣的，其他風格按鈕也具有這樣的效果，只是顏色做了一定的調(diào)整，比如信息按鈕(.btn-info)所示：
/*源碼請查看bootstrap.css文件第2182行～第2199行*/

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
background-color: #5bc0de;
border-color: #46b8da;
}

到此有關(guān)于按鈕的基礎(chǔ)知識就算是介紹完了，同樣的，大家可以通過buttons.less或者_buttons.scss來自定義按鈕風格。