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>

這樣組合起來後，界面看起來仍是很漂亮的。