按钮

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

可以作为按钮使用的标签

<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 类来实现禁用状态。