Bootstrap5中的Navs(导航) 和 Tabs(选项卡)组件

图片[1]-Bootstrap5中的Navs(导航) 和 Tabs(选项卡)组件-不止主题

Navs(导航)

Navs 是 Bootstrap 中的一个组件,用于创建水平或垂直的导航链接组。它可以用于创建主导航、面包屑导航、选项卡导航等。

基本用法

HTML 结构通常包括一个 <ul><div> 元素,其中包含多个 <li><a> 元素,每个元素代表一个导航项。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</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>
</ul>

类名解释

  • nav: 用于 <ul><div> 元素,表示这是一个导航组。
  • nav-item: 用于 <li> 元素,表示这是一个导航项。
  • nav-link: 用于 <a> 元素,表示这是一个导航链接。
  • active: 可选类,用于指示当前活动的导航链接。

垂直导航

要创建垂直导航,你可以添加 flex-column 类到 <ul><div> 元素上。

<ul class="nav flex-column">
  <!-- Nav items -->
</ul>

Tabs(选项卡)

Tabs 是另一种导航形式,允许用户在不同的内容区域之间切换。在 Bootstrap 5 中,Tabs 组件与 Navs 组件紧密结合,使用相同的 HTML 结构和类名。

基本用法

HTML 结构通常包括一个包含导航链接的 <ul><div>,以及一个或多个包含选项卡内容的 <div>

<!-- Navbar with tabs -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#home" data-bs-toggle="tab">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#features" data-bs-toggle="tab">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#pricing" data-bs-toggle="tab">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Tab contents -->
<div class="tab-content">
  <div class="tab-pane active" id="home">
    <!-- Content for Home tab -->
  </div>
  <div class="tab-pane" id="features">
    <!-- Content for Features tab -->
  </div>
  <div class="tab-pane" id="pricing">
    <!-- Content for Pricing tab -->
  </div>
</div>

类名解释

  • tab-content: 用于包含所有选项卡内容的 <div> 元素。
  • tab-pane: 用于每个选项卡内容的 <div> 元素。
  • active: 用于指示哪个选项卡内容应该是默认显示的。

JavaScript 交互

为了使 Tabs 正常工作,你需要引入 Bootstrap 的 JavaScript 插件。

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>

总结

Bootstrap 5 中的 Navs 和 Tabs 提供了灵活且易于使用的工具,以创建各种类型的导航结构。通过简单的 HTML 结构和类名,你可以快速构建出美观且功能丰富的导航和选项卡界面。此外,结合 Bootstrap 的 JavaScript 插件,你可以实现更多高级的交互效果。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容