4 Bootstrap4组件——徽章（Badges）

4.1 各种颜色类型的徽章
4.2 胶囊徽章

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

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

效果：

徽章通过使用相对字体大小和 em 单位来缩放以匹配直接父元素的大小，也可以作为链接或按钮的计数器。代码如下：

<button type="button" class="btn btn-primary">Profile <span class="badge badge-light">9</span><span class="sr-only">unread messages</span>
</button>

4.1 各种颜色类型的徽章

代码：

<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>

效果：

4.2 胶囊徽章

使用 .badge-pill 可以使徽章更圆润(具有较大的 border-radius 和附加的水平 padding)。
示例：

<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>

效果：

4 Bootstrap4组件——徽章（Badges）相关推荐

三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）
1.1 警告提示框 1.2 徽章和面包屑 1.3 按钮和按钮组 1.4 卡片 1.5 列表组 1.6 导航和选项卡 1.7 分页和进度条 1.8 巨幕和旋转图标 1.9 轮播图 1.10 折叠菜单 1 ...
Bootstrap4官方文档 | v4核心 -- 组件(一)
本文翻译于bootstrap官网,主要用于查看文档,方便学习,文章比较长! 阅读目录入门Bootstrap4 组件警报链接颜色附加内容解除 JavaScript行为事件徽章药丸徽章链 ...
Bootstrap4 入门
http://www.runoob.com/bootstrap4/bootstrap4-navs.html 共五个部分 1 <!DOCTYPE html> <html lang=&q ...
BootStrap框架模块：BootStrap4基础
BootStrap简介 Bootstrap 是全球最受欢迎的前端开源工具库,它支持Sass混合.响应式矩阵系统和它自带的库分量和分量的JavaScript.基于Bootstrap提供强大的功能,能够让 ...
如何将 Credly 中的数字徽章转成二维码
如何将 Credly 中的数字徽章转成二维码在 Credly 数字证书这一篇文章中要说过当完成 AWS Academy Cloud Foundations 课程后,可以申请一个结业证书徽章,已下逐 ...
【转】前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...
Bootstrap4速成笔记二 Alert,Badge,Breadcrumb,Button
目录组件准备工作 Alert提示组件 Badge标签组件 Breadcrumb导航路径组件 Button按钮组件组件准备工作在编辑器中下载bootstrap4组件,我是用的是sublime ...
巧用PBL游戏化模型，让用户为你的产品疯狂打call
前人的思考,我们的阶梯,欢迎关注杉哥的产品学习笔记. 游戏人类的天性,我们从孩提时代开始,游戏就一直伴随着我们的成长.当我们是小孩子的时候,就习惯从游戏中理解世界.探索知识和乐趣. 无论是游戏的内容, ...
了解Stack Overflow，这是您获得编程和调试知识的途径
无休止的知识? (Endless knowledge?) Can you imagine a platform where you could access the advice and wisdom ...

4 Bootstrap4组件——徽章（Badges）

4 Bootstrap4组件——徽章（Badges）

4.1 各种颜色类型的徽章

4.2 胶囊徽章

4 Bootstrap4组件——徽章（Badges）相关推荐

最新文章

热门文章