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

带表单的导航条

在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="#">&laquo;第一页</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="#">最后一页&raquo;</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="#">&laquo;上一页</a></li>
 <li><a href="#">下一页&raquo;</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基础教程 专题中，欢迎点击学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Bootstrap  # 导航条  # Bootstrap导航条鼠标悬停下拉菜单  # bootstrap导航条实现代码  # Bootstrap CSS组件之导航条(navbar)  # Bootstrap导航条的使用和理解3  # JS组件Bootstrap导航条使用方法详解  # Bootstrap入门书籍之（五）导航条、分页导航  # Bootstrap每天必学之导航条  # 第一次接触神奇的Bootstrap导航条  # 全面接触神奇的Bootstrap导航条实战篇  # Bootstrap导航条学习使用(一)  # 关键词  # 分页  # 表单  # 基础上  # 要在  # 我们可以  # 宽屏  # 值为  # 都是  # 是在  # 平铺  # 下一页  # 上一页  # 只需  # 中文网  # 请输入  # 这种情况  # 关于我们  # 要将 

相关文章： 如何通过主机屋免费建站教程十分钟搭建网站？  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  西安专业网站制作公司有哪些,陕西省建行官方网站？  网站制作和推广的区别,想自己建立一个网站做推广，有什么快捷方法马上做好一个网站？  完全自定义免费建站平台：主题模板在线生成一站式服务  建站主机SSH密钥生成步骤及常见问题解答？  C#如何使用XPathNavigator高效查询XML  香港服务器租用每月最低只需15元？  建站与域名管理如何高效结合？  建站之星导航配置指南：自助建站与SEO优化全解析  高端智能建站公司优选：品牌定制与SEO优化一站式服务  建站主机与服务器功能差异如何区分？  济南网站制作的价格,历城一职专官方网站？  郑州企业网站制作公司,郑州招聘网站有哪些？  网站制作公司排行榜,四大门户网站排名？  ,购物网站怎么盈利呢？  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  实现点击下箭头变上箭头来回切换的两种方法【推荐】  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  如何用PHP工具快速搭建高效网站？  如何在阿里云购买域名并搭建网站？  广平建站公司哪家专业可靠？如何选择？  如何在云主机上快速搭建多站点网站？  Swift中循环语句中的转移语句 break 和 continue  网站制作与设计教程,如何制作一个企业网站，建设网站的基本步骤有哪些？  如何快速搭建FTP站点实现文件共享？  网站视频怎么制作,哪个网站可以免费收看好莱坞经典大片？  较简单的网站制作软件有哪些,手机版网页制作用什么软件？  网站图片在线制作软件,怎么在图片上做链接？  如何撰写建站申请书？关键要点有哪些？  实现虚拟支付需哪些建站技术支撑？  建站之星微信建站一键生成小程序+多端营销系统  整人网站在线制作软件,整蛊网站退不出去必须要打我是白痴才能出去？  如何做网站制作流程,*游戏网站怎么搭建？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  建站主机选购指南：核心配置优化与品牌推荐方案  建站主机与虚拟主机有何区别？如何选择最优方案？  个人摄影网站制作流程,摄影爱好者都去什么网站？  制作充值网站的软件,做人力招聘为什么要自己交端口钱？  建站上市公司网站建设方案与SEO优化服务定制指南  如何通过NAT技术实现内网高效建站？  ,在苏州找工作，上哪个网站比较好？  专业的网站制作设计是什么,如何制作一个企业网站，建设网站的基本步骤有哪些？  如何高效配置香港服务器实现快速建站？  建站之星价格显示格式升级，你的预算足够吗？  如何在景安服务器上快速搭建个人网站？  如何在局域网内绑定自建网站域名？  定制建站策划方案_专业建站与网站建设方案一站式指南  建站之星后台密码遗忘如何找回？