Bootstrap源码解读导航（6）

源码解读Bootstrap导航

基础样式

制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。例如：

<ul class="nav">
  <li><a href="##">1</a></li>
  <li><a href="##">2</a></li>
  <li><a href="##">3</a></li>
</ul>

实现源码：

.nav {
 padding-left: 0;
 margin-bottom: 0;
 list-style: none;
}
.nav> li {
 position: relative;
 display: block;
}
.nav> li > a {
 position: relative;
 display: block;
 padding: 10px 15px;
}
.nav> li >a:hover,
.nav> li >a:focus {
 text-decoration: none;
 background-color: #eee;
}
.nav>li.disabled> a {
 color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
 color: #999;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
 background-color: #eee;
 border-color: #428bca;
}
.nav .nav-divider {
 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;
}
.nav> li > a >img {
 max-width: none;
}

标签形tab导航

原导航“nav”上追加“nav-tabs”类名即可，例如：<ul class="nav nav-tabs">...</ul>。
实现原理是将菜单项（li）按块显示，并且让他们在同一水平上排列，然后定义非高亮菜单的样式和鼠标悬浮效果。实现源码如下：

.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}

要让哪个项是选中项，只需要在其标签上添加类名“class=”active”即可。
实现源码如下：

.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
 color: #555;
 cursor: default;
 background-color: #fff;
 border: 1px solid #ddd;
 border-bottom-color: transparent;
}

要让哪个项禁用，只需要在标签项上添加“class=”disabled”即可。实现源码如下：

.nav>li.disabled> a {
 color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
 color: #999;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}

胶囊形pills导航

原导航“nav”上追加“nav-pills”类名即可，例如：<ul class="nav nav-pills">...</ul>。
实现源码如下：

.nav-pills > li {
 float: left;
}
.nav-pills > li > a {
 border-radius: 4px;
}
.nav-pills > li + li {
 margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
 background-color: #428bca;
}

垂直导航

制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可。例如：
<ul class="nav nav-pills nav-stacked">...</ul>
垂直导航与胶囊形导航相比，主要是让导航项不浮动，让其垂直排列，然后给相邻导航项留有一定的间距。
实现源码如下：

.nav-stacked > li {
 float: none;
}
.nav-stacked > li + li {
 margin-top: 2px;
 margin-left: 0;
}

要在导航项之间加分隔线，在导航项之间加<li class=”nav-divider”></li>即可。
实现源码如下：

.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}

自适应导航

在“nav”上追加一个“nav-justified”类名即可。例如：<ul class="nav nav-justified">
实现原理是，列表<ul>上设置宽度为“100%”，然后每个菜单项<li>设置了“display:table-cell”，让列表项以模拟表格单元格的形式显示。实现源码如下：

.nav-justified {
 width: 100%;
}
.nav-justified > li {
 float: none;
}
.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-justified > li {
 display: table-cell;
 width: 1%;
 }
 .nav-justified > li > a {
 margin-bottom: 0;
 }
}

“nav-tabs”和“nav-justified”配合在一起使用就是自适应选项卡导航，实现源码如下：

.nav-tabs.nav-justified {
 width: 100%;
 border-bottom: 0;
}
.nav-tabs.nav-justified > li {
 float: none;
}
.nav-tabs.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li {
 display: table-cell;
 width: 1%;
 }
.nav-tabs.nav-justified > li > a {
 margin-bottom: 0;
 }
}
.nav-tabs.nav-justified > li > a {
 margin-right: 0;
 border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border: 1px solid #ddd;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li > a {
 border-bottom: 1px solid #ddd;
 border-radius: 4px 4px 0 0;
 }
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border-bottom-color: #fff;
 }
}

“nav-pills”和“nav-justified”配合在一起使用就是自适应胶囊型导航，原理同上。

导航加下拉菜单

导航加下拉菜单也就是二级导航，只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul下拉菜单即可。例如：

<ul class="nav nav-pills">
  <li><a href="##">首页</a></li>
  <li class="dropdown">
    <a href="##" class="dropdown-toggle" data-toggle="dropdown">数字<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="##">1</a></li>
      <li><a href="##">2</a></li>
    </ul>
  </li>
  <li><a href="##">关于我们</a></li>
</ul>

面包屑式Breadcrumb导航

