Bootstrap 5 แถวตัวแนะนำ

แถวนำทาง

แถวนำทางเป็นหัวเรื่องนำทางที่ตั้งอยู่ที่ด้านบนของหน้าเว็บ

แถวนำทางพื้นฐาน

ด้วยการใช้ Bootstrap แถวนำทางสามารถขยายหรือบังคับตัวเองได้ จากขนาดหน้าจอ

ใช้ .navbar เพื่อสร้างแถวนำทางมาตรฐาน แล้วเพิ่มประเภทเซอร์เวิร์สที่ตอบสนองต่อการเปลี่ยนแปลงของหน้าจอ.navbar-expand-xxl|xl|lg|md|sm（เมื่อใช้เครื่องมือใหญ่ มหากาฬ ใหญ่ หรือขนาดปานกลางจะแสดงระดับน้ำตกแบบนอน หรือในหน้าจอขนาดเล็กจะแสดงแบบตั้งแต่น้ำเนียน）。

เพื่อเพิ่มลิงก์ในแถวนำทาง ใช้ class="navbar-nav" ของ <ul> องค์ประกอบ (หรือ <div>）。 หลังจากนั้นเพิ่มองค์ประกอบ .nav-item ของประเภท <li> องค์ประกอบที่ตามด้วย .nav-link ของประเภท <a> องค์ประกอบ

ตัวอย่าง

<!-- แถวนำทางน้ำเงินนวดในหน้าจอขนาดเล็กจะเปลี่ยนเป็นตั้งแต่น้ำเนียน -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- ลิงก์ -->
    <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>
      <li class="nav-item">
        <a class="nav-link" href="#">ลิงก์ 3</a>
      </li>
    </ul>
  </div>
</nav>

ทดสอบเองเลย

แถวนำทางตั้งแต่น้ำเนียน

ลบ .navbar-expand-* เพื่อสร้างแถวนำทางที่ตั้งแต่น้ำเนียนตลอดเวลา

ตัวอย่าง

<!-- แถวนำทางตั้งแต่น้ำเนียน -->
<nav class="navbar bg-light">
  ...
</nav>

ทดสอบเองเลย

แถวนำทางซ้ายฝั่ง

เพิ่ม .justify-content-center เพื่อซ้ายฝั่งแถวนำทาง

ตัวอย่าง

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

ทดสอบเองเลย

แถวนำทางสี

ใช้สีใดก็ได้ .bg-color เพื่อเปลี่ยนสีพื้นหลังของแถวนำทาง

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

คำแนะนำ:ใช้ .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">
        <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>
  </div>
</nav>
<!-- 黑色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 蓝色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

ทดสอบเองเลย

活动/禁用状态：将 .active 类添加到 <a> 元素可突出显示当前链接，或添加 .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">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

ทดสอบเองเลย

导航栏文本

ใช้ .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的内边距和文本颜色）。

ตัวอย่าง

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">导航栏文本</span>
  </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="ค้นหา">
        <button class="btn btn-primary" type="button">ค้นหา</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 ประเภทคลาสทำให้แถวนำทางถูกคงที่/อยู่บนหน้าเมื่อเคลื่อนไหวผ่านมันด้านบน.

หมายเหตุ：ประเภทนี้ไม่ทำงานใน IE11 และตัวรุ่นเก่ายิ่งกว่า (ใช้เป็น position:relative)

ตัวอย่าง

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

ทดสอบเองเลย