ปลั๊กอิน Bootstrap ต้องเรียนรู้ (ปุ่ม) ปลั๊กอิน

ปุ่มถูกนำมาใช้ในบทที่ปุ่ม Bootstrap ด้วยปลั๊กอินปุ่มคุณสามารถเพิ่มการโต้ตอบบางอย่างเช่นการควบคุมสถานะปุ่มหรือการสร้างกลุ่มปุ่มสำหรับส่วนประกอบอื่น ๆ เช่นแถบเครื่องมือ

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

1. สถานะการโหลด

ในการเพิ่มสถานะการโหลดลงในปุ่มเพียงเพิ่มข้อมูลการโหลดข้อมูล = "การโหลด ... " ลงในองค์ประกอบปุ่มเป็นแอตทริบิวต์ดังแสดงในตัวอย่างต่อไปนี้:

 <button id = "fat-btn" data-loading-text = "การโหลด ... " type = "ปุ่ม"> สถานะการโหลด </button> <script> $ (ฟังก์ชัน () {$ (". btn") คลิก (ฟังก์ชั่น () {$ (นี้). - - </script>

2. สวิตช์เดี่ยว

ในการเปิดใช้งานสวิตช์ของปุ่มเดียว (เช่นเพื่อเปลี่ยนสถานะปกติของปุ่มเป็นสถานะการกดและในทางกลับกัน) เพียงเพิ่ม data-toggle = "ปุ่ม" ไปยังองค์ประกอบปุ่มเป็นแอตทริบิวต์ดังแสดงในตัวอย่างต่อไปนี้:

คัดลอกรหัสดังต่อไปนี้: <ปุ่ม data-toggle = "ปุ่ม" Autocomplete = "ปิด"> สวิตช์เดี่ยว </button>

หมายเหตุ: เมื่อหน้า Firefox โหลดหลายครั้งปุ่มอาจทำให้แบบฟอร์มปิดใช้งานหรือเลือก วิธีแก้ปัญหาคือ: เพิ่ม Autocomplete = "ปิด"

3. ปุ่มตัวเลือก

ในทำนองเดียวกันคุณสามารถสร้างกลุ่มปุ่มตัวเลือกและเพิ่มสลับสำหรับกลุ่มปุ่มตัวเลือกโดยการเพิ่มแอตทริบิวต์ข้อมูล data-toggle = "ปุ่ม" ลงในกลุ่ม BTN

 <div data-toggle = "ปุ่ม"> <label for = ""> <input type = "Radio" name = "sex" autocomplete = "ปิด" ตรวจสอบ> ชาย </label> <label for = ""> <อินพุต type = "Radio" name = "Sex" Autocomplete = "Off"

4. ปุ่มตรวจสอบ

คุณสามารถสร้างกลุ่มช่องทำเครื่องหมายและเพิ่มสลับไปยังกลุ่มช่องทำเครื่องหมายได้โดยการเพิ่มแอตทริบิวต์ข้อมูล data-toggle = "ปุ่ม" ลงในกลุ่ม BTN

 <did data-toggle = "ปุ่ม"> <label for = ""> <input type = "ช่องทำเครื่องหมาย" ชื่อ = "fa" autocomplete = "ปิด" ตรวจสอบ> เพลง </label> <label for = ""> <อินพุต type = "ช่องทำเครื่องหมาย" name = "fa" autocomplete = "ปิด" art </label> <label for = ""> <อินพุต type = "ช่องทำเครื่องหมาย" ชื่อ = "fa" Autocomplete = "ปิด"> คอมพิวเตอร์ </label> </div>

มีพารามิเตอร์สามตัวในวิธีการปุ่มในปุ่มปลั๊กอิน: สลับรีเซ็ตและสตริง (เช่นการโหลดเสร็จสมบูรณ์)

 // มันสามารถแทนที่ data-toggle = "ปุ่ม" $ ('ปุ่ม') บน ('คลิก', function () {$ (นี่). button ('สลับ');})

นี่คือวิธีการที่มีประโยชน์ในปลั๊กอินปุ่ม:

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ bootstrap โปรดดูหัวข้อ: การสอนการเรียนรู้ bootstrap