Bootstrap3系列：按鈕組

1. 基本實例

1.1 示例代碼

<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

　　.btn-group中包含多個.btn

1.2 示例效果

2. 按鈕工具欄

2.1 示例代碼

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-step-backward"></span>
        </button>
        <button type="button" class="btn btn-default"">
            <span class="glyphicon glyphicon-backward"></span>
        </button>
    </div>
    <div class="btn-group">
        <span class="btn btn-default"">1</span>
        <span class="btn btn-default"">2</span>
        <span class="btn btn-default"">...</span>
        <span class="btn btn-default"">9</span>
        <span class="btn btn-default"">10</span>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"">
            <span class="glyphicon glyphicon-forward"></span>
        </button>
        <button type="button" class="btn btn-default"">
            <span class="glyphicon glyphicon-step-forward"></span>
        </button>
    </div>
</div>

　　一個.btn-toolbar中包含多個.btn-group

2.2 示例效果

3. 大小

　　在.btn-group上添加.btn-group-*設置按鈕組中的每個按鈕。

3.1 示例代碼

3.2 示例效果

4. 嵌套

　　下拉菜單混合到一系列按鈕中，把 .btn-group 放入另一個 .btn-group 中。

4.1 示例代碼

<div class="btn-group">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜單
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">菜單項1</a></li>
            <li><a href="#">菜單項2</a></li>
        </ul>
    </div>
</div>

4.2 示例效果

5. 垂直排列

　　.btn-group-vertical設計垂直排列的按鈕組

5.1 示例代碼

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">Top</button>
    <button type="button" class="btn btn-default">Center</button>
    <button type="button" class="btn btn-default">Bottom</button>
</div>

5.2 示例效果

6. 兩端對齊排列的按鈕組

　　.btn-group.btn-group-justified 中包裹一系列.btn元素

6.1 示例代碼

<ul class="btn-group btn-group-justified">
    <li class="btn btn-default">Left</li>
    <li class="btn btn-default">Middle</li>
    <li class="btn btn-default">Right</li>
</ul>

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>

6.2 示例效果