Bootstrap ดรอปดาวน์
ดรอปดาวน์พื้นฐาน
เมนูแบบเลื่อนลงเป็นเมนูที่สลับได้ซึ่งให้ผู้ใช้เลือกค่าหนึ่งจากรายการที่กำหนดไว้ล่วงหน้า:
ตัวอย่าง
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
ตัวอย่างที่อธิบาย
คลาส.dropdownระบุเมนูแบบเลื่อนลง
หากต้องการเปิดเมนูแบบเลื่อนลง ให้ใช้ปุ่มหรือลิงก์ที่มีคลาสของ.dropdown-toggleและ
data-toggle="dropdown"แอตทริบิวต์
ชั้น.caretเรียนสร้างไอคอนลูกศรคาเร็ต () ซึ่งระบุว่าปุ่มเป็นแบบดรอปดาวน์
เพิ่ม.dropdown-menuคลาสให้กับ<ul>องค์ประกอบเพื่อสร้างเมนูดรอปดาวน์จริงๆ
ตัวแบ่งแบบเลื่อนลง
คลาส.dividerนี้ใช้เพื่อแยกลิงก์ภายในเมนูดรอปดาวน์ที่มีเส้นขอบแนวนอนแบบบาง:
ตัวอย่าง
<li class="divider"></li>
ส่วนหัวแบบเลื่อนลง
คลาส.dropdown-headerนี้ใช้เพื่อเพิ่มส่วนหัวภายในเมนูดรอปดาวน์:
ตัวอย่าง
<li class="dropdown-header">Dropdown header 1</li>
ปิดการใช้งานและใช้งานรายการ
เน้นรายการดรอปดาวน์เฉพาะด้วยคลาส .active (เพิ่มสีพื้นหลังสีน้ำเงิน)
หากต้องการปิดใช้งานรายการในเมนูแบบเลื่อนลง ให้ใช้.disabledคลาส (ได้ข้อความสีเทาอ่อนและไอคอน "ห้ามจอดรถ" เมื่อวางเมาส์เหนือ):
ตัวอย่าง
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
ตำแหน่งดร็อปดาวน์
หากต้องการจัดแนวดรอปดาวน์ให้ชิดขวา ให้เพิ่ม.dropdown-menu-rightคลาสลงในองค์ประกอบด้วย .dropdown-menu:
ตัวอย่าง
<ul class="dropdown-menu dropdown-menu-right">
Dropup
หากคุณต้องการให้เมนูแบบเลื่อนลงขยายขึ้นแทนที่จะขยายลง ให้เปลี่ยนองค์ประกอบ <div> ด้วย class="dropdown" เป็น"dropup":
ตัวอย่าง
<div class="dropup">
การเข้าถึงแบบเลื่อนลง
เพื่อช่วยปรับปรุงการเข้าถึงสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ คุณควรรวมสิ่งต่อไปนี้roleและaria-*แอตทริบิวต์เมื่อสร้างเมนูดรอปดาวน์:
ตัวอย่าง
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
อ้างอิง Bootstrap ดรอปดาวน์ที่สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกดร็อปดาวน์ เมธอด และเหตุการณ์ทั้งหมด ไปที่ Bootstrap JS Dropdown Referenceของเรา