返回介绍

span 类

发布于 2025-02-25 22:08:38 字数 944 浏览 0 评论 0 收藏 0

接下来讲解的是三个行内组件,它们可以嵌入到很多其他组件内来达成设计者的交互意图。它们分别是 icon、label、badge。

行内通用标签 span,可以应用 glyphicon 从而变成一个 icon:

或者应用.badge,变成一个徽章:
4

或者应用 label,变成一个标签: text

当我们看到-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>

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文