Bootstrap源码解读导航条（7）

源码解读Bootstrap导航条

基础导航条

要制作一个基础导航条，要在制作导航的列表<ul class="nav">基础上添加类名“navbar-nav”，然后在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”。例如：

<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav">  <li class="active"><a href="##">首页</a></li>  <li><a href="##">网站内容</a></li>  <li><a href="##">关于我们</a></li> </ul></div>

“.navbar”样式的主要功能就是设置左右padding和圆角等效果，实现源码如下：

.navbar { position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent;}

导航条的颜色都是通过“.navbar-default”来进行控制，实现源码如下：

.navbar-default { background-color: #f8f8f8; border-color: #e7e7e7;}

“.navbar-nav”样式是在导航“.nav”的基础上重新调整了菜单项的浮动与内外边距。而颜色和其他样式是通过配合父容器“navbar-default”来一起实现。实现源码如下：

.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;}

导航条标题

通过“navbar-header”和“navbar-brand”来实现，例如：

<div class="navbar navbar-default" role="navigation"> 　<div class="navbar-header"> 　 <a href="##" class="navbar-brand">标题</a> 　</div> <ul class="nav navbar-nav">  ... </ul></div>

主要是加大了字体设置，并且设置了最大宽度，实现源码如下：

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

在默认导航条（navbar-default）下，对navbar-brand也做了颜色处理，实现源码如下：

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