ການໃຊ້ບໍລິໂສ Bootstrap 5

导航栏

导航栏是位于页面顶部的导航页眉：

基础的导航栏

通过使用 Bootstrap，导航栏可以扩展或折叠，具体取决于屏幕大小。

ກະຕຸ້ນໃຊ້ .sticky-top ທີ່ບານນຳທາງຢືນຢັນ/ຢູ່ຂອງເວລາຂອງເວັກກາກບອກບານ: .navbar 类创建标准导航栏，然后是响应式折叠类：.navbar-expand-xxl|xl|lg|md|sm（在特大、超大、大、中型设备上水平排列，或小屏幕上垂直堆叠导航栏）。

如需在导航栏中添加链接，请使用 class="navbar-nav" 的

    元素（或
    ）。然后添加带有 .nav-item 类的
  • 元素，后跟带有 .nav-link 类的 元素：

    ຄວາມຄົງຄວາມສະແດງ

    ທ້າທາຍຕອນຕົ້ນ

    • 垂直导航栏

    删除 .navbar-expand-* 类可创建始终垂直的导航栏：

    ຄວາມຄົງຄວາມສະແດງ

    ທ້າທາຍຕອນຕົ້ນ

    居中的导航栏

    添加 .justify-content-center 类可将导航栏居中：

    ຄວາມຄົງຄວາມສະແດງ

    ທ້າທາຍຕອນຕົ້ນ

    彩色导航栏

    请使用任何 .bg-color 类来更改导航栏的背景颜色：

    • .bg-primary
    • .bg-success
    • .bg-info
    • .bg-warning
    • .bg-danger
    • .bg-secondary
    • .bg-dark
    • .bg-light

    ຄໍາແນະນຳ:ກະຕຸ້ນໃຊ້ .sticky-top ທີ່ບານນຳທາງຢືນຢັນ/ຢູ່ຂອງເວລາຂອງເວັກກາກບອກບານ: .navbar-dark បន្ថែមពណ៌បណ្តាញពណ៌សារដល់បរិក្ខារនៅក្នុងនាយកព្រម ឬប្រើ .navbar-light បន្ថែមពណ៌បណ្តាញស្រមោលក្រហម。

    ຄວາມຄົງຄວາມສະແດງ

    /* ខាងខាងខាងខាងខាង ពណ៌ត្ររាង ពណ៌សារ */
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </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">
        禁用
      </li>
    </ul>
  </div>
</nav>

    ທ້າທາຍຕອນຕົ້ນ

    活动/禁用状态：将 .active 类添加到 元素可突出显示当前链接，或添加 .disabled 类来指示链接不可点击。

    品牌 / 标志

    .navbar-brand 类用于突出显示页面的品牌/标志/项目名称：

    ຄວາມຄົງຄວາມສະແດງ

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

    ທ້າທາຍຕອນຕົ້ນ

    如果将 .navbar-brand 类与图像一起使用时，Bootstrap 5 将自动设置图像样式，在垂直方向适应导航栏。

    ຄວາມຄົງຄວາມສະແດງ

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    
      Avatar Logo 
    
  </div>
</nav>

    ທ້າທາຍຕອນຕົ້ນ

    导航栏文本

    ກະຕຸ້ນໃຊ້ .sticky-top ທີ່ບານນຳທາງຢືນຢັນ/ຢູ່ຂອງເວລາຂອງເວັກກາກບອກບານ: .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的内边距和文本颜色）。

    ຄວາມຄົງຄວາມສະແດງ

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    导航栏文本
  </div>
