普通按钮
代码：
<div style="margin-bottom:15px"> <a href="#" class="">a标签</a> </div> <div style="margin-bottom:15px"> <button class="">button标签</button> </div> <div style="margin-bottom:15px"> <input type="button" class="" value="input标签"/> </div>
此时class属性为空效果:
给每个标签的Class加上“btn”后效果如下:
BootStrap按钮的其他样式：
显示小图标:
<div style="margin-bottom:15px"> <a href="#" class="btn"><i class="icon-align-left"></i> a标签</a> </div> <div style="margin-bottom:15px"> <button class="btn"><i class="icon-arrow-left"></i>button标签</button> </div> <div style="margin-bottom:15px"> <input type="button" class="btn" value="input标签"/> </div>
按钮的群组
代码1:
<div class="btn-group"> <button class="btn">首页</button> <button class="btn">上一页</button> <button class="btn">下一页</button> <button class="btn">尾页</button> </div>
只需在按钮外部添加一个class=“btn-group”的div标签即可
代码2:
<div class="btn-toolbar"> <div class="btn-group"> <button class="btn">首页</button> <button class="btn">上一页</button> <button class="btn">下一页</button> <button class="btn">尾页</button> </div> <div class="btn-group"> <button class="btn">首页</button> <button class="btn">上一页</button> <button class="btn">下一页</button> <button class="btn">尾页</button> </div> </div>
在两组按钮群外部添加一个class=“btn-toolbar”的div标签
带下拉菜单的按钮
代码：
<div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" >字体<span class="caret"></span></a> <ul class="dropdown-menu dropup"> <li><a href="#">黑体</a></li> <li><a href="#">宋体</a></li> <li><a href="#">百度综艺</a></li> </ul> </div>
效果:
BootStrap2学习日记13----关于按钮,布布扣,bubuko.com
原文：http://www.cnblogs.com/keiling/p/3638418.html