Bootstrap(二十四)
来源:互联网 发布:max+守望先锋数据 编辑:程序博客网 时间:2024/06/11 05:10
Bootstrap 徽章(Badges)
本章将讲解 Bootstrap 徽章(Badges)。徽章与标签相似,主要的区别在于徽章的边角更加圆滑。
徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。
下面的实例演示了这点:
实例
展示未读邮件:
<ahref="#">Mailbox<spanclass="badge">50</span></a>
尝试一下 »
结果如下所示:
当没有新的或未读的项时,通过 CSS 的 :empty 选择器,徽章会折叠起来,表示里边没有内容。
实例
展示未读消息:
<divclass="container"><h2>徽章</h2><p>.badge 类指定未读消息的数量:</p><p><ahref="#">收件箱<spanclass="badge">21</span></a></p></div>
尝试一下 »
激活导航状态
您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <span class="badge"> 来激活链接,如下面的实例所示:
实例
<h4>胶囊式导航中的激活状态</h4><ulclass="nav nav-pills"><liclass="active"><ahref="#">首页<spanclass="badge">42</span></a></li><li><ahref="#">简介</a></li><li><ahref="#">消息<spanclass="badge">3</span></a></li></ul><br><h4>列表导航中的激活状态</h4><ulclass="nav nav-pills nav-stacked"style="max-width: 260px;"><liclass="active"><ahref="#"><spanclass="badge pull-right">42</span>首页</a></li><li><ahref="#">简介</a></li><li><ahref="#"><spanclass="badge pull-right">3</span>消息</a></li></ul>
尝试一下 »
结果如下所示:
阅读全文
0 0
- Bootstrap(二十四)
- Bootstrap(十四)
- 二十四
- 十四、bootstrap-table 展示数据
- Bootstrap(二)
- 十月二十四日
- 二十四诗品
- 人生二十四年
- 二十四自我观
- 二十四句
- 腊月二十四
- 二十四節気
- 算二十四
- 二十四点算法
- 十二月二十四節氣候度數
- LinuxCast二十四:System_Boot
- 二十四种模式
- 六月二十四
- 第一次在Linux上运行Java程序
- 简单电路实验
- 情绪在股市中的作用
- oracle--常用函数1--数值函数
- 注解@(文件上传)
- Bootstrap(二十四)
- 100经典算法之(一)---Fibonacci Numbers
- PXE,DHCP,Apache-Kickstart系统集体化自动安装
- Gradle + Spring Boot + Jersey搭建REST开发环境
- TOJ 5271: 质因数的个数
- 064day(多态实例:几何形体程序)
- MySQL存储过程详解 mysql 存储过程
- linux云服务器iptables防火墙快速配置
- 了解ASP.NET Core 依赖注入,看这篇就够了 于2017年11月6日由jesseliu发布