按钮
+ 可以作为按钮使用的标签
+ 按钮样式
+ 尺寸
+ 禁用状态
可以作为按钮使用的标签
<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
类来实现禁用状态。