激活导航状态

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：激活导航的状态</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div style="padding:100px">
<ul class="nav nav-pills">
<li class="active"><a href="#">Html5<span class="badge">56</span></a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">Bootstrap<span class="badge">6</span></a></li>
</ul>
<br /><br />
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Html5<span class="badge">56</span></a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">Bootstrap<span class="badge">6</span></a></li>
</ul>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：激活导航状态的更多相关文章

  1. bootstrap历练实例： 导航元素中禁用的链接

    对每个 .nav class,如果添加了 .disabled class,则会创建一个灰色的链接,同时禁用了该链接的 :hover 状态, <!DOCTYPE html><html& ...

  2. Bootstrap历练实例：导航内的下拉菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Bootstrap历练实例：分页状态

    分页的状态 下面的实例演示了上表中所讨论的 class .disabled..active 的用法: <!DOCTYPE html><html><head>< ...

  4. Bootstrap历练实例：导航中的表单

    Bootstrap历练实例:导航中的表单,它是使用class.navbar-form类,这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为,使用这个对齐方式选项来决定导航栏中的内容放置在哪里. 实例 ...

  5. Bootstrap历练实例：导航内下拉菜单的用法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. Bootstrap历练实例：验证状态

    验证状态 Bootstrap 包含了错误.警告和成功消息的验证样式.只需要对父元素简单地添加适当的 class(.has-warning. .has-error 或 .has-success)即可使用 ...

  7. bootstrap历练实例：标签式的导航菜单

    本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...

  8. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

随机推荐

  1. Pycharm 设置TextStyle

    之前在脚本中选择了一个字符串, PyCharm会"高亮"所有相同的字符串, 但是我不满意这个"高亮"的颜色,因为和背景色太相似了,所以需要做一下操作,修改这个& ...

  2. 7.Python初窥门径(数据类型补充,操作及注意事项)

    python(数据类型补充,转换及注意事项) 数据类型补充 str str.capitalize() 首字母大写 str.title() 每个单词首字母大写 str.count() 统计元素在str中 ...

  3. PJzhang:一站式跨境卖家网址导航Amz520.com

    猫宁!!! 参考链接:http://www.guxiaobei.com/amz520-release.html www.amz520.com是一个跨境电商导航站点,汇集了大量的高效信息,做这个站点花费 ...

  4. 洛谷P4822 冻结

    题目描述 "我要成为魔法少女!" "那么,以灵魂为代价,你希望得到什么?" "我要将有关魔法和奇迹的一切,封印于卡片之中„„" 在这个愿望被 ...

  5. 黑马SSM练习中 Oracle SQL代码

    -- 10张表 product member orders traveller order_traveller users role permission users_role role_permis ...

  6. spring 3.2.7 applicationContext.xml

    <?xml version="1.0" encoding="UTF-8" ?> <beans xmlns="http://www.s ...

  7. .NET Core中Circuit Breaker

    谈谈Circuit Breaker在.NET Core中的简单应用 前言 由于微服务的盛行,不少公司都将原来细粒度比较大的服务拆分成多个小的服务,让每个小服务做好自己的事即可. 经过拆分之后,就避免不 ...

  8. 从I/O事件到阻塞、非阻塞、poll到epoll的理解过程

    I/O事件   I/O事件 非阻塞I/O.在了解非阻塞I/O之前,需要先了解I/O事件 我们知道,内核有缓冲区.假设有两个进程A,B,进程B想读进程A写入的东西(即进程A做写操作,B做读操作).进程A ...

  9. scau 18087 开始我是拒接的 mobius

    其实有一个很有用的技巧就是,把gcd = 4的贡献,压去gcd = 2时的贡献,就不需要考虑这么多的了. 为什么可以把gcd = 4的,压去gcd = 2的呢,gcd = 12的,压去gcd = 6的 ...

  10. Uncaught Error: Bootstrap's JavaScript requires jQuery

    在写bootstarp的时候,一直报 Uncaught Error: Bootstrap's JavaScript requires jQuery 查看了自己引入的文件路径是对的,也可以使用jquer ...