Bootstrap 导航元素学习笔记

Bootstrap 导航元素是构建网站导航栏或选项卡的重要组件。在 Bootstrap 中，导航元素包括导航条、选项卡和面包屑导航。

导航条

基本结构

Bootstrap 导航条的基本结构如下所示：

htmlCopy Code
<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>

其中，.navbar 类用于标识导航条的容器，.navbar-brand 类用于标识导航条中的品牌（通常是网站 LOGO），.navbar-toggler 类用于标识导航条的折叠按钮，.navbar-nav 类用于标识导航条中的菜单。

实例

以下是一个简单的 Bootstrap 导航条实例：

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

选项卡

基本结构

Bootstrap 选项卡的基本结构如下所示：

htmlCopy Code
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab"
      href="#home" role="tab" aria-controls="home"
      aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab"
      href="#profile" role="tab" aria-controls="profile"
      aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab"
      href="#contact" role="tab" aria-controls="contact"
      aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" 
    aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel"
    aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel"
    aria-labelledby="contact-tab">...</div>
</div>

其中，.nav 和 .nav-tabs 类用于标识选项卡的容器，.nav-link 类用于标识各个选项卡，.tab-pane 类用于标识每个选项卡对应的内容。

实例

以下是一个简单的 Bootstrap 选项卡实例：

htmlCopy Code
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab"
      href="#home" role="tab" aria-controls="home"
      aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab"
      href="#profile" role="tab" aria-controls="profile"
      aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab"
      href="#contact" role="tab" aria-controls="contact"
      aria-selected="false">Contact</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>Welcome to my home page!</p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" 
    aria-labelledby="profile-tab">
    <p>Here is some information about me.</p>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel"
    aria-labelledby="contact-tab">
    <p>You can contact me at:</p>
    <ul>
      <li>Email: john@example.com</li>
      <li>Phone: 555-1234</li>
    </ul>
  </div>
</div>

面包屑导航

基本结构

Bootstrap 面包屑导航的基本结构如下所示：

htmlCopy Code
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

其中，.breadcrumb 类用于标识面包屑导航的容器，.breadcrumb-item 类用于标识各个面包屑，.active 类用于标识当前面包屑。

实例

以下是一个简单的 Bootstrap 面包屑导航实例：

htmlCopy Code
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item active" aria-current="page">Shoes</li>
  </ol>
</nav>

以上就是 Bootstrap 导航元素的基本使用方法和实例。通过学习和使用这些组件，可以轻松构建出美观、易用的网站导航栏和选项卡。