为导航条添加标题、二级菜单及状态

加入导航条标题

在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现,示例查看代码编辑器(11-22)。

原理分析:

此功能主要起一个提醒功能,当然改良一下可以当作是logo(此处不做过多阐述)。其样式主要是加大了字体设置,并且设置了最大宽度:

/*源码查看bootstrap.css文件第3739行~第3755行*/

.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
@media (min-width: 768px) {
.navbar> .container .navbar-brand,
.navbar> .container-fluid .navbar-brand {
margin-left: -15px;
}
}

同样在默认导航条(navbar-default)下,对navbar-brand也做了颜色处理:

/*源码请查看bootstrap.css文件第3947行~3951行*/

.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}

导航条状态、二级菜单

同样的,在基础导航条中对菜单提供了当前状态,禁用状态,悬浮状态等效果,而且也可以带有二级菜单的导航条,案例代码见右侧代码编辑器(24-42行)。

效果图如下:

任务

我来试试:完成下面任务

制作一个具有标题、二级菜单及导航条状态的导航条。效果图如下:

<span style="color:#cc0000;"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>为导航条添加标题、二级菜单及状态</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head> <body>
<!--加入导航条标题-->
<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <a href="##" class="navbar-brand">慕课网</a>
 </div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
<!--导航条状态及二级菜单-->
<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <a href="##" class="navbar-brand">慕课网</a>
 </div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">JavaScript</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body>
</html></span>

站外地址:bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120的更多相关文章

  1. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  2. bootstrap学习笔记&lt;十一&gt;(导航条)

    基础导航条.样式:class="navbar navbar-default",属性:role="navigation" <div class=" ...

  3. Bootstrap系列 -- 39. 导航条添加标题

    在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来 ...

  4. Bootstrap 学习笔记13 附加导航插件

    附加导航代码: <style> a:focus { outline: none; } .nav-pills { width: 150px; } .nav-pills.affix { top ...

  5. DEDECMS v5.7 完美实现导航条下拉二级菜单

    一.引言 好多人都问,织梦的下拉导航怎么做呢?其实很简单!即使你对代码一点也不熟悉,没关系! 按照我的步骤走!记住一步也不能错哦! 二.实现过程 1.首先: 将下面这段代码贴到templets\def ...

  6. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

  7. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  8. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  9. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

随机推荐

  1. C 语言Struct 实现运行类型识别 RTTI

    通过RTTI,能够通过基类的指针或引用来检索其所指对象的实际类型.c++通过下面两个操作符提供RTTI. (1)typeid:返回指针或引用所指对象的实际类型.    (2)dynamic_cast: ...

  2. LL(1)文法

    <源程序>→<外部声明>|<外部声明><函数体> <外部申明>→<头文件><函数声明>|其他声明 <函数体&g ...

  3. Jmeter性能测试入门(转)

    出处:http://www.cnblogs.com/by-dream/p/5611555.html Jmeter性能测试步骤 1. 添加线程组之后,先设置这两项: 2. 添加一个http请求 被测的u ...

  4. int组成时间值

    int startYear = int.Parse(DateTime.Now.Year.ToString()); int startMouth = int.Parse(DateTime.Now.Mon ...

  5. Python爬取指定重量的快递价格

    目录 一.获取查询接口 二.获取相关数据 三.编写爬虫脚本 四.查看查询效果 背景:现在这个时代,快递横飞.我们想寄一个快递,给出的选择也是多种多样的(根据快递的大小.送达的时间.寄送的距离及价格.公 ...

  6. Python_迭代器

    迭代器:迭代器里的元素读一个丢一个,不能回退,不能用下标访问 x.__next__():迭代器里唯一的方法,只读下一个 d = iter(['Presly', 'is', 'lovely', ]) p ...

  7. 64位版本为什么叫amd64,而不是intel64

    64位版本为什么叫amd64,而不是intel64? 首先了解下常见的几个架构: X86是一个指令集,是刚有个人电脑时候的什么8086,286,386的那个兼容的指令集.   “x86-64”,有时会 ...

  8. js中的substring

    "ABCDEFG".substring(2,3) 结果为"C"

  9. Mac配置SDK+JDK环境

    1.打开默认终端设备,编辑.bash_profile文件,命令:vi .bash_profile 2.执行,打开文件,编辑,配置环境命令如下: ①JDK环境:export JAVA_HOME=/lib ...

  10. 浅谈ES6的let和const的异同点

    1.let和const的相同点: ① 只在声明所在的块级作用域内有效. ② 不提升,同时存在暂时性死区,只能在声明的位置后面使用. ③ 不可重复声明. 2.let和const的不同点: ① let声明 ...