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

时间：2022-10-11 09:01:39

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

加入导航条标题

在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行）。

效果图如下：

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

任务

我来试试：完成下面任务

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

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

<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/3120的更多相关文章

  1. bootstrap学习笔记之基础导航条 http&colon;&sol;&sol;www&period;imooc&period;com&sol;code&sol;3111

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

  2. bootstrap学习笔记&lt&semi;十一&gt&semi;（导航条）

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

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

    在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&period;7 完美实现导航条下拉二级菜单

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

  6. Bootstrap每天必学之导航条

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

  7. Bootstrap~学习笔记索引

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

  8. Bootstrap学习笔记&lpar;二&rpar; 表单

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

  9. Bootstrap学习笔记-布局

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

随机推荐

  1. LLBL Gen &plus; Entity Framework 程序设计入门

    Entity Framework推出有好几年,除了微软的Visual Studio可以做实体框架开发外,第三方的开发工具如LLBL Gen, Devart Entity Developer也可以用来做 ...

  2. Pipe

    #一边压缩一边传 一边解压 到对方的目录为/tlj/2/ / | ssh root@172.16.200.56 tar xzf - -C /tlj #在一个需要文件名的地方 使用-重定向输出到stdo ...

  3. Android GPS 临近触发

    前面介绍过LocationManager有一个addProximityAlert(double latitude,double longitude,float radius,long expirati ...

  4. MySQL各个版本区别

    MySQL 的官网下载地址:http://www.mysql.com/downloads/ 在这个下载界面会有几个版本的选择. 1. MySQL Community Server 社区版本,开源免费, ...

  5. mapreduce 实现矩阵乘法

    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs ...

  6. java对xml文件做增删改查

    http://www.cnblogs.com/wangchenyang/archive/2011/08/23/2150530.html http://www.blogjava.net/weishuan ...

  7. js函数变量

    局部 JavaScript 变量 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域是局部的). 您可以在不同的函数中使用名称相同的局部 ...

  8. ajax 文件下载

    作为一个后端开发人员,使用java 生成文件,提供前端下载,这个问题倒不大,可是让我们自己去下载文件的时候,这个问题就大了,对不起,我只对前端一知半解,并不精通,谢谢!! 需求如下:前端检索数据,后台 ...

  9. C&num; 汉字转拼音（全拼）

    C# 汉字转拼音(全拼)     很多时候我们需要把汉字转换成拼音,比如姓名.城市名等.网上搜索了一把,把汉字转成拼音的代码很多,但大多都只是把汉字转成了拼音的首字母,比如把“深圳”转成了“sz”.那 ...

  10. unity物理检测的几种方式

    (由于本人大多做2d游戏,因此以下以2d为主介绍,但是具体和3d相差不大) 在unity中有很多不同的物理检测方式,但是大致可以分为以下几种: 1.Physics2d检测系列 Physics2d.Li ...

相关文章