bootstrap学习笔记之基础导航条

基础导航条

在Bootstrap框中，导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。我们先来看导航条中最基础的一个——基础导航条。

使用方法：

在制作一个基础导航条时，主要分以下几步：

第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

示例查看右侧代码编辑（10-19行）。

“.navbar”样式的主要功能就是设置左右padding和圆角等效果，但他和颜色相关的样式没有进行任何的设置。其主要源码如下：

/*源码查看bootstrap.css文件第3642行～第3647行*/

<span style="color:#ff6666;">.navbar {  position: relative;  min-height: 50px;  margin-bottom: 20px;  border: 1px solid transparent;}</span>

原理分析：

而导航条的颜色都是通过“.navbar-default”来进行控制：

/*源码查看bootstrap.css文件第3940行～第3943行*/

<span style="color:#ff0000;">.navbar-default {  background-color: #f8f8f8;  border-color: #e7e7e7;}</span>

navbar-nav样式是在导航.nav的基础上重新调整了菜单项的浮动与内外边距。同时也不包括颜色等样式设置，源码请查看bootstrap.css文件第3785行～第3830行，我们把代码节选出来放入右侧bootstrap.css中。

而颜色和其他样式是通过配合父容器“navbar-default”来一起实现：

/*源码请查看bootstrap.css文件第3955行～第3974行*/

<span style="color:#990000;">.navbar-default .navbar-nav> li > a {  color: #777;}.navbar-default .navbar-nav> li >a:hover,.navbar-default .navbar-nav> li >a:focus {  color: #333;  background-color: transparent;}.navbar-default .navbar-nav> .active > a,.navbar-default .navbar-nav> .active >a:hover,.navbar-default .navbar-nav> .active >a:focus {  color: #555;  background-color: #e7e7e7;}.navbar-default .navbar-nav> .disabled > a,.navbar-default .navbar-nav> .disabled >a:hover,.navbar-default .navbar-nav> .disabled >a:focus {  color: #ccc;  background-color: transparent;}</span>

<span style="color:#990000;"></span>

<span style="color:#990000;"><img src="http://img.blog.csdn.net/20141120193146171?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDU3MDU1MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span>

<span style="color:#990000;">站内地址：</span>

<span style="color:#990000;">站外地址：bootstrap学习笔记之基础导航条  http://www.imooc.com/code/3111</span>