对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态，

<!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="initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li class="disabled"><a href="#">IOS</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
<br /><br /><br />
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li class="disabled"><a href="#">IOS</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</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历练实例：向列表组添加链接

    向列表组添加链接 通过使用锚标签代替列表项,我们可以向列表组添加链接.我们需要使用 <div> 代替 <ul> 元素.下面的实例演示了这点: <!DOCTYPE html ...

  2. Bootstrap历练实例：导航中的表单

    Bootstrap历练实例:导航中的表单,它是使用class.navbar-form类,这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为,使用这个对齐方式选项来决定导航栏中的内容放置在哪里. 实例 ...

  3. Bootstrap历练实例：响应式导航栏

    响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...

  4. Bootstrap历练实例：popover插件中的方法

    方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...

  5. Bootstrap历练实例：激活导航状态

    激活导航状态 您可以在激活状态的胶囊式导航和列表导航中放置徽章.通过使用 <span class="badge"> 来激活链接,如下面的实例所示: <!DOCTY ...

  6. bootstrap历练实例：标签式的导航菜单

    本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...

  7. Bootstrap历练实例：表单控件状态(禁用)

    禁用的输入框 input 如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式. < ...

  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. laravel SQL语句

    DB::table('表名')->get();   //查询表里的所有数据 DB::table('表名')->where()->find(需要查询的条数);    查询单或多条数据 ...

  2. Ruby测试小代码[计算50以内的素数]

    算法思想 判断某一个数,能不能被比他平方根小的素数整除. 首先看看代码 $arr = [] $arr[0] = 2 def add_prime(n) 3.step(n,2){|num| $arr &l ...

  3. IT兄弟连 JavaWeb教程 JSP内置对象3

    读取web.xml配置信息的config对象 config对象主要用于取得服务器的配置信息.通过pageContxt对象的getServletConfig()方法获取一个config对象.当一个Ser ...

  4. MyBatis源码解析（一）

    <!-- mybatis文件配置,扫描所有mapper文件 --><!--SqlSessionFactoryBean的初始化参数--> <bean id="sq ...

  5. MongoDB 删除数据

    删除mongodb集合中的数据可以使用remove()函数.remove()函数可以接受一个查询文档作为可选参数来有选择性的删除符合条件的文档.remove()函数不会删除集合本身,同时,原有的索引也 ...

  6. [題解]51nod_1515_明辨是非

    好久沒有話多了,是覺得有點浪費時間,今天考試和一中用的一樣的題,結果反而考得不好,不過Jackpei一句知恥而後勇點醒夢中人偷偷@Jackpei 就是這樣吧 還有我極度懷疑我的鍵帽打油了......我 ...

  7. DRF教程1-序列化

    序列化类 要建立web API,要做的第一件事就是对实例进行序列化,比如以json方式显示.我们可以生命序列化,它和django的forms很相似.在app目录下创建serializers.py fr ...

  8. 最新Centos7安装python3并与python2共存

    1.查看是否已经安装Python CentOS 7.2 默认安装了python2.7.5 因为一些命令要用它比如yum 它使用的是python2.7.5. 使用 python -V 命令查看一下是否安 ...

  9. WPF中获取指定坐标依赖对象数据项

    上图中红色框区域是一个自定义的ListBox控件,需要实现的功能是,点击红框区域中某项时,获取当前选中项的数据项 控件的MouseDown事件部分代码为: var x = TreeHelper.Fin ...

  10. 第七章 设计程序架构 之 设计HTTP模块和处理程序

    1. 概述 HTTP模块和处理程序,可以让程序员直接跟HTTP请求交互. 本章内容包括 实现同步和异步模块及处理程序以及在IIS中如何选择模块和处理程序. 2. 主要内容 2.1 实现同步和异步模块及 ...