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

请注意，根据它们的使用方式，徽章可能会让屏幕阅读器和类似辅助技术的用户感到困惑。虽然徽章的样式提供了一个关于其用途的视觉提示，但这些用户只需看到徽章的内容。根据具体情况，这些徽章可能看起来像是句子、链接或按钮末尾的随机附加单词或数字。

除非上下文是清楚的（如“未读消息”示例，其中理解为“4”是通知的数量），否则请考虑将附加上下文包括在视觉上隐藏的附加文本片段中。

    个人中心 9
    未读消息
 

注意，这个隐藏标签不会显示在用户面前，鼠标悬停也没有提示，如果你想鼠标悬停有提示，可以给按钮或者徽章添加title，不同的是，加在按钮上，鼠标在整个按钮悬停都有提示，加在span标签上，只有鼠标指到数字9的时候才有提示，悬停有延时，要放在上面几秒钟。

        
            个人中心 9
        

        
            个人中心 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中如何使用徽章图标组件”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！