Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น ต่อไปผ่านบทความนี้ฉันจะแนะนำตัวอย่างการใช้ปลั๊กอินการพับของ bootstrap (ยุบ) มาดูกันเถอะ!
ปลั๊กอินยุบทำให้ง่ายต่อการพับพื้นที่หน้า ไม่ว่าคุณจะใช้มันเพื่อสร้างการนำทางที่ยุบหรือแผงเนื้อหาจะช่วยให้มีตัวเลือกเนื้อหาจำนวนมาก
หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิงการล่มสลาย js ในเวลาเดียวกันคุณต้องอ้างอิงปลั๊กอินการเปลี่ยนในเวอร์ชัน bootstrap ของคุณ หรือตามที่กล่าวไว้ในบทภาพรวมปลั๊กอิน Bootstrap คุณสามารถอ้างถึง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js
คุณสามารถใช้ปลั๊กอินยุบ:
สร้างการจัดกลุ่มหรือแผงพับพับได้ดังนี้:
<! doctype html> <html> <head> <dite> อินสแตนซ์ bootstrap - แผงพับ </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "Stylesheet"> <script src = "/scripts/jquery.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "หีบเพลง"> <dirm> <h4> <a data-toggle = "ยุบ" data-parent = "#accordion" href = "#collapseone"> คลิกฉัน ส่วนที่ 1 </a> </h4> </div> <div id = "clolapseone"> <div> nihil anim keffiyeh helvetica งานฝีมืองานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente ea proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "ล่มสลาย" data-parent = "#accordion" href = "#clinpetwo"> คลิกฉันเพื่อขยายฉันเพื่อยุบอีกครั้ง ส่วนที่ 2 </a> </h4> </div> <div id = "Clotapsetwo"> <div> nihil anim keffiyeh helvetica งานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente ea proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "การล่มสลาย" data-parent = "#accordion" href = "#clonpethree"> คลิกฉันเพื่อขยายให้ฉันคลิกเพื่อยุบอีกครั้ง ส่วนที่ 3 </a> </h4> </div> <div id = "clinpethree"> <div> nihil anim keffiyeh helvetica งานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente ea proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo. </div> </div> </div> </div> </body> </html>
ผลลัพธ์มีดังนี้:
data-toggle = "การล่มสลาย" ถูกเพิ่มไปยังลิงก์ไปยังส่วนประกอบที่คุณต้องการขยายหรือยุบ
คุณสมบัติ HREF หรือ Data-Darget จะถูกเพิ่มลงในส่วนประกอบหลักและค่าของมันคือ ID ขององค์ประกอบลูก
คุณสมบัติ ผู้ปกครองข้อมูล เพิ่ม ID ของแผงควบคุมที่ยุบไปยังลิงก์ของส่วนประกอบที่จะขยายหรือยุบ
สร้างส่วนประกอบที่สามารถยุบได้อย่างง่ายโดยไม่มีแท็กหีบเพลง ดังที่แสดงด้านล่าง:
<! doctype html> <html> <head> <head> <title> อินสแตนซ์บูต- ส่วนประกอบแบบพับได้ง่าย </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "Stylesheet"> <script src = "/scripts/jquery.min.min.min.min.min.min.min.min.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <button type = "button" data-toggle = "การล่มสลาย" data-target = "#demo"> ส่วนประกอบที่พับเก็บได้ง่าย </button> <div id = "demo"> nihil โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo. </div> </body> </html>
ผลลัพธ์มีดังนี้:
อย่างที่คุณเห็นในอินสแตนซ์เราสร้างส่วนประกอบที่พับเก็บได้ซึ่งแตกต่างจากแผงที่พับเก็บได้เราไม่ได้เพิ่มผู้ปกครองข้อมูลคุณสมบัติ
การใช้งาน
ตารางต่อไปนี้แสดงรายการปลั๊กอินยุบสำหรับการจัดการการปรับขนาดหนัก:
คุณสามารถใช้ปลั๊กอินยุบได้สองวิธี:
ผ่านแอตทริบิวต์ข้อมูล: เพิ่ม data-toggle = "การล่มสลาย" และเป้าหมายข้อมูลให้กับองค์ประกอบเพื่อกำหนดตัวควบคุมให้กับองค์ประกอบที่ยุบได้โดยอัตโนมัติ คุณสมบัติเป้าหมายข้อมูลยอมรับตัวเลือก CSS และใช้เอฟเฟกต์การยุบกับมัน ตรวจสอบให้แน่ใจว่าได้เพิ่มคลาส. collapse ลงในองค์ประกอบที่พับได้ หากคุณต้องการให้เป็นค่าเริ่มต้นให้เพิ่มคลาสพิเศษใน.
ในการเพิ่มการจัดการการจัดกลุ่มแบบพับได้แบบพับได้ให้กับตัวควบคุมแบบพับได้ให้เพิ่มคุณสมบัติข้อมูล Data-Parent = "#selector"
ผ่าน JavaScript: วิธีการยุบสามารถเปิดใช้งานผ่าน JavaScript ดังที่แสดงด้านล่าง:
$ ('. ล่มสลาย'). การล่มสลาย ()ตัวเลือก
มีตัวเลือกบางอย่างที่ผ่านคุณสมบัติข้อมูลหรือ JavaScript ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
วิธี
นี่คือวิธีการที่มีประโยชน์ในปลั๊กอินยุบ:
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้วิธี:
<! doctype html> <html> <head> <mhead> อินสแตนซ์ bootstrap - การยุบวิธีปลั๊กอิน </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.min.min.min.min.min.min.het src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "หีบเพลง"> <dirm> <h4> <a data-toggle = "ยุบ" data-parent = "#accordion" href = "#collapseone"> คลิกฉัน ส่วนที่ 1-วิธีการซ่อน </a> </h4> </div> <div id = "clolapseone"> <div> nihil anim keffiyeh helvetica งานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente ea proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "ล่มสลาย" data-parent = "#accordion" href = "#clinpetwo"> คลิกฉันเพื่อขยายฉันเพื่อยุบอีกครั้ง ส่วนที่ 2 -วิธีการแสดง </a> </h4> </div> <div id = "Clotapsetwo"> <div> Nihil Anim Keffiyeh Helvetica, งานฝีมือเบียร์ Wes Anderson เครดิต Nesciunt Sapiente ea Proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo. </div> </div> <div> <div> <h4> <a data-toggle = "ยุบ" data-parent = "#Accordion" href = "#clinpethree"> คลิกฉันเพื่อขยาย ส่วนที่ 3-วิธีการ toggle </a> </h4> </div> <div id = "clinpethree"> <div> nihil anim keffiyeh helvetica งานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente ea Proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "การล่มสลาย" data-parent = "#accordion" href = "#clinplasefour"> คลิกฉันเพื่อขยายให้ฉันคลิกเพื่อยุบอีกครั้ง ส่วนที่ 4-วิธีการเลือก </a> </h4> </div> <div id = "clolapsefour"> <div> nihil anim keffiyeh helvetica งานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente ea Proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo. </div> </div> </div> <script type = "text/javascript"> $ (function () {$ ('#clolapsfour'). การยุบ ({toggle: false})}); $ (ฟังก์ชั่น (ฟังก์ชั่น) $ ('#collapsethree'). การล่มสลาย ('toggle')}); $ (function () {$ ('#collapseone'). การล่มสลาย ('ซ่อน')}); </script> </body> </html>ผลลัพธ์มีดังนี้:
เหตุการณ์
ตารางต่อไปนี้แสดงรายการเหตุการณ์ที่จะใช้ในปลั๊กอินยุบ เหตุการณ์เหล่านี้สามารถใช้เป็นตะขอในฟังก์ชั่น
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานเหตุการณ์:
<! doctype html> <html> <head> <dite> อินสแตนซ์ bootstrap - เหตุการณ์ปลั๊กอินยุบ </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.min.min.min.min.min.min.min.min.min.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "หีบเพลง"> <d4 <h4> <a data-toggle = "ยุบ" data-parent = "#concordion" href = "#collapsexample"> คลิก -เหตุการณ์ที่เกิดขึ้น </a> </h4> </div> <div id = "clinpeExample"> <div> nihil anim keffiyeh helvetica งานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente ea proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo. </div> </div> </div> <script type = "text/javascript"> $ (function () {$ ('#collapseExample') บน ('show.bs.collapse', function () {Alert ('ผลลัพธ์มีดังนี้:
ด้านบนเป็นคำอธิบายโดยละเอียดของตัวอย่างการใช้ปลั๊กอิน bootstrap folding (ยุบ) ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!