AdminLTE Button小结

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

普通的按钮

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

由图标填充的按钮

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

元素为图标，图标样式可参考：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>

位于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>