1024问

Bootstrap4 徽章（Badges）

Lida ·
更新时间:2024-09-20
· 604 次阅读

Bootstrap4 徽章（Badges）

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

实例

测试标题 New

测试标题 New

测试标题 New

测试标题 New

测试标题 New
测试标题 New
各种颜色类型的徽章

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

实例 主要 次要 成功 危险 警告 信息 浅色 深色
药丸形状徽章

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

实例 默认 主要 成功 信息 警告 危险
徽章插入到元素内

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

实例



bootstrap 徽章 Bootstrap4

1024 个赞
编辑 举报
需要 登录 后方可回复, 如果你还没有账号请 注册新账号
相关文章
HTML 基础- 4个实例
Ivie 2021-01-23
701
Go语言实现自动填写古诗词实例代码
Thea 2021-04-15
859
Linux下netstat命令的一些常见用法
Fidelia 2021-03-30
826
Bootstrap4 加载效果
Tia 2022-05-04
579
Bootstrap4 滚动监听(Scrollspy)
Petunia 2022-09-29
367
Bootstrap4 Flex（弹性）布局
Hellens 2022-09-29
239
Bootstrap4 多媒体对象
Belle 2022-09-29
1008
在ASP.Net Core应用程序中使用Bootstrap4
Tina 2022-10-03
839
Jquery+bootstrap实现表格行置顶置底上移下移操作详解
Xanthe 2022-10-23
759
Bootstrap table列上下移动效果
Eleanor 2022-10-23
1763
Vue项目中使用Bootstrap
Meta 2022-10-25
1576
Django中引入bootstrap的详细图文详解
Tanisha 2022-11-10
1481
Nacos-SpringBoot框架启动不加载bootstrap.yml的解决
Antonia 2022-11-23
1421
爬虫训练前端基础Bootstrap5排版表格图像
Rhea 2023-02-26
6
SpringBoot项目集成Swagger和swagger-bootstrap-ui及常用注解解读
Agnes 2023-04-02
285
NCCL深度学习Bootstrap网络连接建立源码解析
Fawn 2023-04-20
501
express框架+bootstrap美化ejs模板实例分析
Oria 2023-05-18
1397
Angular应用Bootstrap过程步骤逻辑详解
Tricia 2023-07-20
1622