本文讲解的是三个行内组件,它们可以嵌入到很多其他组件内来达成设计者的交互意图。它们分别是 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>
这样组合起来后,界面看起来还是很漂亮的。