Bootstrap 徽章(Badges)
Bootstrap 徽章(Badges)
Bootstrap 徽章是一种用于展示文本信息或状态的小组件,常用于显示计数器、标签或提醒等。在 Bootstrap 中,使用徽章很简单,只需要添加一个带有“badge”类的容器元素即可。
基本用法
<span class="badge">New</span>
上面的代码展示了一个基本的徽章,只需在span
元素中添加一个badge
类名即可实现。默认情况下,徽章是灰色并且字体颜色为白色。可以使用以下类名来修改徽章的颜色:
badge-primary
:primary 颜色badge-secondary
:secondary 颜色badge-success
:success 颜色badge-danger
:danger 颜色badge-warning
:warning 颜色badge-info
:info 颜色badge-light
:light 颜色badge-dark
:dark 颜色
<span class="badge badge-primary">New</span>
带有链接的徽章
<a href="#" class="badge badge-primary">Link</a>
可以将徽章包装在一个链接元素中,当用户单击徽章时,将导航到链接的地址。
徽章中的计数器
徽章通常用于显示计数器,可以将数字嵌入徽章中。只需在 span
元素中添加一个数字即可。
<span class="badge">4</span>
徽章可以在大多数父元素中使用,但是当在 nav
、list-group-item
或 badge-pill
中使用时可能会看起来更合适。
圆角徽章
如果需要使用圆角徽章,则在 badge
类名后添加 badge-pill
类名即可。
<span class="badge badge-pill badge-danger">Alert</span>
可以分别使用文本和计数器
徽章可以分别显示文本或计数器,例如 10
和 New
。
<span class="badge badge-primary">10</span>
<span class="badge badge-secondary">New</span>
徽章在任何 HTML 元素中都可以使用。因此,您可以将它们用作进程状态指示器,表单标签和其他元素中的标识符。
可以通过 js 使用
您也可以使用 JavaScript 动态地更新和操纵徽章。例如,您可以通过下面的代码更改徽章的文本。
var badge = document.querySelector('.badge');
badge.textContent = 'Updated';
结论
Bootstrap 徽章是一种显示简洁信息或状态的小组件,可以轻松地通过添加 Bootstrap 样式类进行样式修改。徽章可以在任何 HTML 元素中使用,并且可以使用 JS 动态更改。