button-group2,html

Toolbar

    <div class="container">
        <div class="page-header">
            <h2>bs3-button-toolbar</h2> <!-- toolbar=button group의 group-->
        </div>
 
        <div class="btn-toolbar">
            <div class="btn-group">
                <button type="button" class="btn btn-default"><span class='glyphicon glyphicon-save'></span></button>
                <button type="button" class="btn btn-default"><span class='glyphicon glyphicon-edit'></span></button>
                <button type="button" class="btn btn-default"><span class='glyphicon glyphicon-remove'></span></button>
            </div>
 
            <div class="btn-group">
                <button type="button" class="btn btn-download"><span class='glyphicon glyphicon-save'></span></button>
                <button type="button" class="btn btn-default"><span class='glyphicon glyphicon-upload'></span></button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default"><span class='glyphicon glyphicon-chevron-down'></span></button>
                <button type="button" class="btn btn-default"><span class='glyphicon glyphicon-chevron-up'></span></button>
 
            </div>
        </div>
    </div>

<결과물>

---

bs3-button-group > 버튼을 드롭다운으로 변경

    <div class="container">
        <div class="page-header">
            <h2>bs3-button-group &gt; 버튼을 드롭다운으로 변경</h2>
        </div>
        
        <div class="btn-group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
 
            <!-- .btn group안에 또다른 .btn-group-->
            <div class= "btn-group">
                <!-- .btn group안에 dropdown 구성하기-->
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Dropdown link</a></li>
                    <li><a href="#">Dropdown link</a></li>
                </ul>
            </div>
        </div>
    </div>

<결과물>

---

가로 가득 채우기

    <div class="container">
        <div class="page-header">
            <h1>가로 가득 채우기<br><small>bs3-link-group에 .btn-group-justified 추가 </small></h1>
        </div>
        <div class="btn-group btn-group-justified">
            <a href="#" class="btn btn-primary btn-lg " role="button">Primary link</a>
            <a href="#" class="btn btn-default btn-lg" role="button">Link</a>
            <a href="#" class="btn btn-danger btn-lg disabled" role="button">Danger Link</a>
            <a href="#" class="btn btn-info btn-lg" role="button">Info Link</a>
            <a href="#" class="btn btn-success btn-lg" role="button">Success Link</a>
            <a href="#" class="btn btn-warning btn-lg" role="button">Warning Link</a>
        </div>
    
    </div>

<결과물>

---