激活导航状态

您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <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. Solr 6.7学习笔记（02）-- 配置文件 managed-schema (schema.xml) - filter（5）

    自定义fieldType时,通常还会用到filter.filter必须跟在tokenizer或其它filter之后.如: <fieldType> <analyzer> < ...

  2. Listbox 实现Item双击事件

    void listBox1_MouseDoubleClick(object sender, MouseEventArgs e) { int index = this.listBox1.IndexFro ...

  3. AGC001 E - BBQ Hard【dp+组合数学】

    首先直接按要求列出式子是\( \sum_{i=1}^{n}\sum_{j=i+1}^{n}C_{a_i+a_j+b_i+b_j}^{a_i+a_j} \) 这样显然过不了,因为ab的数据范围比较小,所 ...

  4. codevs 1993草地排水

    1993 草地排水

  5. struts 日期组件

    1.组件文件夹   datepicker 一般放在WebRoot/js下. 2.前台页面: 在head里面:引入 <script type="text/javascript" ...

  6. MyBaties源码解析

    觉得查看源代码确实是一个学习的一种方法 因为很多时候别人把最核心的代码给我们都封装好了 我们直接可以来拿使用 很多时候自己也会问 为什么通过这个方法就可以得到我觉得就是一颗好奇心吧 我算了算 就这三个 ...

  7. p标签间距问题

    用<p></p>标签写文本时,控制行与行之间的高度最好用line-height,不要用margin或padding:   因为P标签本身就带有一定的上下间距,且自带的间距在模拟 ...

  8. jmeter接口测试-调用java的jar包-csv参数化请求-BeanShellPreProcessor生成验签作为请求验证参数-中文乱码----实战

    背景及思路: 需求:要做 创建新卡 接口的测试,要求: 1. 不需要每次手动修改请求参数. 方案:文中先用excle将数据准备好,导出为csv格式,再用jmeter的csv请求进行参数化 2. 卡号需 ...

  9. 【手撸一个ORM】第四步、Expression（表达式目录树）扩展

    到这里,Orm的基架已经搭起来了,接下来就是激动人心的部分,表达式目录树转Sql语句,SqlDataReader转数据实体等等,但是在这之前,我们需要扩展下表达式目录树的方法,以方便后面的相关操作. ...

  10. 详解Java构造方法为什么不能覆盖，我的钻牛角尖病又犯了....

    一 看Think in Java,遇到个程序 class Egg2 { protected class Yolk { public Yolk() { System.out.println(" ...