Bootstrap 4 ปุ่ม
ลักษณะปุ่ม
Bootstrap 4 มีปุ่มสไตล์ต่างๆ:
ตัวอย่าง
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</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 4 มีปุ่มเค้าร่าง/ขอบแปดปุ่ม:
ตัวอย่าง
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
ขนาดปุ่ม
ใช้.btn-lgคลาสสำหรับปุ่มขนาดใหญ่หรือ.btn-smคลาสสำหรับปุ่มขนาดเล็ก:
ตัวอย่าง
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
ปุ่มระดับบล็อก
เพิ่มคลาส.btn-blockเพื่อสร้างปุ่มระดับบล็อกที่ครอบคลุมความกว้างทั้งหมดขององค์ประกอบหลัก
ตัวอย่าง
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
ปุ่มใช้งาน/ปิดการใช้งาน
สามารถตั้งค่าปุ่มเป็นสถานะใช้งาน (กดปรากฏ) หรือสถานะปิดใช้งาน (ไม่สามารถคลิกได้):
ชั้นเรียน.activeทำให้ปุ่มปรากฏว่าถูกกด และdisabledแอตทริบิวต์ทำให้ปุ่มไม่สามารถคลิกได้ โปรดทราบว่าองค์ประกอบ <a> ไม่สนับสนุนแอตทริบิวต์ที่ถูกปิดใช้งาน ดังนั้นจึงต้องใช้.disabledคลาสเพื่อทำให้ดูเหมือนปิดการใช้งาน
ตัวอย่าง
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
ปุ่มสปินเนอร์
คุณยังสามารถเพิ่ม "สปินเนอร์" ให้กับปุ่ม ซึ่งคุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับBS4 Spinners Tutorial ของเรา :
ตัวอย่าง
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>