</nav>

    ທ້າທາຍຕອນຕົ້ນ

    很多时候，尤其是在小屏幕上，您希望隐藏导航链接并用一个按钮替代它们，并在单击该按钮时显示它们。

    ເພື່ອສ້າງການນຳທາງທີ່ສາມາດປິດ/ເປີດໄດ້ທີ່ບໍ່ມີການຕິດຕາມໄດ້ໃຊ້ເອກະສານທີ່ກໍານົດການຕິດຕາມອີກ class="navbar-toggler"、data-bs-toggle="collapse" ແລະ data-bs-target="#thetarget" ການລວມການຄອມມູນລະບົບການນຳທາງ (ການເຊື່ອມຕໍ່ອີງ ແລະ ອີງຕາມ) class="collapse navbar-collapse" ຂອງ <div> ສະຖານທີ່，ຕໍ່ມາມີການຕິດຕາມກັບຄຳສັ່ງ data-bs-target ການຕິດຕາມ id：thetarget"。

    ຄວາມຄົງຄວາມສະແດງ

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-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>
      </ul>
    </div>
  </div>
</nav>

    ທ້າທາຍຕອນຕົ້ນ

    ຄໍາແນະນຳ:ທ່ານສາມາດລຶບອອກ: .navbar-expand-md ປະເພດທີ່ຈະປິດຫົວລະບຽບບານນຳແລ້ວແລະສະແດງຫົວລະບຽບປ່ຽນສະໜາມ

    ບານນຳແລ້ວອອກມາ

    ບານນຳແລ້ວສາມາດມີຫົວລະບຽບອອກມາ:

    ຄວາມຄົງຄວາມສະແດງ

    <li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">ອອກມາຫົວລະບຽບ</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">ການເຊື່ອມຕໍ່</a></li>
    <li><a class="dropdown-item" href="#">ການເຊື່ອມຕໍ່ອື່ນ</a></li>
    <li><a class="dropdown-item" href="#">ການເຊື່ອມຕໍ່ທີສາມ</a></li>
  </ul>
</li>

    ທ້າທາຍຕອນຕົ້ນ

    ບານນຳແລ້ວພາບລວມແລະຫົວລະບຽບ

    ທ່ານສາມາດເພີ່ມຟອມບັນຍາການໃນບານນຳແລ້ວ:

    ຄວາມຄົງຄວາມສະແດງ

    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">ການເຊື່ອມ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">ການເຊື່ອມ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">ການເຊື່ອມ</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>

    ທ້າທາຍຕອນຕົ້ນ

    ບານນຳທາງສະແດງຢືນຢັນ

    ບານນຳທາງສະແດງຢູ່ດ້ານສູງສຸດຫລືລຸ່ມຂອງເວລາ:

    ບານນຳທາງຢືນຢັນຈະຢູ່ທີ່ສະຖານະຖານອັນດັບຂອງເວລາ (ສູງສຸດຫລືລຸ່ມ) ແລະຈະຢູ່ທີ່ສະຖານະຖານອັນດັບຂອງເວລາຫລືລຸ່ມ:

    .fixed-top ປະເພດນີ້ເຮັດໃຫ້ບານນຳທາງຢືນຢັນຢູ່ດ້ານສູງສຸດຂອງເວລາ:ຕາເວັນຕົກ:

    ຄວາມຄົງຄວາມສະແດງ

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

    ທ້າທາຍຕອນຕົ້ນ

    ກະຕຸ້ນໃຊ້ .fixed-bottom ທີ່ບານນຳທາງຢືນຢັນຢູ່ດ້ານລຸ່ມຂອງເວລາ:

    ຄວາມຄົງຄວາມສະແດງ

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

    ທ້າທາຍຕອນຕົ້ນ

    ກະຕຸ້ນໃຊ້ .sticky-top ທີ່ບານນຳທາງຢືນຢັນ/ຢູ່ຂອງເວລາຂອງເວັກກາກບອກບານ: .sticky-top ປະເພດນີ້ເຮັດໃຫ້ບານນຳທາງຢືນຢັນ/ຢູ່ຂອງເວລາຂອງເວັກກາກບອກບານ:ຕາເວັນຕົກ.

    ຄວາມຄິດ:ປະເພດນີ້ບໍ່ມີຜົນງານໃນ IE11 ແລະກ່ອນນີ້ (ຕັດສິນວ່າ) position:relative)

    ຄວາມຄົງຄວາມສະແດງ

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

    ທ້າທາຍຕອນຕົ້ນ