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)的步骤如下: ...
随机推荐
- OSX的一些基本知识
1, 熟悉OSX常用的热键: 花 +C 拷贝(注意,复制是在当前目录中制作一个副本,跟拷贝意义不一样) 花 +V 粘贴(如果用拖拽的方式进行复制,需要按住Option键,相当于Windows的Ctrl ...
- 下载安装JDK，配置环境变量
Hello,JDK; 在开始学习JAVA之前,第一件事情肯定是被告知:先下载JDK.就像我的一个朋友问我的一样"JDK是个什么鬼?我学的不是JAVA么,为什么要下载JDK?". J ...
- nignx 启动，重启命令
1.查看进程号 ps -ef|grep nginx 强制停止 [root@LinuxServer ~]# pkill -9 nginx 重启 1.验证nginx配置文件是否正确 方法一:进入ngin ...
- 剑指offer四：链表中倒数第k个结点
输入一个链表,输出该链表中倒数第K个结点 public class ListNode { int val; ListNode next = null; ListNode(int val) { this ...
- 扒一扒自从买了kindle后看的书
一.<性别战争> 讲述的是动物界各类动物的xxx(你懂的),以动物拟人化的口吻来进行问答,十分的生动形象,虽说和自己的生活没有多大联系,但是偶尔了解一下,也是意外的不错的感觉. 二.< ...
- ubuntu16.04中将python3设置为默认
直接执行这两个命令即可: sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo upd ...
- jquery.select2 模糊查询
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link re ...
- 本地jsp连到服务器上的sqlserver
1.首先通过远程桌面连接到自己的服务器 方法很简答,打开远程桌面连接,然后输入服务器ip(外网ip),然后输入登录名和密码. 可以参考腾讯云给的教程:http://bbs.qcloud.com/for ...
- [WPF]UserControl的MouseWheel事件触发
用户控件: <UserControl> <Grid> <TextBox x:Name="textBlock" HorizontalAlignment= ...
- java对国际化的支持
国际化的英文为Internationalization,这个也太长了,所以它又称为I18n(英文单词 internationalization的首末字符i和n,18为中间的字符数). 除了i18n还有 ...