5.3 按钮组（btn-group）

按钮组（btn-group）：

常规按钮组：

<div class="btn-group" role="group" aria-label="Basic example" style="margin-left: 100px; margin-top: 100px;">
        <button type="button" class="btn btn-secondary">Left</button>
        <button type="button" class="btn btn-secondary">Middle</button>
        <button type="button" class="btn btn-secondary">Right</button>
    </div>

常规按钮组样式：

工具栏：

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"
        style="margin-left: 100px; margin-top: 20px;">
        <div class="btn-group mr-2" role="group" aria-label="First group">
            <button type="button" class="btn btn-secondary">1</button>
            <button type="button" class="btn btn-secondary">2</button>
            <button type="button" class="btn btn-secondary">3</button>
            <button type="button" class="btn btn-secondary">4</button>
        </div>
        <div class="btn-group mr-2" role="group" aria-label="Second group">
            <button type="button" class="btn btn-secondary">5</button>
            <button type="button" class="btn btn-secondary">6</button>
            <button type="button" class="btn btn-secondary">7</button>
        </div>
        <div class="btn-group" role="group" aria-label="Third group">
            <button type="button" class="btn btn-secondary">8</button>
        </div>
    </div>

工具栏样式：

嵌套：

注意：bootstrap嵌套功能需要引用popper.js，而且必须是v1版本的，v2版本不好用。

<!-- 需要引用在js前面 -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>


<div class="btn-group" role="group" aria-label="Button group with nested dropdown" style="margin-top: 20px; margin-left: 100px;">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>

        <div class="btn-group" role="group">
            <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                Dropdown
            </button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <a class="dropdown-item" href="#">3</a>
                <a class="dropdown-item" href="#">4</a>
            </div>
        </div>
    </div>

嵌套样式：

垂直排列:

<div class="btn-group-vertical" style="margin-top: 100px; margin-left: 100px;">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>
    </div>

垂直排列效果：