พื้นฐานพับ
Collapsibles มีประโยชน์เมื่อคุณต้องการซ่อนและแสดงจำนวนมากของเนื้อหา:
ตัวอย่าง
<button data-toggle="collapse"
data-target="#demo">Collapsible</button>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> ลองตัวเอง» ตัวอย่างอธิบาย
.collapse ระดับบ่งชี้องค์ประกอบพับ (ก <div> ในตัวอย่างของเรา); นี้เป็นเนื้อหาที่จะแสดงหรือซ่อนด้วยการคลิกปุ่ม
ในการควบคุม (แสดง / ซ่อน) เนื้อหาพับเพิ่ม data-toggle="collapse" แอตทริบิวต์ไปยัง <a> หรือ <button> องค์ประกอบ แล้วเพิ่ม data-target="#id" แอตทริบิวต์การเชื่อมต่อปุ่มที่มีเนื้อหาที่พับ (<div id="demo">)
หมายเหตุ: สำหรับ <a> องค์ประกอบคุณสามารถใช้ href แอตทริบิวต์แทนของ data-target แอตทริบิวต์:
ตัวอย่าง
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> ลองตัวเอง» โดยค่าเริ่มต้นเนื้อหาพับถูกซ่อนอยู่ อย่างไรก็ตามคุณสามารถเพิ่ม .in ระดับเพื่อแสดงเนื้อหาโดยเริ่มต้น:
แผงพับ
ตัวอย่างต่อไปนี้แสดงให้เห็นแผงพับ:
ตัวอย่าง
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<div
class="panel-body">Panel Body</div>
<div
class="panel-footer">Panel Footer</div>
</div>
</div>
</div> ลองตัวเอง» พับกลุ่มรายการ
- หนึ่ง
- สอง
- สาม
ต่อไปนี้จะแสดงให้เห็นแผงพับกับกลุ่มรายการภายใน:
ตัวอย่าง
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<ul
class="list-group">
<li
class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div> ลองตัวเอง» หีบเพลง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงหีบเพลงง่ายโดยการขยายส่วนประกอบแผง
หมายเหตุ: ใช้ data-parent แอตทริบิวต์เพื่อให้แน่ใจว่าองค์ประกอบพับทั้งหมดภายใต้การปกครองที่ระบุจะถูกปิดเมื่อหนึ่งในรายการที่จะแสดงยุบ
ตัวอย่าง
<div class="panel-group" id="accordion">
<div class="panel
panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible
Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse
collapse in">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible
Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible
Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div> ลองตัวเอง» สมบูรณ์ Bootstrap อ้างอิงยุบ
สำหรับการอ้างอิงสมบูรณ์ของตัวเลือกยุบทั้งหมดวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap ยุบอ้างอิง JS