引导 2 行菜单 - Html

在网页设计中，导航栏是一个非常重要的元素，用于展示网站的主要功能和页面。Bootstrap提供了强大的导航栏组件，其中2行导航栏特别适合展示更多的信息。

HTML代码

以下是构建2行导航栏所需的基本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 justify-content-between" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Departments</a>
      </li>
    </ul>

    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Login</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Register</a>
      </li>
    </ul>
  </div>
</nav>

代码说明

• nav标签：表示导航栏。
• navbar类：Bootstrap的导航栏选项卡之一。
• navbar-expand-lg类：指定在视口宽度大于或等于992px时，导航菜单将展开（所有菜单项将可见）。
• navbar-light类：指定导航栏具有浅色背景和深色文本。
• bg-light类：指定导航栏具有浅色背景。
• navbar-brand类：用于容纳与品牌相关的内容。
• navbar-toggler类：当单击时，它可以将菜单项切换为可见<ul>元素。
• collapse navbar-collapse类：在移动设备中，自动隐藏导航栏。
• justify-content-between类：使菜单项分布在导航栏的左右两侧。
• navbar-nav类：容纳导航栏中的每个项目。
• nav-item类：标识它是导航栏中的菜单项之一。
• nav-link类：应用到<a>元素的类，以提供样式。
• data-toggle="collapse" data-target="#navbarNav"属性：位于button元素上，让按钮能够切换可见状态。#navbarNav表示要折叠的元素是具有“navbarNav”ID的div。

结论

2行导航栏可以增加网站对导航的可控性，同时更好的展示网站的信息。HTML的代码也很简单易懂。掌握这个知识后，你可以轻松构建出一个强大的2行菜单导航栏！