บทความนี้จะแบ่งปันกับคุณถึงวิธีการใช้ กลุ่มปุ่ม เนื้อหาเฉพาะมีดังนี้
1. กลุ่มปุ่ม
1. กลุ่มปุ่มเดี่ยว
ใช้. btn-group เพื่อห่อหุ้มหลาย <ปุ่ม> ด้วย .BTN
<div> <button> 1 </putton> <button> 2 </button> <button> 3 </button> </div>
2. กลุ่มหลายปุ่ม
ใส่หลาย <div> ลงใน <div>
<div> <div> ... </div> <div> ... </div> </div> </div>
3. กลุ่มปุ่มแนวตั้ง
เพิ่ม .BTN-Group-Vertical ไปยัง. BTN-Group
<div> ... </div>
2. ปุ่มดึงลง (ปุ่มเลื่อนลง)
ตัวอย่าง
<div> <a data-toggle = "dropdown" href = "#"> action <span> </span> </a> <ul> <!-ลิงก์เมนูแบบเลื่อนลง-> </ul> </div>
1. ควบคุมขนาด
ใช้. btn-large, .btn-small และ .btn-mini เพื่อควบคุมขนาด
2. ปุ่มเลื่อนลง
<div> <pution> การกระทำ </putton> <button data-toggle = "dropdown"> <span> </span> </pution> <ul> <!-ลิงก์เมนูแบบเลื่อนลง-> </ul> </div>
3. เมนูที่ปรากฏขึ้น
<div> <pution> dropup </putton> <button data-toggle = "dropdown"> <span> </span> </pution> <ul> <!-ลิงก์เมนูแบบเลื่อนลง-> </ul> </div>
3. JavaScript
ตัวอย่าง
สถานะการโหลด เพิ่มข้อมูลการโหลดข้อมูล = "กำลังโหลด ... "
คัดลอกรหัสดังต่อไปนี้: <button type = "ปุ่ม" data-loading-text = "การโหลด ... "> การโหลดสถานะ </putions>
สถานะสลับ เพิ่ม data-toggle = "ปุ่ม"
คัดลอกรหัสดังต่อไปนี้: <button type = "ปุ่ม" data-toggle = "ปุ่ม"> สลับเดี่ยว </button>
กล่องกาเครื่องหมาย เพิ่ม data-toggle = "ปุ่มตรวจสอบ" หลังจาก BTN-Group
<div data-toggle = "buttons-checkbox"> <button type = "ปุ่ม"> ซ้าย </button> <button type = "ปุ่ม"> Middle </button> <button type = "ปุ่ม"> ขวา </button> </div>
ตัวเลือกเดียว เพิ่ม data-toggle = "ปุ่ม-radio" หลังจาก BTN-group
<div data-toggle = "buttons-radio"> <button type = "ปุ่ม"> ซ้าย </button> <button type = "ปุ่ม"> กลาง </button> <button type = "ปุ่ม"> ขวา </button> </div>
การใช้งาน
รหัส JavaScript ทริกเกอร์สถานะสวิตช์
$ (). ปุ่ม ("สลับ")
คุณยังสามารถเพิ่มแอตทริบิวต์ data-toggle เพื่อทริกเกอร์โดยอัตโนมัติ
<button type = "button" data-toggle = "ปุ่ม"> … </button>
ใช้รหัส JavaScript เพื่อทริกเกอร์สถานะการโหลดและปุ่มจะแสดงค่าที่ระบุโดยคุณสมบัติการโหลดข้อมูล-ข้อความ
$ (). ปุ่ม ("โหลด")
<button type = "button" data-loading-text = "การโหลดสิ่งของ ... "> ... </button>
หมายเหตุ: Firefox จะทำให้ปุ่มไม่ถูกต้องเมื่อโหลดหน้าเว็บ วิธีแก้ปัญหาคือการใช้ Autocomplete = "ปิด" บนปุ่ม
ใช้รหัส JavaScript เพื่อรีเซ็ตสถานะปุ่ม
$ (). ปุ่ม ("รีเซ็ต")
รีเซ็ตสถานะปุ่มและเปลี่ยนข้อความปุ่มเป็นข้อความที่ระบุ ตัวอย่างที่สมบูรณ์ในตัวอย่างต่อไปนี้เป็นเพียงตัวอย่างและสามารถแทนที่ได้
<ปุ่ม data-complete-text = "เสร็จสิ้น!" > ... </button> <script> $ ('. btn') ปุ่ม ('เสร็จสมบูรณ์') </script>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน