Bootstrap中如何使用徽章图标组件
本篇内容主要讲解“Bootstrap中如何使用徽章图标组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Bootstrap中如何使用徽章图标组件”吧!
站在用户的角度思考问题,与客户深入沟通,找到漳平网站设计与漳平网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站制作、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名注册、网络空间、企业邮箱。业务覆盖漳平地区。
1 徽章(Badge)的结构
徽章通常用于导航栏、标题、按钮、头像右侧的一个小区域,用于计数(如n条未读消息)或标识新发布new、热门hot等。通过使用相对字体大小和em单位,徽章可以缩放以匹配直接父元素的大小。从Bootstrap5开始,徽章不再具有链接的焦点或悬停样式。
徽章的结构非常简单,就是一个span标签,里面包含两个类,badge表明是徽章,bg-*
是背景颜色。还可以用text-*
设置字体颜色。
文字内容
2 徽章用于文字
徽章用于文字时,自动调整大小与文字匹配。
徽章
Example heading New
Example heading Hot
Example heading New
Example heading New
Example heading New
Example heading New
3 用于按钮
徽章可以作为链接或按钮的一部分来提供计数器。
请注意,根据它们的使用方式,徽章可能会让屏幕阅读器和类似辅助技术的用户感到困惑。虽然徽章的样式提供了一个关于其用途的视觉提示,但这些用户只需看到徽章的内容。根据具体情况,这些徽章可能看起来像是句子、链接或按钮末尾的随机附加单词或数字。
除非上下文是清楚的(如“未读消息”示例,其中理解为“4”是通知的数量),否则请考虑将附加上下文包括在视觉上隐藏的附加文本片段中。
注意,这个隐藏标签不会显示在用户面前,鼠标悬停也没有提示,如果你想鼠标悬停有提示,可以给按钮或者徽章添加title,不同的是,加在按钮上,鼠标在整个按钮悬停都有提示,加在span标签上,只有鼠标指到数字9的时候才有提示,悬停有延时,要放在上面几秒钟。
4 背景颜色
使用提供的实用程序类快速更改徽章的外观。请注意,使用Bootstrap的默认.bg-light时,您可能需要一个文本颜色实用程序,如.text-dark,以获得正确的样式。这是因为背景实用程序只设置背景颜色。
Primary Secondary Success Danger Warning Info Light Dark
5 胶囊徽章
使用.rounded-pill实用程序类使徽章更圆,边界半径更大。
Primary Secondary Success Danger Warning Info Light Dark
到此,相信大家对“Bootstrap中如何使用徽章图标组件”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
名称栏目:Bootstrap中如何使用徽章图标组件
文章起源:http://myzitong.com/article/jepchh.html