bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题、二级菜单及状态
加入导航条标题
在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的更多相关文章
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- bootstrap学习笔记<十一>（导航条）
基础导航条.样式:class="navbar navbar-default",属性:role="navigation" <div class=" ...
- Bootstrap系列 -- 39. 导航条添加标题
在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来 ...
- Bootstrap 学习笔记13 附加导航插件
附加导航代码: <style> a:focus { outline: none; } .nav-pills { width: 150px; } .nav-pills.affix { top ...
- DEDECMS v5.7 完美实现导航条下拉二级菜单
一.引言 好多人都问,织梦的下拉导航怎么做呢?其实很简单!即使你对代码一点也不熟悉,没关系! 按照我的步骤走!记住一步也不能错哦! 二.实现过程 1.首先: 将下面这段代码贴到templets\def ...
- Bootstrap每天必学之导航条
http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
随机推荐
- 老李分享：robotium常用API 2
断言: 具体请查看官网 断言方法assert(robotium特有的断言方式,实际项目中和Junit的assert方法配合使用) void assertCurrentActivity (String ...
- css实现超出部分用...代替
如果是一行的话 css为 white-space: nowrap: 保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格. overflow: hidden: 隐藏超出单元格的部分. tex ...
- Oracle的基本学习(一)—安装Oracle
一.Oracle环境搭建 1.安装Oracle 10g 我们把Orcale安装到虚拟机上,远程连接. (1)解压文件10201_database_win32.zip,并双击解压目录下的set ...
- spring_boot攻略1.1-hello SpringBoot
交流账号:2318645572 说明: 开发工具:eclipse 开发系统:windows 7 开发规范:maven项目 注意:按照我说的方式做下去 1.导包:pom.xml <project ...
- 深入理解css中vertical-align属性
一.为什么要写这篇文章 今天看到一个问题: 两个div 都设置 display:inline-block,正常显示:但是在第二个div中加一个块级元素或者内联元素,显示就变了个样,为什么? <m ...
- struts2 之 Action的创建方式
总结:struts2是一个轻量级框架,提供了无侵入性的实现方式,struts2也提供了接口和类来实现action.通过实现接口或者继承类来实现action可以实现struts2提供的相关功能, 1. ...
- 【从无到有】HTML的初识——part1
Ⅰ.HTML的初识 1.HTML:超文本标签语言(网页源代码) 2.html的基本结构: <html> <head> <meta charset="utf-8& ...
- Linux下修改环境终端提示符
Linux修改环境变量PS1(命令行提示符),可以使用vi编辑/etc/bashrc或/etc/profile文件,在最后加上: export PS1='[\u@\h \W]\$ ' 即可,其中\u显 ...
- 0.0 ABP官方文档翻译目录
一直想学习ABP,但囿于工作比较忙,没有合适的契机,当然最重要的还是自己懒.不知不觉从毕业到参加工作七年了,没留下点儿什么,总感觉很遗憾,所以今天终于卯足劲鼓起勇气开始写博客.有些事能做的很好,但要跟 ...
- Angularjs快速入门（二）
说说上一节的例子,$scope 我们没有创建这个对象,直接绑定就能获取里面的对象,这种风格遵循了一种叫迪米特法则的设计模式. 然后angular还有一种很强大的功能叫“指令”. 就是你可以吧模板编写成 ...