Bootstrap系列 -- 22. 按鈕詳解

賀臣發表於2015-06-25
boot

 

 

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

<button type="button" class="btn btn-default">基本樣式</button>

 

　　幾種不同樣式風格的按鈕

　　<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”。如果不新增是不會有任何按鈕效果

<button class="btn btn-default" type="button">button標籤按鈕</button> 
<input type="submit" class="btn btn-default" value="input標籤按鈕"/>
<span class="btn btn-default">span標籤按鈕</span>  
<div class="btn btn-default">div標籤按鈕</div>  
<a href="" class="btn btn-default">標籤</a>

 

　　在Bootstrap框架中不同的按鈕風格都是通過不同的類名來實現,下面是不同風格樣式的說明

 

　　Bootstrap框架中，對於按鈕的大小，也是可以定製的。類似於input一樣，通過在基礎按鈕“.btn”的基礎上追加類名來控制按鈕的大小

 

 

　　有時候在製作按鈕的時候需要按鈕寬度充滿整個父容器（width:100%），特別是在移動端的製作中。那麼前面的方法我們都無法很好的實現，除非重新定義按鈕的寬度。其實在Bootstrap中並不需要這樣做，Bootstrap框架中提供了一個類名“btn-block”。按鈕使用這個類名就可以讓按鈕充滿整個容器，並且這個按鈕不會有任何的padding和margin值。在實際當中，常把這種按鈕稱為塊狀按鈕

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

 

　　

　　Bootstrap框架針對按鈕的狀態做了一些特殊處理。在Bootstrap框架中針對按鈕的狀態效果主要分為兩種：活動狀態和禁用狀態。

　　Bootstrap按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover)，點選狀態(:active)和焦點狀態（:focus）幾種

 

　　

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

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

　　方法1：在標籤中新增disabled屬性

　　方法2：在元素標籤中新增類名“disabled”

　　兩者的主要區別是：

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

　　<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通過disabled屬性禁用按鈕</button> 
    <button class="btn btn-primary btn-block disabled" type="button">通過新增類名disabled禁用按鈕</button>
    <button class="btn btn-primary btn-sm btn-block" disabled="disabled" type="button">未禁用的按鈕</button>

 

相關文章