Question

Bootstrap 有些令人不适的地方。比如：

<button class="btn btn-primary">Hello</button>

在 button 标签的情况下，需要在 class 内写一遍 btn，有点重复。此时你需要知道：作为 class 的 btn 说的是外观这件事，前面标签的 button 说的是语义这回事。语义和外观的分离也能带来好处的。框架只是简单的修改 class 来控制外观，而不在乎标签到底是什么。这意味着，你可以把它用到很多标签上，从而控制它的外观。比如

<a class="btn btn-primary">
  button
</a>

<div class="btn btn-primary">
  button
</div>

<label class="btn btn-primary">
  button
</label>
<ul class="btn btn-primary">
  button
</ul>

<ul>
  <li class="btn btn-primary">button</li>
  <li class="btn btn-primary">button</li>
  <li class="btn btn-primary">button</li>
</ul>

只不过，从惯例上来说，我们把 a 标签、li 标签显示成 button 的样子在不同的场景下会引发困惑，因此不会这样做而已。举出此案例的目的，在于加深 class 控制外观，标签设置语义的这样的分工的价值和合理性。

另外一个惯例是使用不同的背景色表达不同类型的信息，比如我们看到 btn-前缀的一组 class，btn-primary、btn-success、btn-info、 btn-warning 、btn-danger 这样的惯例也适用于 label 、progress-bar、table、list-group、alert 等，我们可以看到 label 的可以 class 和 button 的 class 是对应的。

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

分别设置不同的背景色用来标识信息的类型差异，从而仅仅从信息的背景色上即可一目了然的理解到信息的差异性。

看到了这样的细节，其实是存在一点让人不舒适的地方的。比如

 <span class="label label-success">Default</span>

为什么不能写成：

 <span class="label success">Default</span>

这略微的不适需要适应下，毕竟 bootstrap 使用起来不过就是改改 class 就可以得到很棒的效果。

还有更加不爽的地方，比如使用 button，考虑到 Accessibility（无障碍访问）的需求，可能在 bootstrap 内看到这样的代码：

<button class="btn" role="button">
</button>

属性 role 的存在，是为了告诉 Accessibility 类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这是一个按钮。在 html5 元素内，标签本身就是有语义的，因此 role 是不必添加的，至少是不推荐的，但是 bootstrap 的案例内很多都是有类似的属性和声明的，目的是为了兼容老版本的浏览器（用户代理），如果你的代码使用了 html5 标签，并且不准备支持老版本的浏览器，不妨不使用 role 标签。