源码解读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多级导航栏(级联导航)的实现代码  # 只需  # 要在  # 面包屑  # 自适应  # 要让  # 菜单项  # 鼠标  # 不需要  # 基础上  # 才会  # 关于我们  # 另外一个  # 要将  # 所处  # 首页  # 让其  # 大家多多  # 选项卡  # 单元格  # 主要是 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  Firefox Developer Edition开发者版本入口  如何在服务器上三步完成建站并提升流量？  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  如何正确下载安装西数主机建站助手？  如何用花生壳三步快速搭建专属网站？  Android仿QQ列表左滑删除操作  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  如何做网站制作流程,*游戏网站怎么搭建？  如何为不同团队 ID 动态生成多个独立按钮  如何用景安虚拟主机手机版绑定域名建站？  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  iOS中将个别页面强制横屏其他页面竖屏  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  微信h5制作网站有哪些,免费微信H5页面制作工具？  如何实现建站之星域名转发设置？  如何续费美橙建站之星域名及服务？  Android利用动画实现背景逐渐变暗  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  Laravel怎么实现API接口鉴权_Laravel Sanctum令牌生成与请求验证【教程】  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  Laravel如何处理异常和错误？（Handler示例）  高性价比服务器租赁——企业级配置与24小时运维服务  HTML5建模怎么导出为FBX格式_FBX格式兼容性及导出步骤【指南】  Laravel观察者模式如何使用_Laravel Model Observer配置  网站制作软件有哪些,制图软件有哪些？  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  教你用AI润色文章，让你的文字表达更专业  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  Laravel如何集成第三方登录_Laravel Socialite实现微信QQ微博登录  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  bootstrap日历插件datetimepicker使用方法  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  Python自动化办公教程_ExcelWordPDF批量处理案例  如何用VPS主机快速搭建个人网站？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  如何快速搭建高效WAP手机网站？  Laravel如何升级到最新版本？（升级指南和步骤）  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  Laravel如何自定义错误页面（404, 500）？（代码示例）  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  如何用搬瓦工VPS快速搭建个人网站？  ,在苏州找工作，上哪个网站比较好？  安克发布新款氮化镓充电宝：体积缩小 30%，支持 200W 输出  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  Laravel如何使用Blade组件和插槽？（Component代码示例）