ส่วนประกอบที่กล่าวถึงในส่วนประกอบส่วนก่อนหน้านี้เป็นเพียงจุดเริ่มต้น Bootstrap มาพร้อมกับปลั๊กอิน jQuery 12 รายการซึ่งขยายฟังก์ชั่นและสามารถเพิ่มการโต้ตอบเพิ่มเติมในเว็บไซต์ แม้ว่าคุณจะไม่ใช่นักพัฒนา JavaScript ระดับสูงคุณสามารถเริ่มเรียนรู้เกี่ยวกับปลั๊กอิน JavaScript สำหรับ Bootstrap ด้วย Bootstrap Data API (Bootstrap Data API) ปลั๊กอินส่วนใหญ่สามารถเรียกใช้โดยไม่ต้องเขียนโค้ดใด ๆ
มีสองวิธีในการอ้างถึงปลั๊กอิน bootstrap บนเว็บไซต์ :
การอ้างอิงส่วนบุคคล: ไฟล์แต่ละไฟล์ *.js โดยใช้ bootstrap ส่วนประกอบปลั๊กอินและ CSS บางส่วนขึ้นอยู่กับปลั๊กอินอื่น ๆ หากคุณอ้างถึงปลั๊กอินแยกต่างหากตรวจสอบให้แน่ใจว่าได้ขอการพึ่งพาระหว่างปลั๊กอินเหล่านี้ก่อน
คอมไพล์ (พร้อมกัน) อ้างอิง: ใช้ bootstrap.js หรือเวอร์ชันบีบอัดของ bootstrap.min.js
"อย่าพยายามอ้างอิงทั้งสองไฟล์ในเวลาเดียวกันเพราะ bootstrap.js และ bootstrap.min.js ทั้งสองมีปลั๊กอินทั้งหมด"
ปลั๊กอินทั้งหมดขึ้นอยู่กับ jQuery ดังนั้น jQuery จะต้องอ้างอิงก่อนไฟล์ปลั๊กอิน กรุณาเยี่ยมชม bower.json เพื่อดู Bootstrap เวอร์ชัน jQuery ที่รองรับในปัจจุบัน
1. คุณลักษณะข้อมูล
คุณสามารถใช้ปลั๊กอิน bootstrap ทั้งหมดผ่านแอตทริบิวต์ข้อมูล API โดยไม่ต้องเขียนรหัส JavaScript บรรทัดเดียว นี่คือ API ชั้นหนึ่งใน bootstrap และควรเป็นวิธีที่คุณต้องการ
จากนั้นอีกครั้งคุณลักษณะนี้อาจต้องปิดในบางกรณี ดังนั้นเรายังให้วิธีปิดแอตทริบิวต์ข้อมูล API เช่นเลิกทำเหตุการณ์ที่ใช้ Data-API เป็นเนมสเปซและผูกกับเอกสาร เช่นนี้:
$ (เอกสาร) .off ('. data-api')
หากต้องการปิดปลั๊กอินเฉพาะเพียงเพิ่มชื่อของปลั๊กอินเป็นเนมสเปซก่อนเนมสเปซ Data-API ดังที่แสดงด้านล่าง:
$ (เอกสาร) .off ('. alert.data-api')
2. การเขียนโปรแกรม API
เราให้บริการ API ที่ใช้ JavaScript บริสุทธิ์สำหรับปลั๊กอิน bootstrap ทั้งหมด API สาธารณะทั้งหมดสนับสนุนวิธีการโทรแบบบุคคลหรือที่ถูกล่ามโซ่และส่งคืนชุดขององค์ประกอบที่พวกเขาทำงาน (หมายเหตุ: สอดคล้องกับแบบฟอร์มการโทรของ jQuery) ตัวอย่างเช่น:
$ (". btn.danger"). ปุ่ม ("สลับ"). addclass ("fat")วิธีการทั้งหมดสามารถยอมรับวัตถุตัวเลือกตัวเลือกเป็นพารามิเตอร์หรือสตริงที่แสดงถึงวิธีการเฉพาะหรือไม่มีพารามิเตอร์ใด ๆ (ในกรณีนี้ปลั๊กอินจะเริ่มต้นเป็นพฤติกรรมเริ่มต้น) ดังที่แสดงด้านล่าง:
// เริ่มต้นเป็นพฤติกรรมเริ่มต้น $ ("#mymodal"). modal () // เริ่มต้นให้ไม่สนับสนุนคีย์บอร์ด $ ("#mymodal"). modal ({คีย์บอร์ด: false}) // เริ่มต้นและโทรแสดง $ ("#mymodal"). modal ('แสดง')ปลั๊กอินแต่ละตัวจะเปิดเผยตัวสร้างดั้งเดิมในคุณสมบัติตัวสร้าง: $ .fn.popover.constructor หากคุณต้องการรับอินสแตนซ์ของปลั๊กอินเฉพาะคุณสามารถรับได้โดยตรงผ่านองค์ประกอบหน้า:
$ ('[rel = popover]'). ข้อมูล ('popover')
3. หลีกเลี่ยงความขัดแย้งเนมสเปซ
บางครั้งปลั๊กอิน bootstrap อาจต้องใช้กับเฟรมเวิร์ก UI อื่น ๆ ในกรณีนี้ความขัดแย้งของเนมสเปซอาจเกิดขึ้น หากสิ่งนี้น่าเสียดายที่เกิดขึ้นคุณสามารถกู้คืนค่าดั้งเดิมได้โดยเรียกใช้วิธี. noconflict ของปลั๊กอิน
// ส่งคืนค่าที่กำหนดไว้ก่อน $ .fn.button var bootstrapbutton = $ .fn.button.noconflict () // กำหนดฟังก์ชัน bootstrap เป็น $ () bootstrapbtn $ .fn.bootstrapbtn = bootstrapbutton
4. กิจกรรม
Bootstrap ให้บริการกิจกรรมที่กำหนดเองสำหรับพฤติกรรมที่เป็นเอกลักษณ์ของปลั๊กอินส่วนใหญ่ โดยทั่วไปเหตุการณ์เหล่านี้มีสองรูปแบบ:
คำกริยา infinitive: สิ่งนี้จะถูกเรียกใช้ในช่วงเริ่มต้นของเหตุการณ์ ตัวอย่างเช่นตัวอย่าง: แสดง เหตุการณ์คำกริยา infinitive ให้ฟังก์ชั่น preventdefault สิ่งนี้จะช่วยให้การดำเนินการของการดำเนินการหยุดก่อนที่เหตุการณ์จะเริ่ม
$ ('#mymodal'). on ('show.bs.modal', function (e) {// ป้องกันการแสดงผลของกล่อง modal ถ้า (! data) ส่งคืน e.preventDefault ()})รูปแบบคำกริยาในอดีต: สิ่งนี้จะถูกเรียกใช้หลังจากดำเนินการดำเนินการ ตัวอย่างเช่นตัวอย่าง: แสดง
ข้างต้นเป็นภาพรวมง่าย ๆ ของปลั๊กอิน bootstrap ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนที่จะเข้าใจปลั๊กอิน bootstrap