Bootstrap 5 ການສະແດງການຄອມມູນຄວາມ

ການຕັ້ງພັກພາຍ

ຖ້າພວກເຮົາຕ້ອງສ້າງມີການຕັ້ງພັກພາຍຊັດເຊອິກ .nav 类添加到 <ul> ຫຼັກມົນລະພັດ ແລະ ສຳລັບແຕ່ລະ <li> ການເພີ່ມຫຼັກມົນລະພັດ .nav-item ແລະ .nav-link ປະເພດໃຫ້ທາງທາງເພີ່ມ

ຕົວຢ່າງ

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">链接</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">禁用</a>
  </li>
</ul>

ທໍາອິດຕິດຕາມພວກເຈົ້າ

ການຕັ້ງທີ່ພັກ

ເພີ່ມ .justify-content-center ປະເພດໃຫ້ການຕັ້ງທີ່ກາງ ເພີ່ມ .justify-content-end ປະເພດໃຫ້ການຕັ້ງທີ່ປອດໄພ

ຕົວຢ່າງ

<!-- ການຕັ້ງທີ່ກາງ -->
<ul class="nav justify-content-center">
<!-- ການຕັ້ງທີ່ປອດໄພ -->
<ul class="nav justify-content-end">

ທໍາອິດຕິດຕາມພວກເຈົ້າ

ເນື້ອໃນພັກພາຍ

ເພີ່ມ .flex-column 类可创建垂直导航：

ຕົວຢ່າງ

<ul class="nav flex-column">

ທໍາອິດຕິດຕາມພວກເຈົ້າ

选项卡

请使用 .nav-tabs 类将导航菜单转换为导航选项卡。并将 .active 类添加到活动/当前链接。如果您希望选项卡可切换，请参阅本页的最后一个例子。

ຕົວຢ່າງ

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">活动</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">禁用</a>
  </li>
</ul>

ທໍາອິດຕິດຕາມພວກເຈົ້າ

胶囊

使用 .nav-pills 类可将导航菜单设置为导航胶囊。如果您希望胶囊可切换，请参阅本页的最后一个例子。

ຕົວຢ່າງ

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">活动</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">禁用</a>
  </li>
</ul>

ທໍາອິດຕິດຕາມພວກເຈົ້າ

等宽的选项卡/胶囊导航

请使用 .nav-justified 类（等宽）对齐标签/胶囊：

ຕົວຢ່າງ

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

ທໍາອິດຕິດຕາມພວກເຈົ້າ

胶囊下拉菜单

ຕົວຢ່າງ

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">活动</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">链接 1</a></li>
      <li><a class="dropdown-item" href="#">链接 2</a></li>
      <li><a class="dropdown-item" href="#">链接 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">禁用</a>
  </li>
</ul>

ທໍາອິດຕິດຕາມພວກເຈົ້າ

选项卡下拉菜单

ຕົວຢ່າງ

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">活动</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">链接 1</a></li>
      <li><a class="dropdown-item" href="#">链接 2</a></li>
      <li><a class="dropdown-item" href="#">链接 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">禁用</a>
  </li>
</ul>

ທໍາອິດຕິດຕາມພວກເຈົ້າ

可切换的 / 动态选项卡

如需使选项卡可切换，请将 data-toggle="tab" 属性添加到每个链接。然后为每个选项卡添加有唯一 ID 的 .tab-pane 类，并将它们包装在带有 .tab-content 类的 <div> 元素中。

如果您希望选项卡在单击时能够淡入淡出，请将 .fade 类添加到 .tab-pane：

ຕົວຢ່າງ

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

ທໍາອິດຕິດຕາມພວກເຈົ້າ

ການນຳໃຊ້ສັດນິບສາຍເນັດສາມາດປ່ຽນແປງ / ການນຳໃຊ້ສັດນິບສາຍເນັດທີ່ສາມາດປ່ຽນແປງ

ການນຳໃຊ້ລະບົບສັດນິບສາຍເນັດຢູ່ບາງບ່ອນ; ພຽງແຕ່ປ່ຽນປະສົມປະເພດ data-toggle data-toggle="pill" ມັນຈະຕາມນັ້ນ:

ຕົວຢ່າງ

<!--ການນຳໃຊ້ສັດນິບສາຍເນັດ--->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">ຕອນຫາວາງ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">ຕອນເຖິງ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">ພູກູນ</a>
  </li>
</ul>
<!-- ໂອວດບັນນະພາບ -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

ທໍາອິດຕິດຕາມພວກເຈົ້າ