AdminLTE Button小结

来源：互联网发布：使用贝叶斯分类算法编辑：程序博客网时间：2024/05/14 05:17

一个普通的按钮

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

.btn: 显示为按钮，必选。
.btn-lg: 设置按钮的大小，还有.btn-sm,.btn-xs，不设置的放在，按钮大小在lg和sm之间。
.btn-default: 按钮颜色（灰），还有.btn-primary,.btn-success,.btn-info,.btn-danger,btn-warning等。
.btn-block:设置后，按钮在显示时，占据全部空间；不设置时，按钮的大小由其内容决定，可与其他类叠加使用。
.btn-flat:显示按钮边角为直角，可与其他类叠加使用。

设置按钮的内容为图标

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

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

设置按钮组

水平显示，圆角，不同颜色，内容为文字。

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

单独的按钮

带下拉选项，无对应的input。

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

设置按钮组

垂直显示，直角，内容为图标。

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

设置位于input之后的按钮

注意：span.input-group-btn。

<div class="input-group margin">    <input type="text" class="form-control">    <span class="input-group-btn">        <button type="button" class="btn btn-info btn-flat">Go!</button>    </span></div>

设置input之前的按钮，并有点击下拉效果。

注意：div.input-group-btn。

<div class="input-group">    <div class="input-group-btn">        <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

<a class="btn btn-app">    <i class="fa fa-edit"></i> Edit</a><a class="btn btn-app"><span class="badge bg-yellow">3</span><i class="fa fa-bullhorn"></i> Notifications</a>

按钮加提示

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

0 0