首页 Bootstrap5组件手册

HTML格式：
<ul>
  <li>
    <a href="#"></a>
  </li>
</ul>

==================================================
<ul>
基本类：
.nav

组合类：
.flex-column                垂直导航
.nav-tabs                   选项卡导航
.nav-pills                  胶囊导航

.nav-justified              等宽（链接按钮宽度）
.justify-content-center     居中
.justify-content-end        右对齐

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

==================================================
<a>
基本类：
.nav-link

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

简单的：
<ul class="nav bg-light">
  <li class="nav-item">
    <a class="nav-link" href="#">链接1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接3</a>
  </li>
</ul>






选项卡：
<ul class="nav nav-tabs bg-light ">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link " href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#tabs1">tabs1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#tabs2">tabs2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#tabs3">tabs3</a>
  </li>
</ul>

<div class="tab-content">
  <div id="tabs1" class="container tab-pane active">
    <h3>tabs1</h3>
    <p>内容</p>
  </div>
  <div id="tabs2" class="container tab-pane fade">
    <h3>tabs2</h3>
    <p>内容</p>
  </div>
  <div id="tabs3" class="container tab-pane fade">
    <h3>tabs3</h3>
    <p>内容</p>
  </div>
</div>