激活导航状态

您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <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. hdu1394(枚举/树状数组/线段树单点更新&区间求和)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1394 题意:给出一个循环数组,求其逆序对最少为多少: 思路:对于逆序对: 交换两个相邻数,逆序数 +1 ...

  2. Etherscan API 中文文档-智能合约

    本文原文链接 点击这里获取Etherscan API 中文文档(完整版) 完整内容排版更好,推荐读者前往阅读. 智能合约(Contracts) 智能合约相关的 API,接口的参数说明请参考Ethers ...

  3. js一些练习题

    1 如果数组中存在 item,则返回元素在数组中的位置,否则返回 -1 function indexOf(arr, item) { if(Array.prototype.indexOf){ retur ...

  4. easyui的datagrid用js插入数据等编辑功能的实现

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. [Java]三大特性之封装

    封装这个我们可以从字面上来理解,简单来说就是包装的意思,专业点就是信息隐藏. 是指利用抽象数据类型将数据和基于数据的操作封装在一起,使其构成一个不可分割的独立实体,数据被保护在抽象数据类型的内部,尽可 ...

  6. 小技巧(updating)

    小技巧 我们要算一个点集中所有点到另一个点集中所有点的一些量的时候,可以建立一个超级源点和超级汇点,从多->多变成单->单 整体二分的时候,操作要可以撤销,才能保证复杂度,每一层到左边区间 ...

  7. 通过jcrop和canvas的画布功能完成对图片的截图功能与视频的截图功能实现

    最近因为工作需要,做了视频截图和图截图的功能.大概需求是,用户点击某个按钮,可以对图片区域进行部分截取,然后进行进一步的业务操作. 首先说图片截图功能的思路, (1)下载Jcrop插件,添加css和j ...

  8. Spring boot中应用jpa jpa用法

    https://blog.csdn.net/u012582402/article/details/78717705

  9. Java基础语法（练习）

    Java基础语法 今日内容介绍 u 循环练习 u 数组方法练习 第1章 循环练习 1.1 编写程序求 1+3+5+7+……+99 的和值. 题目分析: 通过观察发现,本题目要实现的奇数(范围1-100 ...

  10. Windows Azure 配置Active Directory 主机（1）

    现在越来越多企业将自己业务系统迁移云端,方便公司日常运维管理.这篇文章将简单介绍一下,从 Windows Azure 虚拟网络上的虚拟机 (VM) 中的 Corp Active Directory 林 ...