Bootstrap <基础二十一>徽章（Badges）
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>
结果如下所示：
当没有新的或未读的项时，通过 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 <基础二十一>徽章（Badges）的更多相关文章
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
- Bootstrap <基础二十九>面板（Panels）
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
- Bootstrap <基础二十五>警告（Alerts）
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- Bootstrap<基础二十四> 缩略图
Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
- Bootstrap <基础二十三>页面标题（Page Header）
页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...
- Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...
随机推荐
- Xcode8 适配iOS10时遇见的一些问题
1.证书管理 用Xcode8打开工程后,比较明显的就是下图了,这个是苹果的新特性,可以帮助我们自动管理证书.建议大家勾选这个Automatically manage signing(Ps.但是在bea ...
- yum安装命令的使用方法
yum安装常用软件的命令 #yum check-update #yum remove 软件包名 #yum install 软件包名 #yum update 软件包名 yum命令常见使用方法 yum - ...
- iOS改变字母的大小写
使用lowercaseString,uppercaseString -(void)test{ NSString * str = @"person"; NSString * str1 ...
- 新接触PHP课程，给自己定制的目标
PHP课程初接触,对自己的计划和展望恢复 从今天开始了为期四个半月的关于PHP课程的学习.从零开始接触一门新的技术知识,而且还是在短短四个月内就要掌握牢固,其实确确实实感觉不易.可是世间再没有路,不还 ...
- OpenLayers控制瓦片的绽放级别
先说说这个功能可能使用到的地方,当我们下载的网上瓦片或者矢量数据的第一级或开始几级效果不是很好时,我们就就想让用户看到这些级别的瓦片.实现这个功能比较简单,主要就是修改Openlayers.map的i ...
- Log4j源代码学习
了解log4j的源代码来源于项目中一次需求,我们想将系统所有的warn日志统一收集到common-warn.log的日志中去,以便于系统对其进行监控处理.于是模拟自动生成的error配置完成了warn ...
- JAVA 1.4 算术运算
1. 如果在一个算术运算中有int,double,float那么最终运算的结果是double,那么也就是说参与运算的类型和得到的结果:结果一定是参与运算的精度最高的那个类型 2. 算术运算中的除法 i ...
- go排序
补注: 近来又看 go 的排序, 发现以前对 go 的排序理解的有点浅了. go 的排序思路和 c 和 c++ 有些差别. c 默认是对数组进行排序, c++ 是对一个序列进行排序, go 则更宽泛一 ...
- linux建立一个快捷方式，连接到另一个目录
sudo ln -s 源目录 目标快捷方式比如你要在/etc下面建立一个叫LXBC553的快捷方式,指向/home/LXBC,那就是sudo ln -s /home/LXBC /etc/LXBC553
- Pattern Recognition for Cell-free DNA - Github
一直都没有找到生信领域简单易懂的机器学习案例,这回算是逮到一个了:机器学习识别cfDNA OpenGene/CfdnaPattern