Latest web development tutorials
×

Bootstrap หลักสูตร

Bootstrap หลักสูตร Bootstrap แนะนำโดยย่อ Bootstrap สภาพแวดล้อมในการติดตั้ง

Bootstrap CSS

Bootstrap CSS ภาพรวม Bootstrap ระบบกริด Bootstrap การเรียงพิมพ์ Bootstrap รหัส Bootstrap ตาราง Bootstrap ฟอร์ม Bootstrap ปุ่มกด Bootstrap ภาพ Bootstrap ชั้นเสริม Bootstrap ยูทิลิตี้ที่ตอบสนองต่อ

Bootstrap ส่วนประกอบเค้าโครง

Bootstrap ไอคอนแบบอักษร Bootstrap เมนูแบบเลื่อนลง Bootstrap กลุ่มปุ่ม Bootstrap ปุ่มเมนูแบบเลื่อนลง Bootstrap กลุ่มกล่องใส่ Bootstrap องค์ประกอบนำร่อง Bootstrap ป้าย Bootstrap สวดมนต์ Bootstrap เพจจิ้ง Bootstrap ฉลาก Bootstrap สัญลักษณ์ Bootstrap หน้าจอขนาดใหญ่ Bootstrap ชื่อหน้า Bootstrap รูปขนาดย่อ Bootstrap การเตือน Bootstrap แถบความคืบหน้า Bootstrap วัตถุมัลติมีเดีย Bootstrap กลุ่มรายการ Bootstrap แผงหน้าปัด Bootstrap Wells

Bootstrap วิดเจ็ต

Bootstrap Plug-สรุป Bootstrap ผลการเปลี่ยนแปลง Bootstrap กล่อง Modal Bootstrap เมนูแบบเลื่อนลง Bootstrap จอภาพเลื่อน Bootstrap แถบ Bootstrap เคล็ดลับเครื่องมือ Bootstrap กล่องป๊อปอัพ Bootstrap กล่องเตือน Bootstrap ปุ่มกด Bootstrap พับ Bootstrap ม้าหมุน Bootstrap นำทางเพิ่มเติม

Bootstrap อื่น ๆ

Bootstrap UI บรรณาธิการ Bootstrap V2 หลักสูตร Bootstrap HTML มาตรฐานการเข้ารหัส Bootstrap CSS มาตรฐานการเข้ารหัส

บูตภาพรวมปลั๊กอิน

ในส่วนก่อนหน้านี้กล่าวถึงรูปแบบขององค์ประกอบในการชุมนุมมันเป็นเพียงการเริ่มต้นเงินทุนมาพร้อมกับ 12 ชนิดปลั๊กอิน jQuery ขยายการทำงานสามารถเพิ่มเว็บไซต์โต้ตอบมากขึ้น แม้ว่าคุณจะไม่ได้เป็นนักพัฒนาจาวาสคริปต์ขั้นสูงนอกจากนี้คุณยังสามารถเริ่มต้นการเรียนรู้ Bootstrap JavaScript ปลั๊กอิน ใช้เงินทุน API ข้อมูล (Data API เงินทุน) ส่วนใหญ่ของ plug-in ที่สามารถเรียกโดยไม่ต้องเขียนโค้ดใด ๆ

เว็บไซต์อ้างอิงเสียบเงินทุนในสองวิธี

  • อ้างคนเดียว: ใช้แยกไฟล์* .jsของเงินทุนบางปลั๊กอินและ CSS ส่วนประกอบอื่น ๆ ขึ้นอยู่กับปลั๊กอิน หากคุณเสียบอ้างอิงที่แยกจากกันให้แน่ใจว่าพวกเขาเข้าใจอ้างอิงระหว่างปลั๊กอิน
  • คอมไพล์ (พร้อมกัน) แต่ใช้bootstrap.jsหรือเวอร์ชันบีบอัดbootstrap.min.js
    อย่าพยายามที่จะพูดทั้งสองไฟล์และเพราะ bootstrap.min.jsbootstrap.js มีปลั๊กอินทั้งหมด
ปลั๊กอินทั้งหมดพึ่งพา jQuery คุณต้องอ้างอิงในไฟล์ plugin ก่อน jQuery เยี่ยมชม bower.json ดู Bootstrap รุ่นปัจจุบันสนับสนุนของ jQuery

