bootstrap學習筆記-按鈕

對應的元種類：

• 導航和導航條組件只支持<button>元素如果
• 如果 <a> 元素被作爲按鈕使用，並用於在當前頁面觸發某些功能，而不是用於鏈接其他頁面或鏈接當前頁面中的其他部分，那麼，務必爲其設置 role=”button” 屬性。

一些預定義樣式

<button type="button" class="btn btn-defalut"></button>
<button type="button" class="btn btn-primary"></button>
<button type="button" class="btn btn-success"></button>
<button type="button" class="btn btn-info"></button>
<button type="button" class="btn btn-link"></button>
<button type="button" class="btn btn-warning"></button>
<button type="button" class="btn btn-danger"></button>

• 如果要調整按鈕的大小：有類：.btn-lg .btn-sm .btn-xs, 默認的可以看做是md的大小；
• 還可以將按鈕變成塊級元素，它的寬度會拉伸至父元素的100%，類：.btn-block

按鈕組

• .btn-group
• .btn-group-justified (會與父容器端點對齊，就是寬度自適應；要注意的是：這裏如果是<a>標籤那麼效果是ok的，但如果是另外2個標籤，則需要對每一個元素外面都加一個<div class="btn-group">)
• .btn-group-vertical(垂直按鈕，==注意==這裏不要加.btn-group,不然效果上不太好)
  -同理可以修改大小，.btn-group-lg……

下拉菜單的箭頭

<a href="#" class="btn btn-primary">按鈕<span class="caret"></span></a>

或者使用組

<div class="btn-group">
    <a href="#" class="btn btn-primary">按鈕</a>
    <a href="#" class="btn btn-primary"><span class="caret"></span></a>
</div>

• ==注意==這裏只適合<a>和<button>標籤，如果是input則效果上不太好。也就是說如果是按鈕要和一些圖標組合使用時最好用a或者button
• 向上的箭頭：在父容器中加上類.dropup

<div class="btn-group dropup">
    <a href="#" class="btn btn-primary">按鈕</a>
    <a href="#" class="btn btn-primary"><span class="caret"></span></a>
</div>