亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

在Bootstrap框架中，要禁用按鈕有兩種實現方式：

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

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

兩者的主要區別是：

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

Bootstrap框架中提供了一個類名“btn-block”。按鈕使用這個類名就可以讓按鈕充滿整個容器，并且這個按鈕不會有任何的padding和margin值。在實際當中，常把這種按鈕稱為塊狀按鈕。

使用方法和前面的類似，只需要在原按鈕類名上添加“.btn-block”類名，當然“.btn”類名是不可或缺的：

<button?class="btnbtn-primary?btn-lg?btn-block"?type="button">大型按鈕.btn-lg</button>
<button?class="btnbtn-primary?btn-block"?type="button">正常按鈕</button>
<button?class="btnbtn-primary?btn-sm?btn-block"?type="button">小型按鈕.btn-sm</button>
<button?class="btnbtn-primary?btn-xs?btn-block"?type="button">超小型按鈕.btn-xs</button>

在Bootstrap框架中不同的按鈕風格都是通過不同的類名來實現，在使用過程中，開發者只需要選擇不同的類名即可：

使用起來就很簡單，就像前面介紹的默認按鈕一樣的使用方法，只需要在基礎按鈕“.btn”基礎上追加對應的類名，就可以得到需要的按鈕風格。如：

<button?class="btn"?type="button">基礎按鈕.btn</button>
<button?class="btn?btn-default"?type="button">默認按鈕.btn-default</button>
<button?class="btn?btn-primary"?type="button">主要按鈕.btn-primary</button>
<button?class="btn?btn-success"?type="button">成功按鈕.btn-success</button>
<button?class="btn?btn-info"?type="button">信息按鈕.btn-info</button>
<button?class="btn?btn-warning"?type="button">警告按鈕.btn-warning</button>
<button?class="btn?btn-danger"?type="button">危險按鈕.btn-danger</button>
<button?class="btn?btn-link"?type="button">鏈接按鈕.btn-link</button>

運行效果如下或查看右側結果窗口：

一般制作按鈕除了使用<button>標簽元素之外，還可以使用<input type="submit">和<a>標簽等。同樣，在Bootstrap框架中制作按鈕時，除了剛才所說的這些標簽元素之外，還可以使用在其他的標簽元素上，唯一需要注意的是，要在制作按鈕的標簽元素上添加類名“btn”。如果不添加是不會有任何按鈕效果。

Bootstrap框架首先通過基礎類名“.btn”定義了一個基礎的按鈕風格，然后通過“.btn-default”定義了一個默認的按鈕風格。默認按鈕的風格就是在基礎按鈕的風格的基礎上修改了按鈕的背景顏色、邊框顏色和文本顏色

在Bootstrap V2.x版本中還提供了一個行內提示信息，其使用了類名“help-inline”。一般讓提示信息顯示在控件的后面，也就是同一水平顯示。如果你想在BootstrapV3.x版本也有這樣的效果，你可以添加這段代碼：

平常在制作表單驗證時，要提供不同的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式，將提示信息以塊狀顯示，并且顯示在控件底部。

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

而且必須在表單中添加了一個 span 元素：

很多時候，在表單驗證的時候，不同的狀態會提供不同的 icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應的狀態下顯示 icon 出來，只需要在對應的狀態下添加類名“has-feedback”。請注意，此類名要與“has-error”、“has-warning”和“has-success”在一起：

在制作表單時，不免要做表單驗證。同樣也需要提供驗證狀態樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態（黃色）
2、.has-error：錯誤狀態（紅色）
3、.has-success：成功狀態（綠色）
使用的時候只需要在form-group容器上對應添加狀態類名。

在Bootstrap框架中，如果fieldset設置了disabled屬性，整個域都將處于被禁用狀態。

只需要在需要禁用的表單控件上加上“disabled”即可：

<input?class="form-control"?type="text"?placeholder="表單已禁用，不能輸入"?disabled>

運行效果如下或查看右側結果窗口：

在使用了“form-control”的表單控件中，樣式設置了禁用表單背景色為灰色，而且手型變成了不準輸入的形狀。如果控件中不使用類名“form-control”，禁用的控件只會有一個不準輸入的手型出來。

前面看到的表單控件都正常的大小。可以通過設置控件的height，line-height，padding和font-size等屬性來實現控件的高度設置。不過Bootstrap框架還提供了兩個不同的類名，用來控制表單控件的高度。這兩個類名是：
1、input-sm:讓控件比正常大小更小
2、input-lg:讓控件比正常大小更大

這兩個類適用于表單中的input，textarea和select控件

有時候，為了布局的需要，將復選框和單選按鈕需要水平排列。Bootstrap框架也做了這方面的考慮：
1、如果checkbox需要水平排列，只需要在label標簽上添加類名“checkbox-inline”
2、如果radio需要水平排列，只需要在label標簽上添加類名“radio-inline”

<div?class="form-group">
??????<label?class="radio-inline">
????????<input?type="radio"??value="option1"?name="sex">?男性
??????</label>
??????<label?class="radio-inline">
????????<input?type="radio"??value="option2"?name="sex">?女性
??????</label>
??????<label?class="radio-inline">
????????<input?type="radio"??value="option3"?name="sex">?中性
??????</label>
</div>