เลื่อนลงพื้นฐาน
มีเมนูแบบเลื่อนลงเป็นเมนู toggleable ที่ช่วยให้ผู้ใช้สามารถเลือกหนึ่งค่าจากรายการที่กำหนดไว้ล่วงหน้า:
ตัวอย่าง
<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 ชั้นจะใช้ในการเชื่อมโยงที่แยกต่างหากภายในเมนูแบบเลื่อนลงที่มีเส้นขอบแนวนอนบาง ๆ :
เลื่อนลงหัว
.dropdown-header ชั้นจะใช้ในการเพิ่มส่วนหัวภายในเมนูแบบเลื่อนลง:
ปิดการใช้งานรายการ
ปิดการใช้งานรายการในเมนูแบบเลื่อนลงให้ใช้ .disabled ระดับ:
ตำแหน่งเลื่อนลง
ขวาจัดแบบเลื่อนลงเพิ่ม .dropdown-menu-right ชั้นองค์ประกอบด้วย .dropdown เมนู:
Dropup
หากคุณต้องการเมนูแบบเลื่อนลงเพื่อขยายขึ้นแทนที่จะลดลงเปลี่ยน <div> องค์ประกอบที่มี class="dropdown" เพื่อ "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> ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »
กรอกแบบเลื่อนลง Bootstrap อ้างอิง
สำหรับการอ้างอิงที่สมบูรณ์ของทุกตัวเลือกแบบเลื่อนลงวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap JS เลื่อนลงอ้างอิง