kero/snippets/examples/dt/datatable/button/widget.html

<div class="u-container-fluid u-widget-bg">
    <div class="u-row">
        
        <div class="u-col-md-12">
            <div class="u-widget  u-widget-right">
                <div class="u-widget-heading">
                    <h3 class="u-widget-title">基础按钮</h3>
                </div>
                <div class="u-widget-body">
                    <button class="u-button raised">BUTTON</button>
                    <button class="u-button raised accent">BUTTON</button>
                    <button class="u-button raised primary">BUTTON</button>
                </div>
            </div>
        </div>
        <div class="u-col-md-12">
            <div class="u-widget  u-widget-right">
                <div class="u-widget-heading">
                    <h3 class="u-widget-title">圆形按钮</h3>
                </div>
                <div class="u-widget-body">
                    <button class="u-button floating">
                        <i class="fa fa-plus"></i>
                    </button>
                    <button class="u-button floating accent">
                        <i class="fa fa-plus"></i>
                    </button>
                    <button class="u-button floating primary">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="u-col-md-12">
            <div class="u-widget  u-widget-right">
                <div class="u-widget-heading">
                    <h3 class="u-widget-title">文字按钮</h3>
                </div>
                <div class="u-widget-body">
                    <button class="u-button">BUTTON</button>
                    <button class="u-button accent">BUTTON</button>
                    <button class="u-button primary">BUTTON</button>
                </div>
            </div>
        </div>
        <div class="u-col-md-12">
            <div class="u-widget  u-widget-right">
                <div class="u-widget-heading">
                    <h3 class="u-widget-title">菜单按钮</h3>
                </div>
                <div class="u-widget-body">
                    <div class="u-menu-wrap">
                        <button class="u-button  raised u-menu-button" id="demo-menu-lower-right1">
                            联查
                            <span class="u-right-icon uf uf-anglearrowdown"></span>
                        </button>
                        <ul class="u-menu u-menu-bottom-right" for="demo-menu-lower-right1">
                            <li class="u-menu-item "><a>报价单</a></li>
                            <li class="u-menu-item"><a>到货单</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="u-col-md-12">
            <div class="u-widget  u-widget-right">
                <div class="u-widget-heading">
                    <h3 class="u-widget-title">分割按钮</h3>
                </div>
                <div class="u-widget-body">
                    <div class="u-button-group u-split">
                        <button class="u-button u-split-pre">
                            打印
                        </button>
                        <div class="u-button-group u-split-sub">
                            <button class="u-button u-dropdown-toggle" id="split">
                                <span class=" uf uf-anglearrowdown "></span>
                            </button>
                            <ul class="u-menu u-menu-bottom-right" for="split">
                                <li class="u-menu-item"><a>报价单</a></li>
                                <li class="u-menu-item"><a>到货单</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>