面包屑不需要使用“nav”，一般作用是告诉用户现在所处页面的位置。为ol加入“breadcrumb”类名即可。例如：

<ol class="breadcrumb">
 <li><a href="#">111</a></li>
 <li><a href="#">222</a></li>
 <li class="active">333</li>
</ol>

实现源码如下：

.breadcrumb {
 padding: 8px 15px;
 margin-bottom: 20px;
 list-style: none;
 background-color: #f5f5f5;
 border-radius: 4px;
}
.breadcrumb > li {
 display: inline-block;
}
.breadcrumb > li + li:before {
 padding: 0 5px;
 color: #ccc;
 content: "/\00a0";
}
.breadcrumb > .active {
 color: #777;
}

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

# Bootstrap  # 导航  # Bootstrap每天必学之导航条  # Bootstrap实现响应式导航栏效果  # Bootstrap实现默认导航栏效果  # Bootstrap每天必学之导航  # 第一次接触神奇的Bootstrap菜单和导航  # Bootstrap导航栏各元素操作方法(表单、按钮、文本)  # Bootstrap每天必学之附加导航（Affix）插件  # 第一次接触神奇的Bootstrap导航条  # Bootstrap每天必学之响应式导航、轮播图  # Bootstrap多级导航栏(级联导航)的实现代码  # 只需  # 要在  # 面包屑  # 自适应  # 要让  # 菜单项  # 鼠标  # 不需要  # 基础上  # 才会  # 关于我们  # 另外一个  # 要将  # 所处  # 首页  # 让其  # 大家多多  # 选项卡  # 单元格  # 主要是 

相关文章： 如何用搬瓦工VPS快速搭建个人网站？  南京做网站制作公司,南京哈发网络有限公司，公司怎么样，做网页美工DIV+CSS待遇怎么样？  为什么Go需要go mod文件_Go go mod文件作用说明  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  ,网页ppt怎么弄成自己的ppt？  如何打造高效商业网站？建站目的决定转化率  赚钱网站制作软件,建一个网站怎样才能赚钱?是如何盈利的？  如何制作算命网站,怎么注册算命网站？  天津个人网站制作公司,天津网约车驾驶员从业资格证官网？  如何用wdcp快速搭建高效网站？  建站之星客服服务时间及联系方式如何？  如何选择高效可靠的多用户建站源码资源？  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  如何快速查询域名建站关键信息？  保定网站制作方案定制,保定招聘的渠道有哪些？找工作的人一般都去哪里看招聘信息？  如何通过VPS建站无需域名直接访问？  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  *服务器网站为何频现安全漏洞？  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  如何快速生成凡客建站的专业级图册？  如何规划企业建站流程的关键步骤？  浅谈Javascript中的Label语句  山东网站制作公司有哪些,山东大源集团官网？  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  建站主机选哪种环境更利于SEO优化？  css网站制作参考文献有哪些,易聊怎么注册？  网站app免费制作软件,能免费看各大网站视频的手机app？  网站制作服务平台,有什么网站可以发布本地服务信息？  网站制作公司广州有几家,广州尚艺美发学校网站是多少？  建站之星北京办公室：智能建站系统与小程序生成方案解析  如何高效配置香港服务器实现快速建站？  深圳 网站制作,深圳招聘网站哪个比较好一点啊？  如何快速搭建自助建站会员专属系统？  ,购物网站怎么盈利呢？  c++23 std::expected怎么用 c++优雅处理函数错误返回【详解】  网站制作费用多少钱,一个网站的运营，需要哪些费用？  建站主机服务器选型指南与性能优化方案解析  官网自助建站平台指南：在线制作、快速建站与模板选择全解析  c# 在高并发下使用反射发射（Reflection.Emit）的性能  免费ppt制作网站,有没有值得推荐的免费PPT网站？  如何获取上海专业网站定制建站电话？  子杰智能建站系统｜零代码开发与AI生成SEO优化指南  如何生成腾讯云建站专用兑换码？  陕西网站制作公司有哪些,陕西凌云电器有限公司官网？  建站之星如何实现PC+手机+微信网站五合一建站？  python的本地网站制作,如何创建本地站点？  如何快速生成ASP一键建站模板并优化安全性？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  青岛网站建设如何选择本地服务器？