ข้อมูลทรัพย์สิน

  • คุณอาจจะไม่สามารถที่จะใช้ข้อมูลทั้งหมดที่แสดงที่มาของเงินทุน API ปลั๊กอินโดยไม่ต้องเขียนบรรทัดเดียวของรหัส JavaScript นี้คือ API Bootstrap ชั้นแรกก็ควรจะเป็นวิธีการที่คุณต้องการ
  • แล้วอีกครั้งในบางกรณีคุณอาจจำเป็นต้องปิดคุณลักษณะนี้ ดังนั้นเราจึงยังมีวิธีการ API แอตทริบิวต์ข้อมูลปิดคือการยก namespace ข้อมูล APIและมีผลผูกพันกับเหตุการณ์เอกสาร ดังต่อไปนี้:
    $ (เอกสาร) .off ( '. ข้อมูล API')
    
  • จะปิดเฉพาะ plug-in ก่อน namespace ข้อมูล API บวกชื่อของเครื่องมือเป็น namespace ที่เป็นแสดงที่นี่:
    $ (เอกสาร) .off ( '. Alert.data-API')
    

API การเขียนโปรแกรม

เราให้วิธีการใช้ JavaScript API บริสุทธิ์สำหรับทุกปลั๊กอิน Bootstrap ทั้งหมดประชาชนเรียก API ได้รับการสนับสนุนเป็นรายบุคคลหรือโหมดที่ถูกล่ามโซ่และผลตอบแทนชุดขององค์ประกอบจะดำเนินการ (หมายเหตุ: แบบฟอร์มและก่อให้เกิดข้อตกลง jQuery) ตัวอย่างเช่น:

$ ( ". Btn.danger.") ปุ่ม ( "สลับ"). AddClass ( "ไขมัน")

วิธีการทั้งหมดสามารถใช้ตัวเลือกตัวเลือกวัตถุเป็นพารามิเตอร์หรือสตริงที่แสดงวิธีการเฉพาะหรือไม่มีพารามิเตอร์ (ในกรณีนี้ก็จะเริ่มต้น plug-in สำหรับพฤติกรรมเริ่มต้น) ดังต่อไปนี้:

// เริ่มต้นได้ที่พฤติกรรมเริ่มต้นของ $ ( "# myModal"). Modal ()    
 // เริ่มต้นแป้นพิมพ์ไม่สนับสนุน $ ( "# myModal") คำกริยา ({แป้นพิมพ์: เท็จ})  
// เริ่มต้นและเรียกการแสดงทันที
$ ( "# MyModal"). Modal ( 'แสดง')                

แต่ละ plug-inที่สร้างบนที่ดินยัง exposesคอนสตรัคเดิม:$ .fn.popover.Constructorหากคุณต้องการที่จะได้รับตัวอย่างของวิดเจ็ตโดยเฉพาะอย่างยิ่งที่คุณจะได้รับโดยตรงผ่านองค์ประกอบของหน้านี้:

 $ ( '[Rel = popover]'). ข้อมูล ( 'popover')

หลีกเลี่ยงการชน namespace

บางครั้งปลั๊กอินเงินทุนอาจจะต้องใช้กับกรอบ UI อื่น ๆ ในกรณีนี้การชน namespace สามารถเกิดขึ้นได้ แต่ถ้าเกิดเหตุการณ์นี้คุณสามารถเรียกคืนค่าเดิมโดยการเรียกวิธี Widget.noConflict

// ส่งกลับ $ .fn.button ก่อนค่าตัวแปรที่ได้รับมอบหมาย bootstrapButton = $ .fn.button.noConflict () 
. // สำหรับ $ () ที่ฟังก์ชั่น BootstrapBtn พระราชทานเงินทุน					       
$ .fn.bootstrapBtn = BootstrapButton            

เหตุการณ์

เงินทุนยังมีเหตุการณ์ที่กำหนดเองเป็นพฤติกรรมที่ไม่ซ้ำกันมากที่สุดปลั๊กอิน โดยทั่วไปแล้วเหตุการณ์เหล่านี้มาในสองรูปแบบ:

  • infinitive: นี้จะถูกเรียกเมื่อเหตุการณ์เริ่มต้นเช่นอดีต: แสดงเหตุการณ์ infinitiveให้ฟังก์ชันการป้องกันไม่ให้นี้จะทำให้มันเป็นไปได้ที่จะหยุดการดำเนินการก่อนที่เหตุการณ์เริ่มต้น
    $ ( '# MyModal'). เมื่อวันที่ ( 'show.bs.modal' ฟังก์ชั่น (E) {
    // ป้องกันกล่องกิริยาจะปรากฏขึ้นหาก (! ข้อมูล) กลับ e.preventDefault () 
    })
    
  • รูปแบบกริยาที่ผ่านมา: นี้จะถูกเรียกหลังจากการดำเนินการเสร็จสิ้นเช่นอดีต: แสดงอยู่