ปุ่ม Bootstrap
ลักษณะปุ่ม
Bootstrap มีปุ่มสไตล์ต่างๆ:
เพื่อให้ได้สไตล์ปุ่มด้านบน Bootstrap มีคลาสต่อไปนี้:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
ตัวอย่างต่อไปนี้แสดงโค้ดสำหรับลักษณะปุ่มต่างๆ:
ตัวอย่าง
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
คลาสของปุ่มสามารถใช้กับ องค์ประกอบ <a>, <button>, หรือ
<input>:
ตัวอย่าง
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
เหตุใดเราจึงใส่ # ในแอตทริบิวต์ href ของลิงก์
เนื่องจากเราไม่มีหน้าที่จะเชื่อมโยง และเราไม่ต้องการได้รับข้อความ "404" เราจึงใส่ # เป็นลิงก์ในตัวอย่างของเรา ควรเป็น URL จริงของหน้าใดหน้าหนึ่ง
ขนาดปุ่ม
Bootstrap มีปุ่มสี่ขนาด:
คลาสที่กำหนดขนาดต่างๆ ได้แก่:
.btn-lg.btn-sm.btn-xs
ตัวอย่างต่อไปนี้แสดงรหัสสำหรับปุ่มขนาดต่างๆ:
ตัวอย่าง
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
ปุ่มระดับบล็อก
ปุ่มระดับบล็อกจะครอบคลุมความกว้างทั้งหมดขององค์ประกอบหลัก
เพิ่มคลาส.btn-blockเพื่อสร้างปุ่มระดับบล็อก:
ตัวอย่าง
<button type="button" class="btn btn-primary btn-block">Button 1</button>
ปุ่มใช้งาน/ปิดการใช้งาน
สามารถตั้งค่าปุ่มเป็นสถานะใช้งาน (กดปรากฏ) หรือสถานะปิดใช้งาน (ไม่สามารถคลิกได้):
ชั้นเรียน.activeทำให้ปุ่มปรากฏว่าถูกกด และชั้นเรียน
.disabled
ทำให้ปุ่มไม่สามารถคลิกได้:
ตัวอย่าง
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
อ้างอิงปุ่ม Bootstrap ที่สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของคลาสปุ่มทั้งหมด ไปที่ Bootstrap Button Referenceทั้งหมดของเรา