AdminLTE Button小结

普通的按钮

<button class="btn btn-lg btn-default btn-block">
Default
</button>

css类	说明
.btn	按钮标志类，显示为按钮，按钮边角为“border-radius：3px”的圆角
.btn-lg	按钮的大小，可选值有.btn-lg(large),.btn-sm(small), .btn-xs(x-small), 若不设置，按钮大小在lg和sm之间。
.btn-default	按钮颜色（灰） 其它可选颜色有：.btn-primary,.btn-success,.btn-info, .btn-danger,.btn-warning等。
.btn-block	块状显示 设置后，显示按钮时，占据全部空间；不设置时，按钮的大小由其内容决定，可与其他类叠加使用。
.btn-flat	显示按钮边角为直角，可与其他类叠加使用。
.disabled	显示按钮为不可用，颜色更浅一些。

由图标填充的按钮

<button type="button" class="btn btn-default">
    <i class="fa fa-align-left"></i>
</button>

<i>元素为图标，图标样式可参考：https://adminlte.io/themes/AdminLTE/pages/UI/icons.html

按钮组.btn-group

水平按钮组

按钮组中各个按钮默认水平一行显示，圆角，不同颜色，内容为文字。

<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-danger">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

垂直按钮组

按钮组中各个按钮垂直显示，直角，内容为图标。

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-left"></i></button>
    <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-center"></i></button>
    <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-right"></i></button>
</div>

按钮带下拉选项的按钮组

<!--定义一个按钮组-->
<div class="btn-group">
    <!--提示用按钮，无点击效果-->
    <button type="button" class="btn btn-info">Action</button>
    <!--点击出下拉菜单的按钮，位于提示按钮之后-->
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <!--span显示为“向下的三角图标-->
        <span class="caret"></span>
        <!--.sr-only是 除了屏幕阅读器外，其他设备上隐藏该元素，这个是用于屏幕阅读器的，帮助残障人士更好的访问网站。-->
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <!--定义下拉菜单-->
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

元素	说明
.dropdown-toggle	用于下拉按钮，添加后，下拉按钮显示为圆角，与“提示用按钮”配合，样式更加协调
data-toggle="dropdown"	必须设置，点击后，出下拉菜单的效果
class="caret"	使下拉按钮中的span显示为“向下的三角图标”
class="dropdown-menu"	下拉菜单，必须将ul设置为此样式

位于input输入框之后的按钮

<!--必须是按钮组-->
<div class="input-group margin">
    <!--input框必须添加.form-control样式，否则与其后的按钮之间会有空隙-->
    <input type="text" class="form-control">
    <!--由span.input-group-btn包裹按钮，也可使用div,但是必须有.input-group-btn-->
    <span class="input-group-btn">
        <button type="button" class="btn btn-info btn-flat">Go!</button>
    </span>
</div>

调整div.input-group中input元素和span元素的前后排序，可更改input输入框与按钮的排序。

位于input输入框之前的按钮，并有点击下拉效果。

<div class="input-group">
    <!--input输入框按钮-->
    <div class="input-group-btn">
        <!--注意与上例中“下拉按钮组”的区别，这里用一个button显示了文字及下拉图标，而“下拉按钮组”中使用了两个button-->
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action 
            <!--下拉图标-->
            <span class="fa fa-caret-down"></span>
        </button>
        <!--下拉菜单项的定义与“下拉按钮组”相同-->
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <!--分隔线-->
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
    <input type="text" class="form-control">
</div>

APP图标效果的按钮，并带有角标span.badge

<!--App样式按钮.btn-app-->
<a class="btn btn-app">
    <!--按钮中显示的图标-->
    <i class="fa fa-edit"></i>
    <!--图标下显示的文字-->
    Edit
</a>
<a class="btn btn-app">
    <!--角标，黄色，内容：3-->
    <span class="badge bg-yellow">3</span>
    <i class="fa fa-bullhorn"></i> Notifications
</a>

图标样式可参考：https://adminlte.io/themes/AdminLTE/pages/UI/icons.html

按钮带提示信息

<button type="button" data-toggle="tooltip" data-original-title="点击修改" class="btn btn-info btn-xs" onclick="">修改</button>