ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap Dropdowns


เลื่อนลงพื้นฐาน

มีเมนูแบบเลื่อนลงเป็นเมนู 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 ชั้นจะใช้ในการเชื่อมโยงที่แยกต่างหากภายในเมนูแบบเลื่อนลงที่มีเส้นขอบแนวนอนบาง ๆ :

ตัวอย่าง

<li class="divider"></li>
ลองตัวเอง»

เลื่อนลงหัว

.dropdown-header ชั้นจะใช้ในการเพิ่มส่วนหัวภายในเมนูแบบเลื่อนลง:

ตัวอย่าง

<li class="dropdown-header">Dropdown header 1</li>
ลองตัวเอง»

ปิดการใช้งานรายการ

ปิดการใช้งานรายการในเมนูแบบเลื่อนลงให้ใช้ .disabled ระดับ:

ตัวอย่าง

<li class="disabled"><a href="#">CSS</a></li>
ลองตัวเอง»

ตำแหน่งเลื่อนลง

ขวาจัดแบบเลื่อนลงเพิ่ม .dropdown-menu-right ชั้นองค์ประกอบด้วย .dropdown เมนู:

ตัวอย่าง

<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>
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »


กรอกแบบเลื่อนลง Bootstrap อ้างอิง

สำหรับการอ้างอิงที่สมบูรณ์ของทุกตัวเลือกแบบเลื่อนลงวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap JS เลื่อนลงอ้างอิง