源码解读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;}带表单的导航条
在navbar容器中放置一个带有“navbar-form”类名的表单，例如：
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> ... </ul> <form action="##" class="navbar-form navbar-left" rol="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入关键词"/> </div> <button type="submit" class="btn btn-default">搜索</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; }}固定导航条
要将导航条固定在浏览器顶部或底部，只需要在制作导航条最外部容器navbar上追加对应的类名即可：
.navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部
例如：<div class="navbar navbar-default navbar-fixed-top" role="navigation">...</div>
实现原理就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed属性，并且设置navbar-fixed-top的top值为0,而navbar-fixed-bottom的bottom值为0。实现源码如下：
.navbar-fixed-top,.navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030;}@media (min-width: 768px) {.navbar-fixed-top,.navbar-fixed-bottom { border-radius: 0; }}.navbar-fixed-top { top: 0; border-width: 0 0 1px;}.navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border-width: 1px 0 0;}不过我们可以发现，页面主内容顶部和底部都被固定导航条给遮住了。我们可以在body上加上样式：padding-top: 70px;或padding-bottom: 70px;来避免这种情况。
响应式导航条
响应式导航条比较复杂，宽屏是水平平铺显示，窄屏时收缩垂直显示，使用方法如下：
1. 把在窄屏时需要折叠的内容包裹在带一个div内，并且为这个div追加“collapse”、“navbar-collapse”两个类名。最后为这个div添加一个class类名或者id名。
2. 定制在窄屏时要显示的图标样式。
3. 为button添加data-target=”.类名”或data-target=”#id名”，是类名还是id名由需要折叠的div来决定。
完整示例如下：
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 --> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 --> <a href="##" class="navbar-brand">Bootstrap中文网</a> </div> <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 --> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="##">Bootstrap2</a></li> <li><a href="##">Bootstrap3</a></li> <li><a href="##">Bootstrap4</a></li> <li><a href="##">网站实例</a></li> </ul> </div></div>
反色导航条
将navbar-deafult类名换成navbar-inverse即可。只是导航条的背景色和文本做了修改。
带页码的分页导航
在ul标签上加入pagination方法即可。例如：
<ul class="pagination"> <li><a href="#">«第一页</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="active"><a href="#">4</a></li> <li><a href="#">5</a></li> <li class="disabled"><a href="#">最后一页»</a></li></ul>
实现源码如下：
.pagination> .active > a,.pagination> .active > span,.pagination> .active >a:hover,.pagination> .active >span:hover,.pagination> .active >a:focus,.pagination> .active >span:focus {z-index: 2;color: #fff;cursor: default;background-color: #428bca;border-color: #428bca;}.pagination> .disabled > span,.pagination> .disabled >span:hover,.pagination> .disabled >span:focus,.pagination> .disabled > a,.pagination> .disabled >a:hover,.pagination> .disabled >a:focus {color: #999;cursor: not-allowed;background-color: #fff;border-color: #ddd;}在ul上追加“pagination-lg”可以让分页导航变大，“pagination-sm”可以让分页导航变小。实现源码如下：
.pagination-lg> li > a,.pagination-lg> li > span {padding: 10px 16px;font-size: 18px;}.pagination-lg>li:first-child> a,.pagination-lg>li:first-child> span {border-top-left-radius: 6px;border-bottom-left-radius: 6px;}.pagination-lg>li:last-child> a,.pagination-lg>li:last-child> span {border-top-right-radius: 6px;border-bottom-right-radius: 6px;}.pagination-sm> li > a,.pagination-sm> li > span {padding: 5px 10px;font-size: 12px;}.pagination-sm>li:first-child> a,.pagination-sm>li:first-child> span {border-top-left-radius: 3px;border-bottom-left-radius: 3px;}.pagination-sm>li:last-child> a,.pagination-sm>li:last-child> span {border-top-right-radius: 3px;border-bottom-right-radius: 3px;}翻页分页导航
为ul标签加入pager类即可。例如：
<ul class="pager"> <li><a href="#">«上一页</a></li> <li><a href="#">下一页»</a></li></ul>
实现源码如下：
.pager { padding-left: 0; margin: 20px 0; text-align: center; list-style: none;}.pager li { display: inline;}.pager li > a,.pager li > span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; border-radius: 15px;}.pager li > a:hover,.pager li > a:focus { text-decoration: none; background-color: #eee;}导航默认居中，如果要一个居左一个居右，可以在li分别上追加previous和next类名。实现源码如下：
.pager .next > a,.pager .next > span { float: right;}.pager .previous > a,.pager .previous > span { float: left;}本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
