激活导航状态

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

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1255 题意:中文题诶- 思路:对于当前字符 s[i],若其不在 ...

  2. 2018最新苹果APP上架App Store流程（超详细）

    本文转发:https://blog.csdn.net/xxw888/article/details/73618837 2018最新整理iOS app上架app详细教程 上架iOS需要一个付费688的开 ...

  3. 搭建Windows IIS（Internet Information Server）服务器

    1.找到 控制面板\程序 点击 “打开或关闭Windows功能” ,全部选上“Internet信息服务”,这里可能要等几分钟. 2.完成之后你打开C盘,在他的根目录下多出一个inetpub文件夹里面有 ...

  4. Kali Linux 工具清单

    Kali Linux 工具清单 Information Gathering acccheck ace-voip Amap Automater bing-ip2hosts braa CaseFile C ...

  5. shell常用正则表达式

    转载自: http://www.cnblogs.com/linhaifeng/p/6596660.html 和 http://www.blogjava.net/jasmine214--love/arc ...

  6. Python-11-循环

    x = 1 while x <= 100:     print(x)     x += 1   基本上, 可迭代对象是可使用for循环进行遍历的对象. numbers = [0, 1, 2, 3 ...

  7. CC08:翻转子串

    题目 假定我们都知道非常高效的算法来检查一个单词是否为其他字符串的子串.请将这个算法编写成一个函数,给定两个字符串s1和s2,请编写代码检查s2是否为s1旋转而成,要求只能调用一次检查子串的函数. 给 ...

  8. Cent OS 6.5 下 Node.js安装

    打开官网 http://nodejs.org/ 点击那个绿色的INSTALL 按钮下载安装包,然后解压.   基本的环境我原本已经安装完毕,这是需求的环境,来源安装包中的README.md,需要的自行 ...

  9. 2016-2017 ACM-ICPC, NEERC, Southern Subregional Contest A. Toda 2 贪心 + 暴力

    A. Toda 2 time limit per test 2 seconds memory limit per test 512 megabytes input standard input out ...

  10. SSAS 部署之创建部署脚本

    1.获取多维数据库的结构脚本: 当你的SSAS项目完成后,在Bin目录下会有一个SSAS.asdatabase文件. 2.打开“开始” ->Microsoft SQL Server 2008 R ...