可作为按钮使用的标签或元素
为
<a>
、
<button>
或
<input>
元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。
Link
复制
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
链接被作为按钮使用时的注意事项
如果
<a>
元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置
role="button"
属性。
跨浏览器展现
我们总结的最佳实践是:强烈建议尽可能使用
<button>
元素来获得在各个浏览器上获得相匹配的绘制效果。
另外,我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug,其表现是:阻止我们为基于
<input>
元素所创建的按钮设置
line-height
属性,这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
复制
<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>
Conveying meaning to assistive technologies
为按钮添加不同的颜色只是一种视觉上的信息表达方式,但是,对于使用辅助技术 -- 例如屏幕阅读器 -- 的用户来说,颜色是不可见的。建议,确保通过颜色表达的信息或者通过内容自身表达出来(按钮上的文字),或者通过其他方式 -- 例如通过
.sr-only
类隐藏的额外文本 -- 表达出来。