Bootstrap4 导航组件

导航组件的重要性

导航是网站和应用中最重要的组件之一，用于：

  • 提供清晰的网站结构和使用路径
  • 帮助用户快速找到所需内容
  • 组织复杂的内容和信息架构
  • 提升用户体验和网站可用性

基本导航

Bootstrap 4 提供了简单易用的导航组件，使用 .nav 类创建导航容器。

基本导航示例

基础导航

带图标的导航

<!-- 基础导航 -->
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">产品</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">服务</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">关于我们</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">联系我们</a>
  </li>
</ul>

<!-- 带图标的导航 -->
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <i class="fas fa-home mr-1"></i> 首页
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="fas fa-shopping-cart mr-1"></i> 产品
    </a>
  </li>
  <!-- 更多项目 -->
</ul>

导航样式

Bootstrap 4 提供了多种导航样式，包括选项卡式导航、胶囊式导航等。

导航样式示例

选项卡式导航

胶囊式导航

垂直胶囊导航

<!-- 选项卡式导航 -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">个人资料</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">消息</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
  </li>
</ul>

<!-- 胶囊式导航 -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">个人资料</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">消息</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
  </li>
</ul>

<!-- 垂直胶囊导航 -->
<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">个人资料</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">消息</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
  </li>
</ul>

动态选项卡

Bootstrap 4 的导航可以与内容区域结合，创建动态选项卡效果。

动态选项卡示例

基本选项卡

这是首页选项卡的内容。这里可以放置网站的主要信息和功能。

这是个人资料选项卡的内容。用户可以在这里查看和编辑个人信息。

这是联系我们选项卡的内容。用户可以在这里找到联系方式和反馈渠道。

胶囊式选项卡

这是胶囊式导航的首页选项卡内容。

这是胶囊式导航的个人资料选项卡内容。

这是胶囊式导航的联系我们选项卡内容。

<!-- 基本选项卡 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">首页</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">个人资料</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">联系我们</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <p class="mt-3">这是首页选项卡的内容。</p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p class="mt-3">这是个人资料选项卡的内容。</p>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <p class="mt-3">这是联系我们选项卡的内容。</p>
  </div>
</div>

<!-- 胶囊式选项卡 -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">首页</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">个人资料</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">联系我们</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <p>这是胶囊式导航的首页选项卡内容。</p>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <p>这是胶囊式导航的个人资料选项卡内容。</p>
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <p>这是胶囊式导航的联系我们选项卡内容。</p>
  </div>
</div>

导航对齐

Bootstrap 4 提供了多种导航对齐方式，包括居中对齐、右对齐等。

导航对齐示例

居中对齐导航

右对齐导航

垂直导航

<!-- 居中对齐导航 -->
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">产品</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">服务</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">关于我们</a>
  </li>
</ul>

<!-- 右对齐导航 -->
<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">产品</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">服务</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">关于我们</a>
  </li>
</ul>

<!-- 垂直导航 -->
<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">产品</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">服务</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">关于我们</a>
  </li>
</ul>

导航填充和等宽

Bootstrap 4 提供了导航填充和等宽选项，可以创建不同样式的导航布局。

导航填充和等宽示例

填充导航

等宽导航

带下拉菜单的导航

<!-- 填充导航 -->
<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">产品</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">服务</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">关于我们</a>
  </li>
</ul>

<!-- 等宽导航 -->
<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">产品</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">服务</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">关于我们</a>
  </li>
</ul>

<!-- 带下拉菜单的导航 -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">产品</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">产品一</a>
      <a class="dropdown-item" href="#">产品二</a>
      <a class="dropdown-item" href="#">产品三</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">所有产品</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">服务</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">关于我们</a>
  </li>
</ul>

自定义导航样式

通过自定义CSS，您可以创建独特的导航样式，以适应您的设计需求。

自定义导航样式示例

自定义样式导航

响应式导航

<!-- 自定义样式导航 -->
<style>
.custom-nav .nav-link {
  color: #6f42c1;
  transition: all 0.3s;
}

.custom-nav .nav-link:hover {
  color: #e83e8c;
  background-color: rgba(111, 66, 193, 0.1);
}

.custom-nav .nav-link.active {
  background-color: #6f42c1;
  color: white;
  border-radius: 4px;
}
</style>

<ul class="nav custom-nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <i class="fas fa-home mr-1"></i> 首页
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="fas fa-shopping-cart mr-1"></i> 产品
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="fas fa-concierge-bell mr-1"></i> 服务
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="fas fa-info-circle mr-1"></i> 关于我们
    </a>
  </li>
</ul>

<!-- 响应式导航 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">网站名称</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">产品</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">服务</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
    </ul>
  </div>
</nav>

最佳实践

使用导航组件的建议
  • 保持简洁 - 避免在导航中放置过多选项，保持导航简洁明了
  • 提供清晰的视觉指示 - 使用活动状态和悬停效果指示当前页面和可点击区域
  • 考虑可访问性 - 使用适当的ARIA属性，确保屏幕阅读器用户可以理解导航结构
  • 响应式设计 - 确保导航在不同设备上都能良好显示，特别是移动设备
  • 保持一致性 - 在整个应用中使用一致的导航样式和行为

学习完成！

您已经学会了Bootstrap 4中的导航组件使用方法。现在可以尝试在自己的项目中使用这些技术了。

继续学习下一章：Bootstrap 4 组件

上一章:Bootstrap4 折叠 下一章:Bootstrap4 导航栏