Bootstrap中怎么添加导航组件和选项卡组件？用法浅析

介绍

Bootstrap是一个流行的开源前端框架，它可以使开发人员快速创建美观，响应式和易于使用的Web应用程序或网站。Bootstrap包含许多可扩展的组件和插件，可以轻松地集成到HTML页面中。本文将介绍如何在Bootstrap中添加导航组件和选项卡组件。

导航组件

导航组件允许您在网站或应用程序中创建菜单和链接，用户可以单击链接导航到其他页面或区域。Bootstrap中的导航组件由以下类组成：navbar，nav，nav-item和nav-link。

Navbar组件

Navbar组件是一个水平导航栏，通常放置在网站的顶部。它包含一个标志，链接和可选的表单或其他内容。要创建Navbar，请使用以下HTML代码：

<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="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

上面的代码创建一个灰色背景的Navbar，并包含一个Logo和链接列表。在该代码中，我们使用了以下类：navbar，navbar-expand-lg，navbar-light和bg-light。navbar-expand-lg类用于指定Navbar将在大屏幕设备上展开。navbar-light类设置Navbar的背景颜色为淡色。bg-light类用于设置Navbar的背景颜色。

Nav组件

Nav组件是导航组件的一部分，用于创建链接列表。它可以是垂直或水平的，具体取决于您的布局需求。要创建一个Nav组件，请使用以下HTML代码：

<ul class="nav">

  <li class="nav-item">
    <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="#">Services</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
  </li>
</ul>

上面的代码创建了一个链接列表，使用了.nav和.nav-item类。

Nav-item和Nav-link组件

nav-item和nav-link是Nav组件的一部分，用于创建导航链接。nav-item类用于将链接包含在导航列表中，而nav-link类用于定义链接文本和目标URL。要使用nav-item和nav-link，请在Nav组件中使用以下HTML代码：

<li class="nav-item">

  <a class="nav-link" href="#">Home</a>
</li>

上面的代码创建了一个带有名称“Home”的链接，该链接指向Web应用程序的主页。

选项卡组件

选项卡组件允许您在同一页面上显示多个内容区域。它由以下类组成：nav，nav-item和nav-link，以及tab-pane和tab-content。

Nav组件

Nav组件用于创建选项卡列表。它与导航组件中的Nav组件相同。要创建Nav组件，请使用以下HTML代码：

<ul class="nav nav-tabs">

  <li class="nav-item">
    <a class="nav-link active" href="#tab1" data-toggle="tab">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#tab2" data-toggle="tab">Tab 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#tab3" data-toggle="tab">Tab 3</a>
  </li>
</ul>

上面的代码创建了一个带有三个选项卡的选项卡列表。 .nav-tabs 类是一个必需的类，用于呈现选项卡。

Nav-item和Nav-link组件

Nav-item和Nav-link组件用于创建选项卡的命名和链接。要使用Nav-item和Nav-link，请使用以下HTML代码：

<li class="nav-item">

   <a class="nav-link active" href="#tab1" data-toggle="tab">Tab 1</a>
</li>

上面的代码创建了一个名为“Tab 1”的选项卡链接。

Tab-pane和Tab-content组件

Tab-pane和Tab-content组件用于呈现选项卡内容。要使用Tab-pane和Tab-content，请使用以下HTML代码：

<div class="tab-content">

  <div class="tab-pane fade show active" id="tab1">
    <p>This is Tab 1 content.</p>
  </div>
  <div class="tab-pane fade" id="tab2">
    <p>This is Tab 2 content.</p>
  </div>
  <div class="tab-pane fade" id="tab3">
    <p>This is Tab 3 content.</p>
  </div>
</div>

上面的代码包含三个Tab-pane和Tab-content组件，分别是“Tab 1”，“Tab 2”和“Tab 3”的内容。类“tab-content”是必须的，以便呈现选项卡内容。

总结

通过本文，您应该能够在Bootstrap中添加导航组件和选项卡组件。导航组件和选项卡组件可以大大改善您的网站或应用程序的用户界面，使其更易于导航和更易于使用。使用Bootstrap的组件和插件可以帮助您快速构建现代Web应用程序，同时不需要编写很多CSS代码。