วิธีสร้างปุ่ม Bootstrap ด้วยแท็ก button กับ class btn

สอนการวิธีการสร้างปุ่ม Bootstrap ด้วยแท็ก button กับ class btn บทความนี้แนะนำการสร้างปุ่มด้วยแท็ก button และกำหนดสี และรูปแบบผ่าน class btn ของ Bootstrap พร้อมแสดงผลลัพธ์ออกสู่หน้าจอ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง วิธีสร้างปุ่ม Bootstrap ด้วยแท็ก button กับ class btn

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<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-danger">ปุ่มสี Danger</button>
<button type="button" class="btn btn-warning">ปุ่มสี Warning</button>
<button type="button" class="btn btn-info">ปุ่มสี Info</button>
<button type="button" class="btn btn-light">ปุ่มสี Light</button>
<button type="button" class="btn btn-dark">ปุ่มสี Dark</button>
<button type="button" class="btn btn-link">ปุ่มสี Link</button>

การสร้างปุ่ม Bootstrap เริ่มต้นด้วยการเรียกใช้งานไฟล์ css ของ Bootstrap ก่อนจากนั้นสร้างปุ่มด้วยแท็ก button และเรียกใช้ class btn ร่วมกับ btn-* เพื่อกำหนดรูปแบบหรือสีให้กับปุ่มที่ต้องการ