Bootstrap每天必学之导航条

什么是导航条？

导航条是指用于网站或应用程序的主要导航展示的水平条，通常包含网站的标志、菜单和其他导航链接。

Bootstrap导航条

Bootstrap是一个广泛使用的前端框架，提供了许多基本的UI组件，其中之一就是导航条。使用Bootstrap可以轻松创建具有响应式布局的漂亮的导航条，并使网站风格统一。

创建基本导航条

下面是一个基本的Bootstrap导航条代码示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</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</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

在上面的代码中，我们使用了Bootstrap的导航条组件navbar，并使用了navbar-expand-lg、navbar-light和bg-light类来定义导航条的样式。导航条包含品牌Logo和导航链接。当屏幕宽度小于lg设定的范围时，导航条的内容会折叠，可以通过点击三横杠按钮展开。

水平和竖直导航条

Bootstrap提供了两种常见的导航条形式：水平和竖直。水平导航条通常用于网站的顶部或底部，而竖直导航条通常放置在网站的侧边栏。

水平导航条

下面是一个水平导航条的示例代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search"
        aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

与之前的示例相比，我们在导航条的右侧添加了一个搜索框与搜索按钮。

竖直导航条

下面是一个竖直导航条的示例代码：

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 d-none d-md-block bg-light sidebar">
      <div class="sidebar-sticky">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#">Dashboard</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Orders</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Customers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Reports</a>
          </li>
        </ul>
    </nav>
    <main role="main" class="col-md-9 ml-sm-auto col-lg-9 px-4">
      <h1>Page content</h1>
    </main>
  </div>
</div>

在这个示例中，我们创建了一个竖直导航条并将其放入侧边栏。导航条中的链接指向特定的网页，点击链接会刷新相应的页面。

结论

使用Bootstrap的导航条组件可以快速创建漂亮且响应式的导航条。我们可以使用navbar、mr-auto、form-inline等类来定义导航条的样式，并可以创建水平和竖直导航条，以适应不同的布局需求。