Bootstrap ต้องเรียนรู้ทุกวันปลั๊กอินการล่มสลาย

ปลั๊กอินยุบ ทำให้ง่ายต่อการพับพื้นที่หน้า ไม่ว่าคุณจะใช้มันเพื่อสร้างการนำทางที่ยุบหรือแผงเนื้อหาจะช่วยให้มีตัวเลือกเนื้อหาจำนวนมาก

หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินทีละรายการคุณจะต้องอ้างอิงการล่มสลาย js หรือตามที่กล่าวไว้ในบท ภาพรวมปลั๊กอิน bootstrap คุณสามารถอ้างอิง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js

1. การใช้งาน

ตารางต่อไปนี้แสดงรายการปลั๊กอินยุบสำหรับการจัดการการปรับขนาดหนัก:

คุณสามารถใช้ปลั๊กอินยุบได้สองวิธี:

ผ่านแอตทริบิวต์ข้อมูล: เพิ่ม data-toggle = "การล่มสลาย" และเป้าหมายข้อมูลให้กับองค์ประกอบเพื่อกำหนดตัวควบคุมให้กับองค์ประกอบที่ยุบได้โดยอัตโนมัติ คุณสมบัติเป้าหมายข้อมูลยอมรับตัวเลือก CSS และใช้เอฟเฟกต์การยุบกับมัน ตรวจสอบให้แน่ใจว่าได้เพิ่มคลาส. collapse ลงในองค์ประกอบที่พับได้ หากคุณต้องการให้เป็นค่าเริ่มต้นให้เพิ่มคลาสพิเศษใน.

ในการเพิ่มการจัดการการจัดกลุ่มแบบพับได้แบบพับได้ให้กับตัวควบคุมแบบพับได้ให้เพิ่มคุณสมบัติข้อมูล Data-Parent = "#selector"

ผ่าน JavaScript : วิธีการยุบสามารถเปิดใช้งานผ่าน JavaScript ดังที่แสดงด้านล่าง:

$ ('. ล่มสลาย'). การล่มสลาย ()

2. ตัวอย่าง

เนื้อหาสามารถยุบได้โดยคลิก

// ตัวอย่างพื้นฐาน

 <button data-toggle = "ล่มสลาย" data-target = "#content"> bootstrap </button> <div id = "เนื้อหา"> <div> bootstrap เป็นชุดเครื่องมือโอเพนซอร์สสำหรับการพัฒนาส่วนหน้าที่เปิดตัวโดย Twitter มันได้รับการพัฒนาโดยนักออกแบบ Twitter Mark Otto และ Jacob Thornton และเป็นกรอบ CSS/HTML ปัจจุบัน Bootstrap เวอร์ชันล่าสุดคือ 3.0 </div> </div>

// หีบเพลงพับ

 <div id = "หีบเพลง"> <div> <div> <h4> <a href = "#clolapseone" data-toggle = "การล่มสลาย" data-parent = "#accordion"> คลิกฉันเพื่อแสดงจากนั้นคลิกฉันเพื่อพับส่วนที่ 1 </a> </h4> </div> </div> </div> <div> <h4> <a href = "#clinpetwo" data-toggle = "ยุบ" data-parent = "#accordion"> คลิกฉันเพื่อแสดงจากนั้นคลิกฉันเพื่อพับส่วนที่ 2 </a> </h4> </div> </div> </div> <div> <div> <h4> <a href = "#clinpethree" data-toggle = "ยุบ" data-parent = "#accordion"> คลิกฉันเพื่อแสดงจากนั้นคลิกฉันเพื่อพับส่วนที่ 3 </a> </div> </div> </div> </div>

// แอคชั่นเอฟเฟกต์

 $ ('#collapseone,#clinpetwo,#clinpethree, #collapsefour'). การล่มสลาย ({parent: '#Accordion', สลับ: false,});

// โทรด้วยตนเอง

 $ ('ปุ่ม'). on ('คลิก', function () {$ ('#collapseOne'). การล่มสลาย ({toggle: true,});});

// วิธีการยุบยังมีพารามิเตอร์สามตัว: ซ่อนแสดงและสลับ

 $ ('#collapseOne'). การล่มสลาย ('ซ่อน'); $ ('#collapsetwo'). การล่มสลาย ('show'); $ ('ปุ่ม'). on ('คลิก', ฟังก์ชั่น () {$ ('#clolapseone').

มีเหตุการณ์สี่ประเภทในปลั๊กอินล่มสลาย

// เหตุการณ์ความคล้ายคลึงกันอื่น ๆ

 $ ('#collapseOne'). on ('show.bs.collapse', function () {Alert ('ฟรีเมื่อวิธีการแสดงเรียกว่า');});

ฉันหวังว่าบทความนี้จะเป็นประโยชน์และเป็นแรงบันดาลใจในการเรียนรู้เกี่ยวกับปลั๊กอิน Bootstrap Collapse