激活导航状态

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

    \"   \/   \" 例: span = "<span onclick=\"xadmin.open('编辑','\/junyi\/member\/up ...

  2. ue4 retarge记录

    动画重定位(相同骨骼) https://docs.unrealengine.com/latest/CHN/Engine/Animation/AnimationRetargeting/index.htm ...

  3. [Xcode 实际操作]五、使用表格-(9)删除UITableView单元格(手势左滑调出删除按钮)

    目录:[Swift]Xcode实际操作 本文将演示如何删除某一行单元格.手势左滑调出删除按钮. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIK ...

  4. TensorFlow高层封装：从入门到喷这本书

    目录 TensorFlow高层封装:从入门到喷这本书 0. 写在前面 1. TensorFlow高层封装总览 2. Keras介绍 2.1 Keras基本用法 2.2 Keras高级用法 3. Est ...

  5. Python小世界：彻底搞懂Python一切皆对象！！！

    前言 犹记得当初学习Python的时候,对于Python一切皆对象很是懵逼,因为Python是面向对象的动态型语言,而在函数及高阶函数的应用中,如若对于一切皆对象不是有很透彻的了解,基础不是那么牢固的 ...

  6. VS2015 调试出现无法启动iis express web服务器

    VS2015 调试出现无法启动iis express web服务器 在项目目录下找到.vs文件夹,然后在.vs/config/applicationhost.config找到这个配置文件,删除掉,然后 ...

  7. Jmeter—生成excel结果文件

    相信很多用jmeter进行接口测试的童鞋都会有这样的苦恼:同时执行上百条测试案例,如何能轻松加愉快地检查案例输出结果?仅仅靠jmeter的断言.debug sampler.察看结果树等是无法满足我们要 ...

  8. uoj46玄学

    复杂度辣鸡没人权 疯狂爆oj 感觉要被众多uoj用户骂了 #include <bits/stdc++.h> #define ll long long #define LS ls[now]? ...

  9. Spark Mllib里如何对决策树二元分类和决策树多元分类的分类数目numClasses控制（图文详解）

    不多说,直接上干货! 决策树二元分类的分类数目numClasses控制 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的第13章 使用决策树二元分类算法来预测分类Stumble ...

  10. 看完这篇文章，我奶奶都懂了https的原理

    本文在个人技术博客同步发布,详情可猛戳 亦可扫描屏幕右方二维码关注个人公众号 Http存在的问题   上过网的朋友都知道,网络是非常不安全的.尤其是公共场所很多免费的wifi,或许只是攻击者的一个诱饵 ...