bootstrap - icon + label + badge ,对span的扩展

本文讲解的是三个行内组件，它们能够嵌入到不少其余组件内来达成设计者的交互意图。它们分别是 icon、label、badge。

行内通用标签span，能够应用glyphicon从而变成一个icon：

<span class="glyphicon glyphicon-home"></span>

或者应用.badge，变成一个徽章：

<span class="badge">4</span>

或者应用label，变成一个标签：

<span class="label label-default">text</span>

当咱们看到-default字样的类时，必定会去想试试-primary、-warning等类。幸运的是，对label来讲，这些类也是可行的。

这些小小的界面元素能够应用在不少组件上。好比应用于button：

<button>
  <span class="glyphicon glyphicon-home"></span>
  <span class="badge">4</span>
</button>

应用于list-group：

<ul class="list-group">
  <li class="list-group-item"> <span class="glyphicon glyphicon-home"></span></li>
  <li class="list-group-item"> <span class="glyphicon glyphicon-home"></span></li>
  <li class="list-group-item"> <span class="glyphicon glyphicon-home"></span></li>
</ul>

这样组合起来后，界面看起来仍是很漂亮的。