bootstrap历练实例： 导航元素中禁用的链接

时间：2022-05-03 00:15:17

对每个 .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历练实例：表单控件状态&lpar;禁用&rpar;

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

  8. Bootstrap历练实例：响应式导航&lpar;带有表单&rpar;

    <!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. 2016icpc大连站总结&lpar;呐 如果把这段回忆&comma;起个名字珍藏起来&comma;叫它&OpenCurlyDoubleQuote;宝物”应该很合适吧&rpar;

    10月15号一早乘飞机去了大连,12点这样到了海事大学,是一所很大的学校,来往的学生有些穿着海军服.然后我们到体育馆领了衣服,就去食堂吃午饭,中间有段小插曲,就是我们队的餐券没领..不过那里的负责人让 ...

  2. Maven、SecureCRT使用问题汇集

    1 Maven 无法下载pom文件中相关的依赖包 该问题可能有很多原因,我的原因是host中的localhost被修改了,改回来即可! 看起来好像出了一些网络原因的问题,顺着这个方向搜索,发现国外也有 ...

  3. Android 使用SoundPool播放音效

    在Android开发中我们经常使用MediaPlayer来播放音频文件,但是MediaPlayer存在一些不足,例如:资源占用量较高.延迟时间较长.不支持多个音频同时播放等.这些缺点决定了MediaP ...

  4. 一段可以使用的 hibernate获得对象-&gt&semi;action存入List-&gt&semi;jsp页面用&lt&semi;s&colon;iterator&gt&semi;迭代的代码

    SelectAction.java @SuppressWarnings("serial") @Component("selectAction") @Scope( ...

  5. linux环境下配置github远程仓库

    1.设置git用户和邮箱 git config --global user.name "fujinzhou" git config --global user.email &quo ...

  6. JSON AND BSON

    JSON JavaScript Object Notation (JSON) is an open, human and machine-readable standard that facilita ...

  7. 【转】Android源码下载过程的一些注意事项

    原文网址:http://www.360doc.com/content/14/0113/11/11948835_344809459.shtml 其它一些事项说明: 1.在源代码下载过程中,我们在源代码下 ...

  8. 3D动画效果照片墙demo

        <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF- ...

  9. 对sppnet网络的理解

    前言: 接着上一篇文章提到的RCNN网络物体检测,这个网络成功的引入了CNN卷积网络来进行特征提取,但是存在一个问题,就是对需要进行特征提取图片大小有严格的限制.当时面对这种问题,rg大神采用的是对分 ...

  10. adb命令（笔记）

    1.adb shell su   进入root管理员权限(前提是手机已root) 2.chmod 可以修改文件夹的权限: $ adb shell $ su # chmod -R 777  /data/ ...

相关文章