源码解读Bootstrap导航条
基础导航条
要制作一个基础导航条，要在制作导航的列表<ul>基础上添加类名“navbar-nav”，然后在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”。例如：
<div role="navigation"> <ul> <li><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 role="navigation"> <div> <a href="##">标题</a> </div> <ul> ... </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; }
带表单的导航条
在navbar容器中放置一个带有“navbar-form”类名的表单，例如：
<div role="navigation"> <ul> ... </ul> <form action="##" rol="search"> <div> <input type="text" placeholder="请输入关键词"/> </div> <button type="submit">搜索</button> </form> </div>
实现源码如下：
.navbar-form { padding: 10px 15px; margin-top: 8px; margin-right: -15px; margin-bottom: 8px; margin-left: -15px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); } @media (min-width: 768px) { .navbar-form .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .navbar-form .form-control { display: inline-block; width: auto; vertical-align: middle; } .navbar-form .form-control-static { display: inline-block; } .navbar-form .input-group { display: inline-table; vertical-align: middle; } .navbar-form .input-group .input-group-addon, .navbar-form .input-group .input-group-btn, .navbar-form .input-group .form-control { width: auto; } .navbar-form .input-group > .form-control { width: 100%; } .navbar-form .control-label { margin-bottom: 0; vertical-align: middle; } .navbar-form .radio, .navbar-form .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; } .navbar-form .radio label, .navbar-form .checkbox label { padding-left: 0; } .navbar-form .radio input[type="radio"], .navbar-form .checkbox input[type="checkbox"] { position: relative; margin-left: 0; } .navbar-form .has-feedback .form-control-feedback { top: 0; } } @media (max-width: 767px) { .navbar-form .form-group { margin-bottom: 5px; } .navbar-form .form-group:last-child { margin-bottom: 0; } } @media (min-width: 768px) { .navbar-form { width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; } }
“navbar-left”可以让导航条里的表单左浮动，“navbar-right”为右浮动。实现源码如下：
@media (min-width: 768px) { .navbar-left { float: left !important; } .navbar-right { float: right !important; } }
固定导航条