Bootstrap 学习之按钮

按钮

+ 可以作为按钮使用的标签
+ 按钮样式
+ 尺寸
+ 禁用状态

可以作为按钮使用的标签

<div class="bg-info">
  <a class="btn btn-default" href="#" role="button">Link</a>
  <button class="btn btn-default">Button</button>
  <input class="btn btn-default" type="submit" value="Submit">
  <input class="btn btn-default" type="button" value="Button">
</div>

如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。

html 里面的 role 本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。

按钮样式

<div class="bg-info">
  <button class="btn btn-default">Default</button>
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-info">Info</button>
  <button class="btn btn-warning">Warning</button>
  <button class="btn btn-danger">Danger</button>
  <button class="btn btn-link">Link</button>
</div>

尺寸

<div class="bg-info">
  <button class="btn btn-success btn-lg">Large</button>
  <button class="btn btn-success">Default</button>
  <button class="btn btn-success btn-sm">Small</button>
  <button class="btn btn-success btn-xs">Extra small</button>
</div>

<div class="bg-info">
  <button class="btn btn-success btn-block">Default(块级元素)</button>
</div>

通过给按钮添加 .btn-block 类将拉伸至父级元素100%宽度，而且按钮也变为块级元素。

禁用状态

<button> 元素

<div class="bg-info">
  <button class="btn btn-success" disabled>禁用状态</button>
</div>

通过添加 disabled 属性来实现禁用状态。

<a> 元素

<div class="bg-info">
  <a class="btn btn-success" href="http://www.baidu.com" role="button">百度</a>
  <a class="btn btn-success disabled" href="www.baidu.com" role="button">禁用状态</a>
</div>

通过添加 .disabled 类来实现禁用状态。