普通的按钮
<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>
