首页 Bootstrap5组件手册

HTML格式：
<nav>    <!--导航栏主体-->
  <span></span>   <!--可选，LOGO位置，也可以用<a>代替-->
  <ul>
    <li>
      <a href="#"></a>  <!--导航栏链接-->
    </li>
  </ul>
</nav>

=======================================================
<nav>
基础类：
.navbar

组合类：
.bg-*                     背景颜色
.justify-content-center      居中对齐
.fixed-top                   顶部固定（悬浮）
.fixed-bottom                底部固定（悬浮）

组合类：（单选，根据背景色选择）
.navbar-light                深色文字（暗色背景，附加）
.navbar-dark                 浅色文字（浅色背景，附加）

组合类：（单选）
.navbar-expand-sm            平板 - 屏幕宽度大于 576px 平铺
.navbar-expand-md            桌面显示器 - 屏幕宽度大于 768px 平铺
.navbar-expand-lg            大桌面显示器 - 屏幕宽度大于 992px 平铺
.navbar-expand-xl            特大桌面显示器 - 屏幕宽度大于 1200px 平铺
.navbar-expand-xxl           超大桌面显示器 - 屏幕宽度大于 1400px 平铺
注：不加该类，导航栏默认是垂直的


=======================================================
<span><a>
基础类：
.navbar-brand     高亮显示


=======================================================
<ul>
基础类：
.navbar-nav    


=======================================================
<li>
基础类：
.nav-item


=======================================================
<a>
基础类：
.nav-link     链接样式

组合类：
.active       选中高亮
.disabled     禁用，不可点击

<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
  <span class="navbar-brand">LOGO</span>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">链接1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">链接2</a>
    </li>
  </ul>
</nav>

HTML格式：
<nav>             <!--导航栏主体-->
  <span></span>   <!--可选，LOGO位置，也可以用<a>代替-->
  <button>        <!--折叠按钮-->
    <span></span> <!--折叠按钮图标-->
  </button>
  <div>           <!--关联折叠按钮-->
    <ul>
      <li>
        <a href="#"></a>  <!--导航栏链接-->
      </li>
    </ul>
  </div>
</nav>


=======================================================
<button>
基础类：
.navbar-toggler

自定义属性：
data-bs-toggle="collapse"     展开（单击折叠按钮展开导航项）
data-bs-target="#id"          关联导航链接div（id值）


内嵌<span>
基础类：
.navbar-toggler-icon         折叠按钮图标


=======================================================
<div>
基础类：
.collapse
.navbar-collapse

组合类：
.justify-content-end     <ul>右对齐

属性：
id=""      与 <button>data-bs-target 关联

<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
  <span class="navbar-brand">LOGO</span>
  <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarcaidan">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarcaidan">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">链接1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接2</a>
      </li>
    </ul>
  </div>
</nav>

注：
1.navbar-expand-sm 屏幕宽度小于576px时，折叠
2.data-bs-target="#navbarcaidan" 关联 id="navbarcaidan"

  
HTML格式：
<nav>    <!--导航栏主体-->
  <span></span>   <!--可选，LOGO位置，也可以用<a>代替-->
  <ul>
    <li>
      <a href="#"></a>  <!--下拉按钮-->
      <div>            <!--下拉菜单-->
        <a href="#"></a>   <!--下拉菜单项-->
      </div>
    </li>
  </ul>
</nav>


=======================================================
对应“下拉菜单”：

<div>                 <!--下拉主体，对应 <li>-->
  <button></button>   <!--按钮，对应 <a>-->
  <ul>                <!--菜单主体，对应 <div>-->
    <li></li>         <!--菜单项，对应 <a>-->
  </ul>
</div>

<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">链接1</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">链接2</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">项1</a>
        <a class="dropdown-item" href="#">项2</a>
        <a class="dropdown-item" href="#">项3</a>
      </div>
    </li>
  </ul>
</nav>