激活导航状态

您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <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. ORM应用

    目录 ORM概念 ORM由来 ORM的优势 ORM的劣势 ORM总结 ORM 与 DB 的对应关系图 Model 模块 ORM操作 增删改查操作 ORM概念 对象关系映射(Object Relatio ...

  2. Python学习笔记（socket）

    socket(数据传输接口) 搭建服务端 1.导入模块 import socket 2.创建socket对象 sock=socket .socket(socket_family,socket_topy ...

  3. Java：创建线程

    Java定义了两种创建线程的方法: 1.实现Runnable接口 要实现Runnable接口,只需简单地实现run()方法即可,声明如下:public void run() 在run()方法中,可以定 ...

  4. elasticsearc 参考资料

    _source 和store http://stackoverflow.com/questions/18833899/in-elasticsearch-what-happens-if-i-set-st ...

  5. Java程序的运行机制和JVM

    1. Java语言比较特殊, 由Java编写的程序需要经过编译步骤,但这个编译步骤不会产生特定平台的机器码,而是生成一种与平台无关的字节码(也就是.class文件).这种字节码不是可执行性的,必须使用 ...

  6. 关于Nginx对于PHP支持的问题

    因为使用的mediawiki是用php写的,所以就遇上了一个问题,怎么让Nginx支持php,记得当时使用apache2的时候是安装了一个叫 “ libapache2-mod-php5 ”的mod , ...

  7. redis启动内存不足

    redis-server.exe redis.windows.conf  --maxheap 2gb

  8. 1126 数字统计 2010年NOIP全国联赛普及组

    1126 数字统计 2010年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver         题目描述 Description 请统计某个 ...

  9. Wrinkles should merely indicate where smiles have been.

    Wrinkles should merely indicate where smiles have been. 皱纹应该只是微笑留下的印记.

  10. jQuery中slim版本与普通版本的区别

    在jQuery3中,推出了一个slim版本.slim,百度翻译:细长的; 苗条的,纤细的; 微小的; 无价值的. 区别概述: slim即简化版,比普通版本缺少Ajax和特效模块模块. 官方发布地址:h ...