网页中的按钮

关于按钮,BT项目中已经做了大量的研究,也比较完美了,唯一的缺憾是不支持IE6以及在Firefox及IE7中表现的并不一致。

这里专门针对网页中的按钮做了进一步的测试研究与实践,提供了兼容的解决方案能完全满足你的需求,并能与网站的其他组件友好的组合使用。(由于之前已经做过一部分CSS通用按钮测试,此处继续前面的测试进行组件开发,这里主要侧重于应用级。)

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