开心档 - 软件开发入门之 Bootstrap4 徽章(Badges)

简介: 徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化:

Bootstrap4 徽章(Badges)

http://www.kxdang.com/topic/bootstrap4/bootstrap4-

徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化:

实例

http://www.kxdang.com/topic/bootstrap4/bootstrap4-

<h1>测试标题 <span class="badge badge-secondary">New</span></h1>
<h2>测试标题 <span class="badge badge-secondary">New</span></h2>
<h3>测试标题 <span class="badge badge-secondary">New</span></h3>
<h4>测试标题 <span class="badge badge-secondary">New</span></h4>
<h5>测试标题 <span class="badge badge-secondary">New</span></h5>
<h6>测试标题 <span class="badge badge-secondary">New</span></h6>

各种颜色类型的徽章

http://www.kxdang.com/topic/bootstrap4/bootstrap4-

以下列出了所有颜色类型的徽章:

实例

http://www.kxdang.com/topic/bootstrap4/bootstrap4-

<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">浅色</span>
<span class="badge badge-dark">深色</span>

药丸形状徽章

http://www.kxdang.com/topic/bootstrap4/bootstrap4-

使用 .badge-pill 类来设置药丸形状徽章:

实例

http://www.kxdang.com/topic/bootstrap4/bootstrap4-

<span class="badge badge-pill badge-default">默认</span>
<span class="badge badge-pill badge-primary">主要</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-pill badge-info">信息</span>
<span class="badge badge-pill badge-warning">警告</span>
<span class="badge badge-pill badge-danger">危险</span>

徽章插入到元素内

http://www.kxdang.com/topic/bootstrap4/bootstrap4-

以下实例将徽章嵌入到按钮内:

实例

http://www.kxdang.com/topic/bootstrap4/bootstrap4-

<button type="button" class="btn btn-primary">
  Messages <span class="badge badge-light">4</span>
</button>

相关文章
Bootstrap5 徽章(Badges)1
Bootstrap5 徽章(Badges)用于突出显示新的或未读的项。通过在 `&lt;span&gt;` 元素上添加 `.badge` 类和颜色类(如 `.bg-secondary`),可以轻松创建徽章。
Bootstrap5 徽章(Badges)4
徽章可以嵌入到其他元素中,如按钮。
Bootstrap5 徽章(Badges)3
药丸形状徽章通过添加 `.rounded-pill` 类实现圆角效果。结合不同的背景色类(如 `bg-default`、`bg-primary` 等),可以创建多种样式。
Bootstrap5 徽章(Badges)2
以下是各种颜色类型的徽章示例,包括主要、次要、成功、危险、警告、信息、浅色和深色等不同风格的徽章。
|
7月前
|
前端开发
Bootstrap 5 保姆级教程(五):按钮组 & 徽章
Bootstrap 5 保姆级教程(五):按钮组 & 徽章
|
前端开发
开心档 - 软件开发入门之 Bootstrap4 面包屑导航(Breadcrumb)
面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置,是在用户界面中的一种导航辅助。
开心档 - 软件开发入门之 Bootstrap4 下拉菜单
Bootstrap4 下拉菜单依赖于 popper.min.js。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。
开心档 - 软件开发入门之 Bootstrap4 自定义表单
Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
开心档 - 软件开发入门之 Bootstrap4 输入框组
我们可以使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮。