Bootstrap <基础二十一>徽章（Badges）

最新推荐文章于 2023-07-18 23:56:23 发布
最新推荐文章于 2023-07-18 23:56:23 发布
阅读量171 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lansy/p/4449345.html
版权

Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。

下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 徽章（Badges）</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<a href="#">Mailbox <span class="badge">50</span></a>

</body>
</html>

结果如下所示：

徽章（Badges）

当没有新的或未读的项时，通过 CSS 的 :empty 选择器，徽章会折叠起来，表示里边没有内容。

激活导航状态

您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <span class="badge"> 来激活链接，如下面的实例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 激活导航状态</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h4>胶囊式导航中的激活状态</h4>
<ul class="nav nav-pills">
   <li class="active"><a href="#">首页 <span class="badge">42</span></a></li>
   <li><a href="#">简介</a></li>
   <li><a href="#">消息 <span class="badge">3</span></a></li>
</ul>
<br>
<h4>列表导航中的激活状态</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
   <li class="active">
      <a href="#">
         <span class="badge pull-right">42</span>
         首页
      </a>
   </li>
   <li><a href="#">简介</a></li>
   <li>
      <a href="#">
         <span class="badge pull-right">3</span>
         消息
      </a>
   </li>
</ul>

</body>
</html>

结果如下所示：

激活导航状态
 
Bootstrap<基础二十> 标签
Bootstrap <基础二十一>徽章（Badges）
Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap <基础二十三>页面标题（Page Header）
Bootstrap<基础二十四> 缩略图
Bootstrap <基础二十五>警告（Alerts）
Bootstrap <基础二十六>进度条
Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap <基础二十八>列表组
Bootstrap <基础二十九>面板（Panels）
Bootstrap <基础三十>Well
Bootstrap <基础三十一>插件概览
Bootstrap <基础三十二>模态框（Modal）插件

转载于:https://www.cnblogs.com/lansy/p/4449345.html

anpochi7793
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap徽章
秋城落叶的博客
03-31 216
给链接、导航等元素嵌套<span class="badge">元素，可以很醒目的展示新的或未读的信息条目。 如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏（通过CSS的:empty选择符实现) 。 跨浏览器兼容性 徽章组件在 Internet Explorer 8 浏览器中不会自动消失，因为 IE8 不支持...
深入理解BootStrap Item12 -- 标签（label）与徽章（badge）
小平果的欢乐谷
11-15 6030
1、标签在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。如下图所示：那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。既然他是一个独立的组件，当然在不同的版本下有不同的文件：☑ LESS版本：对应的源文件label.les
3.11 Bootstrap 徽章(Badges)
梁辰兴的博客
07-18 880
下面将讲解 Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。当没有新的或未读的项时，通过 CSS 的 :empty 选择器，徽章会折叠起来，表示里边没有内容。徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把。您可以在激活状态的胶囊式导航和列表导航中放置徽章。添加到链接、Bootstrap 导航等这些元素上即可。
Bootstrap4 徽章（Badges）
weixin_45116096的博客
07-10 323
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 元素上即可。 徽章可以根据父元素的大小的变化而变化: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewpo
带徽标的Bootstrap 3 Navbar
p15097962069的博客
06-03 606
I want to use the Bootstrap 3 default navbar with an image logo instead of text branding. 我想使用带有图像徽
Bootstrap 徽章（Badges）
12-14
<li class="active"><a href="#">首页 <span class="badge">42</span></a></li> <li><a href="#">简介</a></li> <li><a href="#">消息 <span class="badge">3</span></a></li> </ul> ``` 类似地，在列表导航中，...
Bootstrap每天必学之标签与徽章
09-03
在本篇文章中，我们将深入探讨Bootstrap中的标签（Labels）和徽章（Badges），这两种组件常用于向用户传达额外信息或者作为视觉提示。 标签在Web设计中扮演着重要角色，例如标记新内容或突出显示特殊状态。...
Bootstrap源码解读标签、徽章、缩略图和警示框（8）
08-31
在Bootstrap框架中，标签（Labels）和徽章（Badges）是两种常用的小型文本元素，用于突出显示或提供额外的提示信息。它们通常应用于页面的各个部分，如导航、列表组、按钮等，以增强视觉效果和用户体验。 **标签...
bootstrap响应式美食网站
最新发布
02-09
5. 评论与评分：Bootstrap的徽章组件（Badges）和进度条（Progress Bars）可以用于展示用户评价和评分，提供互动性。 6. 移动优先：Bootstrap的设计理念是移动优先，这意味着首先为小屏幕设备设计，然后通过媒体...
Bootstrap带图标的按钮样式
12-13
这是一款基于bootstrap的带图标的按钮样式。这组按钮在bootstrap按钮的基础上，通过附加的HTML元素来构建小图标，并通过CSS3来制作鼠标hover动画效果。
Bootstrap 导航栏 分页 标签 徽标 警告框
Manjusaka
03-16 447
导航条: .navbar navbar-default .navbar-header 商标     a.navbar-brand  导航条固定顶部: .navbar-fixed-top 导航条固定顶部: .navbar-fixed-bottom 导航条反色: .navbar-inverse 条 导航条 ul  元素: ul.nav navbar-nav 条 导航
Bootstrap 徽章 badge
歪脖先生的博客
05-21 1065
徽章 Bootstrap提供的徽章，非常适合显示计数结果等内容，它的基本样式通过 .badge类实现，默认以带有圆角和背景的椭圆呈现。如： <ahref="#">Inbox<spanclass="badge">42</span></a> <buttonclass="btn btn-primary"type="butto...
Bootstrap(二十四)
shi199434的博客
12-13 240
Bootstrap 徽章（Badges） 本章将讲解 Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。 徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把  添加到链接、Bootstrap 导航等这些元素上即可。 下面的实例演示了这点： 实例 展示未读邮件： a href="#">Ma
Bootstrap路径分页标签和徽章组件
Just The Way You Are
07-16 589
路径组件 路径组件也叫面包屑导航 <ol class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">产品列表</a></li> <li class="active">韩版2015年羊绒毛衣</a></li> </ol>分页组件 提供带有展示页面的功能 <!-- 默认分页 --> <ul class=
bootstrap徽章（18）
qq_43687284的博客
12-29 351
Bootstrap 徽章（Badges） 本章将讲解 Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。 徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章， 只需要把 &amp;lt;span class=&quot;badge&quot;&amp;gt; 添加到链接、Bootstrap 导航等这些元素上即可。 下面的实例演示了这点： 实例 展示未读邮件： &amp;lt;a...
Bootstrap系列之徽章（Badge）
老__L的博客
05-28 1866
徽章（Badge）
BootStrap笔记-badge的使用
IT1995的博客
01-17 1433
运行截图如下； 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--
BootStrap--CSS组件-- 徽章(badge)
王欢的博客
12-16 9485
在开发交互式系统或者信息系统时，经常要显示一些最新收到的消息、需要有多少审批的消息。 在span或者label上应用该badge样式即可徽章使用//使用 <a href="#" class="btn btn-default">通知<span class="badge">42</span></a><ul class="nav nav-pills nav-stacked" style="width:2
<EventStruct> <EventCode>0 BOOTSTRAP</EventCode> <CommandKey></CommandKey> </EventStruct> <EventStruct> <EventCode>1 BOOT</EventCode> <CommandKey></CommandKey> </EventStruct> </Event>
06-03
消息中包含了两个事件：0 BOOTSTRAP 和 1 BOOT。其中，0 BOOTSTRAP 事件表示设备刚刚启动，并且正在初始化连接。1 BOOT 事件表示设备启动完成，可以开始正常工作了。事件通知可以帮助管理服务器及时了解设备的状态...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值