Bootstrap 4 ดรอปดาวน์
ดรอปดาวน์พื้นฐาน
เมนูแบบเลื่อนลงเป็นเมนูที่สลับได้ซึ่งให้ผู้ใช้เลือกค่าหนึ่งจากรายการที่กำหนดไว้ล่วงหน้า:
ตัวอย่าง
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
ตัวอย่างที่อธิบาย
คลาส.dropdownระบุเมนูแบบเลื่อนลง
หากต้องการเปิดเมนูแบบเลื่อนลง ให้ใช้ปุ่มหรือลิงก์ที่มีคลาสของ.dropdown-toggleและ
data-toggle="dropdown"แอตทริบิวต์
เพิ่ม.dropdown-menuคลาสให้กับ<div>องค์ประกอบเพื่อสร้างเมนูดรอปดาวน์จริงๆ จากนั้นเพิ่ม
.dropdown-itemคลาสให้กับแต่ละองค์ประกอบ (ลิงก์หรือปุ่ม) ภายในเมนูแบบเลื่อนลง
ตัวแบ่งแบบเลื่อนลง
คลาส.dropdown-dividerนี้ใช้เพื่อแยกลิงก์ภายในเมนูดรอปดาวน์ที่มีเส้นขอบแนวนอนแบบบาง:
ตัวอย่าง
<div class="dropdown-divider"></div>
ส่วนหัวแบบเลื่อนลง
คลาส.dropdown-headerนี้ใช้เพื่อเพิ่มส่วนหัวภายในเมนูดรอปดาวน์:
ตัวอย่าง
<div class="dropdown-header">Dropdown header 1</div>
ปิดการใช้งานและใช้งานรายการ
เน้นรายการดรอปดาวน์เฉพาะกับ.activeชั้นเรียน (เพิ่มสีพื้นหลังสีน้ำเงิน)
หากต้องการปิดใช้งานรายการในเมนูแบบเลื่อนลง ให้ใช้.disabledคลาส (ได้ข้อความสีเทาอ่อนและไอคอน "ห้ามจอดรถ" เมื่อวางเมาส์เหนือ):
ตัวอย่าง
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
ตำแหน่งดร็อปดาวน์
คุณยังสามารถสร้างเมนู "dropright" หรือ "dropleft" โดยเพิ่ม คลาส .droprightor .dropleftลงในองค์ประกอบแบบเลื่อนลง โปรดทราบว่าเครื่องหมายรูปหมวก/ลูกศรจะถูกเพิ่มโดยอัตโนมัติ:
Dropright
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
เมนูแบบเลื่อนลง ขวา
หากต้องการจัดแนวเมนูแบบเลื่อนลงให้ชิดขวา ให้เพิ่ม.dropdown-menu-rightคลาสลงในองค์ประกอบด้วย .dropdown-menu:
ตัวอย่าง
<div class="dropdown-menu dropdown-menu-right">
Dropup
หากคุณต้องการให้เมนูแบบเลื่อนลงขยายขึ้นแทนที่จะขยายลง ให้เปลี่ยนองค์ประกอบ <div> ด้วย class="dropdown" เป็น"dropup":
ตัวอย่าง
<div class="dropup">
ข้อความแบบเลื่อนลง
คลาส.dropdown-item-textนี้ใช้เพื่อเพิ่มข้อความธรรมดาในรายการดรอปดาวน์ หรือใช้กับลิงก์สำหรับการกำหนดสไตล์ลิงก์เริ่มต้น
ตัวอย่าง
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
ปุ่มจัดกลุ่มพร้อมดรอปดาวน์
ตัวอย่าง
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
แยกปุ่มดรอปดาวน์
ตัวอย่าง
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
กลุ่มปุ่มแนวตั้งพร้อมดรอปดาวน์
ตัวอย่าง
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
ทำการอ้างอิงแบบหล่นลง Bootstrap 4 ให้สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกดร็อปดาวน์ เมธอด และเหตุการณ์ทั้งหมด ไปที่ Bootstrap 4 JS Dropdown Referenceของเรา