<div class="bjui-pageContent">
    <div class="pageFormContent">
        <div style="margin:15px auto 0; width:800px;" >
            <fieldset>
                <legend>按钮</legend>
                <table class="table table-condensed table-hover">
                    <thead>
                        <tr>
                            <th>样例</th>
                            <th>Class</th>
                            <th>属性</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><button type="button" class="btn-default">普通按钮</button></td>
                            <td>btn-default</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="btn-green">绿色按钮</button></td>
                            <td>btn-green</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="btn-blue">蓝色按钮</button></td>
                            <td>btn-blue</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="btn-red">红色按钮</button></td>
                            <td>btn-red</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="btn-orange">橙色按钮</button></td>
                            <td>btn-orange</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="btn-default" data-icon="home">图标按钮</button></td>
                            <td>btn-default</td>
                            <td>data-icon="home"</td>
                        </tr>
                        <tr>
                            <td><button type="button" class="btn-default btn-sm">小尺寸按钮</button></td>
                            <td>btn-default btn-sm</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="btn-default btn-nm">较大尺寸按钮</button></td>
                            <td>btn-default btn-nm</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="btn-default btn-lg">超大尺寸按钮</button></td>
                            <td>btn-default btn-lg</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <div class="alert alert-info form-inline"><i class="fa fa-warning"></i> <strong>A链接按钮：</strong>A链接的按钮需要添加<strong>Class[btn]</strong>，方可转换成按钮形态，JS会为Button按钮自动添加Class[btn]。</div>
                                <div class="alert alert-warning form-inline"><i class="fa fa-warning"></i> <strong>图标说明：</strong>所用图标来自<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">Font Awesome</a>，使用时仅需将fa-后面的部分放入data-icon中即可。</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </fieldset>
        </div>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>