Boostrap มีปลั๊กอิน JavaScript 12 ตัวรวมถึง:
การเปลี่ยนภาพเคลื่อนไหว
โมดอล
เมนูดรอปดาวน์
scrollspy
แท็บ
คำแนะนำเครื่องมือกล่องพรอมต์
ป๊อปโอเวอร์
การแจ้งเตือนกล่องคำเตือน
ปุ่ม
ทรุด
ม้าหมุนโรตารี่
วางตำแหน่ง Float Affix โดยอัตโนมัติ
หน้าต่างป๊อปอัพโมดอล
<div> <div> <div> <div> <button type = "ปุ่ม" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4> ชื่อโมดัล </h4> </div> <div> <p> นี่คือหน้าต่างที่มีปุ่ม " data-dismiss = "modal"> บันทึก </button> </div> </div> </div>
เมนูแบบดึงลง
การใช้งานประกาศ
โดยทั่วไปเมนูแบบเลื่อนลงจะถูกนำไปใช้บนแถบการนำทาง (Navbar) และ Tab (TAB)
<div id = "Nav-Example"> <a href = "#"> ชื่อโครงการ </a> <ul role = "การนำทาง"> <li> <a data-toggle = "dropdown" role = "ปุ่ม" href = "#" id = "drop1"> dropdown <b> </b> </a> href = "#" tabindex = "-1" role = "menuitem"> action1 </a> </li> <li role = "การนำเสนอ"> <a href = "#" tabindex = "-1" role = "menuitem"> action2 </a> </li> </li></ul> </li> <li> <a data-toggle = "dropdown" role = "ปุ่ม" href = "#" id = "drop2"> dropdown2 <b> </b> </a> role = "menuitem"> action4 </a> </li> <li role = "การนำเสนอ"> <a href = "#" tabindex = "-1" role = "menuitem"> action5 </a> </li> <li role = "การนำเสนอ"> <a href = "#" tabindex = " </li></ul> </li></ul> </div>
แท็บ
<%-แท็บแถบการนำทาง-%> <ul> <li> <a href = "#home" data-toggle = "tab"> home </a> </li> <li> <a href = "#profile" data-toggle = "tab"> </a> </li> <li> href = "#settings" data-toggle = "tab"> การตั้งค่า </a> </li></ul> <%-แผงแท็บ-%> <div> <div id = "home"> home ... </div> <div id = "โปรไฟล์"> </div> <div id = "ข้อความ"> ข้อความ ...
กล่องทันที
<ปุ่ม data-original-title = "คำแนะนำเครื่องมือทางด้านซ้าย" data-toggle = "tooltip" data-placement = "left"> คำแนะนำเครื่องมือด้านซ้าย </button> <ปุ่ม data-original-title = "tooltip ด้านบน" data-toggle = "tooltip" placement data-toggle = "Tooltip" data-placement = "Bottom"> Tooltip ที่ด้านล่าง </button> <ปุ่ม data-original-title = "คำแนะนำเครื่องมือที่ด้านล่าง" data-toggle = "Tooltip" data-placement = "Bottom"> Tooltip = buttor-data-titlip-title
กล่องคำเตือน
<div> <button data-mismiss = "Alert" type = "ปุ่ม"> x </button> <h4> ชื่อคำเตือน </h4> <p> เปลี่ยนสิ่งนี้และลองใช้แล้ว </p> </div>
พับ
<div id = "หีบเพลง"> <div> <div> <h4> <a data-toggle = "การล่มสลาย" data-parent = "#accordion" href = "#accordion"> องค์ประกอบทริกเกอร์#1 </a> </h4> </div> <div id = "collapseone"> <div>
ม้าหมุนหมุน
<div data-ride = "Carouse1" id = "คอนเทนเนอร์"> <%------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ - data-slide-to = "2" data-target = "#container"> </li> </ol> <%-ปุ่มควบคุมซ้ายและซ้าย-%> <a data-slide = "prev" href = "#container"> <span> </span> </a>
ด้านบนเป็นบทปลั๊กอิน JavaScript ของบทช่วยสอน boostrap พื้นฐานที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!