JS组件Bootstrap导航条使用方法详解

Bootstrap是一个流行的前端框架，为开发Web应用程序提供了大量的组件和工具。其中，导航条是一个非常重要的组件，它可以帮助用户快速浏览网站的不同部分。本文将详细讲解Bootstrap导航条的使用方法。

首先导入Bootstrap库

导航条是Bootstrap库的一部分，因此首先需要导入Bootstrap库。以下是基础模板代码，在head标签中加入以下代码即可。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

导航条基础用法

以下是Bootstrap导航条的基本模板。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

这个导航条是基于Bootstrap 4的。这个导航条有一个logo、一个颜色较浅的背景、展开按钮和菜单等。

懒人导航条

对于懒人，Bootstrap也提供了一个导航条模板。以下是懒人导航条的代码。

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor01">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

这个导航条与基本模板相似，但使用了更深的颜色，更加醒目。可以看到，懒人导航条的代码略微简单一些。

总结

Bootstrap有许多不同的导航条模板。本文介绍了两个基础模板：基础导航条和懒人导航条。这些导航条模板可以帮助你快速构建漂亮的、易于导航的网站。