Bootstrap框架学习(四）——Bootstrap组件设计之按钮组

四、Bootstrap组件设计

2、Bootstrap按钮组

    Bootstrap按钮组，主要包括基本按钮组、工具栏按钮组和垂直按钮组等方面内容。

    基本按钮组

        基本按钮组就是将一组按钮放在同一个.btn-group类按钮组容器中。

    

<div class="container">
<section id="global">
    <div class="page-header">
        <h3>Bootstrap组件 - 基本按钮组</h3>
    </div>
</section>
<div class="bs-docs-example">
    <div class="btn-group" style="margin: 9px 0 5px;">
        <button class="btn">Left</button>
        <button class="btn">Middle</button>
        <button class="btn">Right</button>
    </div>
</div>
</div>

    工具栏按钮组

    工具栏按钮组通过.btn-toolbar类来实现多个基本按钮组组成类似工具栏样式设计。

 

<div class="bs-docs-example">
    <div class="btn-toolbar" role="toolbar" style="margin: 0;">
        <div class="btn-group">
            <button type="button" class="btn btn-default">TB1-1</button>
            <button type="button" class="btn btn-default">TB1-2</button>
            <button type="button" class="btn btn-default">TB1-3</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">TB2-1</button>
            <button type="button" class="btn btn-default">TB2-2</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">TB3-1</button>
        </div>
    </div>
</div>

垂直按钮组

垂直按钮组是通过.btn-group-vertical类来实现按钮垂直排列成组。

<div class="bs-docs-example">
    <div class="btn-group btn-group-vertical" style="margin: 4px;">
        <button type="button" class="btn btn-default">button top</button>
        <button type="button" class="btn btn-default">button middle</button>
        <button type="button" class="btn btn-default">button bottom</button>
    </div>
</div>

Bootstrap按钮式下拉菜单

<div class="bs-docs-example">
    <div class="btn-toolbar" style="margin: 0;">
        <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">按钮式下拉菜单 <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Button Menu A</a></li>
                <li><a href="#">Button Menu B</a></li>
                <li class="divider"></li>
                <li><a href="#">Button Menu C</a></li>
            </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Button Menu A</a></li>
                <li><a href="#">Button Menu B</a></li>
                <li class="divider"></li>
                <li><a href="#">Button Menu C</a></li>
            </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
            <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Button Menu A</a></li>
                <li><a href="#">Button Menu B</a></li>
                <li class="divider"></li>
                <li><a href="#">Button Menu C</a></li>
            </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
            <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Button Menu A</a></li>
                <li><a href="#">Button Menu B</a></li>
                <li class="divider"></li>
                <li><a href="#">Button Menu C</a></li>
            </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Button Menu A</a></li>
                <li><a href="#">Button Menu B</a></li>
                <li class="divider"></li>
                <li><a href="#">Button Menu C</a></li>
            </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
            <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Button Menu A</a></li>
                <li><a href="#">Button Menu B</a></li>
                <li class="divider"></li>
                <li><a href="#">Button Menu C</a></li>
            </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
            <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Button Menu A</a></li>
                <li><a href="#">Button Menu B</a></li>
                <li class="divider"></li>
                <li><a href="#">Button Menu C</a></li>
            </ul>
        </div><!-- /btn-group -->
    </div><!-- /btn-toolbar -->
</div>