bootstrap-按鈕組、字體圖標

字體圖標：

<div class="container">
    <div class="row">
        <span class="glyphicon glyphicon-star" style="font-size:40px;color:red"></span>
        <button class="btn btn-warning">
            <span class="glyphicon glyphicon-play-circle"></span>播放
        </button>
    </div>
</div>

效果：

按鈕組：

<!--
    btn-group                按鈕組
    btn-group-vertical        豎着排的按鈕組
    btn-group-justified        讓按鈕兩端對齊,鋪滿父級尺寸

 -->
<div class="container">
    <div class="row">
        <div class="btn-group btn-group-sm">
            <button class="btn btn-success">ok</button>
            <button class="btn btn-info">ok</button>
            <button class="btn btn-danger">ok</button>
        </div>
    </div>

    <!-- 豎着的按鈕組 -->
    <div class="row" style="margin-top:20px">
        <div class="btn-group-vertical">
            <button class="btn btn-success">ok</button>
            <button class="btn btn-info">cancel</button>
        </div>
    </div>

    <!-- btn兩端對齊 
        若是說是button，那須要給他們添加一個class爲btn-group的父級
        input type="button" 也須要....
        a標籤，不須要
    -->
    <div class="row" style="margin-top:20px">
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button class="btn btn-success">ok</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-info">cancel</button>
            </div>
        </div>
    </div>

    <div class="row" style="margin-top:20px">
        <div class="btn-group btn-group-justified">
            <a href="#" class="btn btn-success">ok</a>
            <a href="#" class="btn btn-info">canel</a>
        </div>
    </div>

    <!-- 給按鈕添加三角形 -->
    <div class="row" style="margin-top:20px">
        <div class="btn-group">
            <button class="btn btn-success">ok <span class="caret"></span></button>
            <button class="btn btn-info">canle</button>
        </div>
    </div>

    <!-- 按鈕組形式的三角形 -->
    <div class="row" style="margin-top:20px">
        <div class="btn-group">
            <button class="btn btn-success">click it</button>
            <button class="btn btn-success"><span class="caret"></span></button>
        </div>
    </div>

    <!-- 向上三角形 -->
    <div class="row" style="margin-top:20px">
        <div class="btn-group dropup">
            <button class="btn btn-success">click it</button>
            <button class="btn btn-success"><span class="caret"></span></button>
        </div>
    </div>
</div>

效果：