E047 - alex1221/bootlint-customization GitHub Wiki
.btn 用于将元素设置为交互式可点击按钮
如果不用 <a>, <button>, <input>, 活 <label> 元素来创建按钮组件可能会导致一些辅助技术(如屏幕阅读器)的用户出现问题,因为默认情况下,这样组件不会被该技术识别交互。除非你做一些额外ARIA属性的工作,tabindex属性,和自定义一些JavaScript脚本。
这样的组合在语义上也是有问题的。一个 <button> 元素表示一个按钮,具有固有的关联语义(例如,可以通过点击来交互)。相比之下,<div> or <span> 元素没有这样的内在含义(尽管利用 ARIA 可以在某种程度上弥补这一点)。
错误的:
<span class="btn btn-primary">Button</span>
<div class="btn btn-primary">Button</div>正确的:
<a class="btn btn-primary">Button</a>
<button type="button" class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Button">
<label class="btn btn-primary">Button</label>