激活导航状态

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

    题目大意: 有一个照明系统需要用到n种灯,每种灯的电压为V,电源费用K,每个灯泡费用为C,需要该灯的数量为L.注意到,电压相同的灯泡只需要共享一个对应的电源即可,还有电压低的灯泡可以被电压高的灯泡替代 ...

  2. EOS Bios Boot Sequence

    EOS version:v1.0.5 Date:2018-06-19 Host: Centos 7 Reference :https://github.com/EOSIO/eos/wiki/Tutor ...

  3. c#字符串字面量

    分为两种: 1 常规字符串字面量 2逐字字面量字符串:以@字符为前缀.注意:注意逐字字面量唯一例外的是相邻的双引号组,它们被解释为单个双引号字符.

  4. Uva12210-A Match Making Problem

    对于每个数字二分找到大于等于它的数,再暴力找到第一个小于它的数 #include<bits/stdc++.h> #define inf 0x3f3f3f3f ; using namespa ...

  5. python中“生成器”、“迭代器”、“闭包”、“装饰器”的深入理解

    python中"生成器"."迭代器"."闭包"."装饰器"的深入理解 一.生成器 1.生成器定义:在python中,一边 ...

  6. RDL Web报表抛出ReportServerException,已取消该操作

    ::, RsBase() [ERROR] - Microsoft.Reporting.WebForms.ReportServerException: 已取消该操作. ---> System.Op ...

  7. 牛客网Java刷题知识点之什么是匿名内部类、匿名内部类的使用原则、匿名内部类初始化、匿名内部类使用的形参为何要为final 和 案例

    不多说,直接上干货! 什么是匿名内部类 匿名内部类就是没有名字的内部类. 不使用关键字class . extends .implements 没有构造函数 必须继承其他类或实现其他接口 正因为没有名字 ...

  8. 持续集成~Jenkins构建dotnetCore的项目

    上周一个大件就是dotnet core2.0发布了,伴随着.NET Standard2.0也发布了,整个微软的生态环境大好,当然也有一个BUG出来了,比如EFCore对Mysql的支持比起1.1来说, ...

  9. C# Mutex互斥锁

    Mutex 构造函数 (Boolean, String, Boolean) public Mutex ( bool initiallyOwned, string name, out bool crea ...

  10. Redis的数据类型（Strings、 hashes）

    字符串(Strings)类型及操作 字符串是Redis值的最基础的类型,一个key对应一个value,Redis字符串是二进制安全的,这意味着一个Redis字符串可以包含任何种类的数据,例如一个JPE ...