JS ปุ่ม (button.js)
ใช้ปลั๊กอินนี้ถ้าคุณต้องการที่จะมีการควบคุมที่มากกว่าปุ่มของคุณ
สำหรับการสอนเกี่ยวกับปุ่มอ่านของเรา Bootstrap สอนปุ่ม
เรียนปลั๊กอินปุ่ม
เรียนด้านล่างสามารถใช้ในรูปแบบใด <a>, <button> หรือ <input> องค์ประกอบ:
| ชั้น | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .btn | เพิ่มขั้นพื้นฐานเพื่อจัดแต่งทรงผมปุ่มใด ๆ | ลองมัน |
| .btn-default | ระบุว่ามีการเริ่มต้น / ปุ่มมาตรฐาน | ลองมัน |
| .btn-primary | ให้น้ำหนักภาพพิเศษและระบุการดำเนินการหลักในชุดของปุ่ม | ลองมัน |
| .btn-success | บ่งชี้ว่ามีการดำเนินการที่ประสบความสำเร็จหรือบวก | ลองมัน |
| .btn-info | ปุ่มบริบทสำหรับข้อความแจ้งเตือนให้ข้อมูล | ลองมัน |
| .btn-warning | แสดงความระมัดระวังควรจะต้องดำเนินการกับการกระทำนี้ | ลองมัน |
| .btn-danger | บ่งชี้ว่ามีการกระทำที่เป็นอันตรายหรือเชิงลบ | ลองมัน |
| .btn-link | ทำให้ปุ่มมีลักษณะเหมือนการเชื่อมโยง (จะยังคงมีพฤติกรรมปุ่ม) | ลองมัน |
| .btn-lg | ทำให้ปุ่มขนาดใหญ่ | ลองมัน |
| .btn-sm | ทำให้ปุ่มเล็ก ๆ | ลองมัน |
| .btn-xs | ทำให้ปุ่มขนาดเล็กพิเศษ | ลองมัน |
| .btn-block | ทำให้ปุ่มระดับบล็อก (ครอบคลุมเต็มความกว้างขององค์ประกอบหลัก) | ลองมัน |
| .active | ทำให้ปุ่มกดปรากฏ | ลองมัน |
| .disabled | ทำให้ปุ่มปิดการใช้งาน | ลองมัน |
ผ่านทางจาวาสคริปต์
เปิดใช้งานด้วยตนเอง:
$('.btn').button();
ตัวเลือกปุ่ม
| None |
วิธีปุ่ม
ตารางต่อไปนี้แสดงวิธีการกดปุ่มที่มีอยู่ทั้งหมด
หมายเหตุ: สำหรับปลั๊กอินนี้วิธีนี้ยังสามารถส่งผ่านทางคุณลักษณะข้อมูล ผนวกชื่อวิธีการที่จะ DATA- ในขณะที่ข้อมูลสลับหรือข้อมูลในการโหลด
| วิธี | ลักษณะ | ลองมัน |
|---|---|---|
| .button("toggle") | ทำให้ดูปุ่มกด | ลองมัน |
| .button("loading") | ปิดการใช้งานปุ่มและการเปลี่ยนแปลงข้อความปุ่มเพื่อ "โหลด ... " | ลองมัน |
| .button("reset") | เปลี่ยนข้อความปุ่มเพื่อข้อความเดิม (ถ้ามีการเปลี่ยนแปลง) | ลองมัน |
| .button("string") | ระบุข้อความบนปุ่มใหม่ | ลองมัน |
ตัวอย่าง
โดยใช้ CSS เพื่อปรับแต่งปุ่ม
วิธีการลบเส้นขอบโค้งมนไปนี้:
วิธีการเพิ่มสีที่เฉพาะเจาะจง:
ตัวอย่าง
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
} ลองตัวเอง» วิธีการเพิ่มเงา: