关于按钮,BT项目中已经做了大量的研究,也比较完美了,唯一的缺憾是不支持IE6以及在Firefox及IE7中表现的并不一致。
这里专门针对网页中的按钮做了进一步的测试研究与实践,提供了兼容的解决方案能完全满足你的需求,并能与网站的其他组件友好的组合使用。(由于之前已经做过一部分CSS通用按钮测试,此处继续前面的测试进行组件开发,这里主要侧重于应用级。)
<button class="btn btn-mini">迷你按钮</button> <button class="btn btn-small">小按钮</button> <button class="btn">默认按钮</button> <button class="btn btn-big">大按钮</button> <button class="btn btn-large">超大按钮</button> <button class="btn btn-primary">主按钮</button> <button class="btn btn-info">次按钮</button> <button class="btn btn-success">成功</button> <button class="btn btn-warning">警告</button> <button class="btn btn-danger">危险</button> <button class="btn btn-inverse">反色</button> <button class="btn btn-link">链接</button> <button class="btn btn-buff">浅黄</button> <button class="btn btn-orange">橙色</button> <button class="btn btn-pink">玫红</button> <button class="btn btn-large btn-block">块级按钮</button> <button class="btn disabled">禁用按钮</button> <button class="btn"><i class="icon--user"></i> 组合按钮</button> <span class="btn">普通按钮</span>
按钮使用中的注意事项,请参考 按钮兼容最佳方案
<div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Action <span class="caret"></span> </a> <ul class="dropdown-menu"> <!-- dropdown menu links --> </ul> </div>
<div class="btn-group"> <button class="btn">Action</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <!-- dropdown menu links --> <li><a href="#">动作</a></li> <li><a href="#">另一个动作</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">被间隔的链接</a></li> </ul> </div>