รายการดรอปดาว Bootstrap 5

รายการดรอปดาวพื้นฐาน

เมนูดรอปดาวเป็นเมนูที่สามารถเปิดปิดได้ ซึ่งอนุญาตให้ผู้ใช้เลือกค่าจากรายการที่กำหนดไว้เนื่องตามรายการ

ตัวอย่าง

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    ปุ่มดรอปดาว
  </button>
  <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>
</div>

ทดสอบเองเลย

ตัวอย่างการอธิบาย

.dropdown เพื่อเปิดเมนูดรอปดาว

เพื่อเปิดเมนูดропดาว โปรดใช้ที่ที่ตั้งค่าคลาสที่ชี้ถึงเมนูดรอปดาว .dropdown-toggle 类和 คลาสและ data-toggle="dropdown"

ปุ่มหรือลิงก์ที่มีคุณสมบัติ .dropdown-menu คลาสเพิ่มไปใน <div> องค์ประกอบ，สามารถสร้างแถวดดลงมาได้ทางที่แท้จริง. .dropdown-item คลาสเพิ่มไปในองค์ประกอบทุกตัวในแถวดดมีนามเมนู (ลิงก์หรือปุ่ม)

เส้นแบ่งแถวดดลงมา

.dropdown-divider คลาสใช้เพื่อแบ่งของแถวดดมีนามเมนูด้วยเส้นใต้ระดับน้ำตาล:

ตัวอย่าง

<li><hr class="dropdown-divider"></hr></li>

ทดสอบเองเลย

หัวข้อแถวดดลงมา

.dropdown-header คลาสใช้เพื่อเพิ่มหัวข้อในแถวดดมีนามเมนู:

ตัวอย่าง

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

ทดสอบเองเลย

รายการที่ไม่ใช้งานและที่กำลังใช้งาน

ใช้ .active คลาสเพื่อเน้นย้ำรายการแถวดดเฉพาะ (เพิ่มสีพื้นหลังสีสนิท)

ถ้าคุณต้องการที่จะทำให้รายการใดในแถวดดลงมาไม่ใช้งาน โปรดใช้ .disabled คลาส (ที่ได้รับสีขาวหมายและไอคอน "no-parking-sign" ขณะเลื่อนเมาะ)

ตัวอย่าง

<li><a class="dropdown-item" href="#">ปกติ</a></li>
<li><a class="dropdown-item active" href="#">ที่กำลังใช้งาน</a></li>
<li><a class="dropdown-item disabled" href="#">ไม่ใช้งาน</a></li>

ทดสอบเองเลย

ตำแหน่งแถวดดลงมา

คุณยังสามารถ .dropend หรือ .dropstart เพิ่มคลาสเข้าไปในองค์ประกอบแถวดดเพื่อสร้าง "dropend" หรือ "dropstart" มีนามเมนู. โปรดจำไว้ว่า สัญญาณและแหวนปรากฏอัตโนมัติ:

Dropright

<div class="dropdown dropend">

ทดสอบเองเลย

Dropleft

<div class="dropdown dropstart">

ทดสอบเองเลย

แถวดดลงมาขึ้นด้านขวา

ถ้าคุณต้องการให้แถวดดลงมาขึ้นด้านขวา โปรดเปลี่ยน .dropdown-menu-end คลาสเพิ่มไปใน .dropdown-menu ของอันเดียวได้:

ตัวอย่าง

<div class="dropdown-menu dropdown-menu-end">

ทดสอบเองเลย

แถวดดขึ้น

หากคุณต้องการให้แถวดดลงขึ้นแทนที่จะลงลงมา โปรดเปลี่ยน <div class="dropdown"> ให้เป็น "dropup"：

ตัวอย่าง

<div class="dropup">

ทดสอบเองเลย

ข้อความดประโยง

.dropdown-item-text คลาสใช้เพื่อเพิ่มข้อความสั้นในรายการดประโยง หรือใช้เพื่อเพิ่มสไตล์ลิงก์โดยมาตรฐานสำหรับลิงก์

ตัวอย่าง

<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>
  <li><a class="dropdown-item-text" href="#">ลิงก์ข้อความ</a></li>
  <li><span class="dropdown-item-text">ข้อความสั้น</span></li>
</ul>

ทดสอบเองเลย

การเชื่อมโยงปุ่มและรายการดประโยค

ตัวอย่าง

<div class="btn-group">
  <button type="button" class="btn btn-primary">หวายหวาน</button>
  <button type="button" class="btn btn-primary">เจียงหวัง</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">เซาะมี</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">มือถือ</a></li>
      <li><a class="dropdown-item" href="#">ตั้งโปรเจค</a></li>
    </ul>
  </div>
</div>

ทดสอบเองเลย

การเชื่อมโยงปุ่มตั้งตำแหน่งและรายการดропดาว

ตัวอย่าง

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">หวายหวาน</button>
  <button type="button" class="btn btn-primary">เจียงหวัง</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">เซาะมี</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">มือถือ</a></li>
      <li><a class="dropdown-item" href="#">ตั้งโปรเจค</a></li>
    </ul>
  </div>
</div>

ทดสอบเองเลย