按钮组 - Button Groups

水平按钮组

将按钮包含在 .btn-group 样式的容器内，即可创建按钮组

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

01.PNG

垂直按钮组

按钮组也可以垂直排列

<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Top</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Bottom</button>
</div>

02.PNG

按钮组工具条

将按钮组包裹在 .btn-toolbar 样式的容器中就形成了按钮组工具条

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
        <button type="button" class="btn btn-primary">3</button>
        <button type="button" class="btn btn-primary">4</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">5</button>
        <button type="button" class="btn btn-primary">6</button>
        <button type="button" class="btn btn-primary">7</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">8</button>
    </div>
</div>

03.PNG

不同尺寸的按钮组

为按钮组设置 .btn-group-sm 之类的样式

<div class="btn-toolbar">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>
</div>
<br>
<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>
</div>
<br>
<div class="btn-toolbar">
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>
</div>
<br>
<div class="btn-toolbar">
    <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>
</div>

04.PNG

两端对齐按钮组

如果用 <a> 元素创建按钮，则可以把所有按钮直接包含在按钮组中；
如果用 <button> 元素创建按钮，则每个按钮都要包含在按钮组中；

<div class="bs-example">
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">Left</a>
        <a href="#" class="btn btn-primary">Middle</a>
        <a href="#" class="btn btn-primary">Right</a>
    </div>
</div>


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

05.PNG