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框架中不同的按鈕風格都是通過不同的類名來實現,下面是不同風格樣式的說明

相關文章