Bootstrap ยุบ
พับได้แบบพื้นฐาน
พับมีประโยชน์เมื่อคุณต้องการซ่อนและแสดงเนื้อหาจำนวนมาก:
ตัวอย่าง
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
ตัวอย่างที่อธิบาย
คลาส.collapseระบุองค์ประกอบที่ยุบได้ (a <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 id="demo" class="collapse in">
Lorem ipsum dolor text....
</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 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>
กลุ่มรายการที่ยุบได้
- One
- Two
- Three
ต่อไปนี้แสดงแผงที่ยุบได้โดยมีกลุ่มรายการอยู่ภายใน:
ตัวอย่าง
<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 Collapse Referenceของเรา