Bootstrap 5 ปุ่ม

สไตล์ปุ่ม

Bootstrap 5 มีสไตล์ปุ่มที่แตกต่างกัน:

ตัวอย่าง

<button type="button" class="btn">พื้นฐาน</button>
<button type="button" class="btn btn-primary">หลัก</button>
<button type="button" class="btn btn-secondary">รอง</button>
<button type="button" class="btn btn-success">สำเร็จ</button>
<button type="button" class="btn btn-info">ข้อมูล</button>
<button type="button" class="btn btn-warning">คำเตือน</button>
<button type="button" class="btn btn-danger">อันตราย</button>
<button type="button" class="btn btn-dark">สีมืด</button>
<button type="button" class="btn btn-light">สีสว่าง</button>
<button type="button" class="btn btn-link">ลิงก์</button>

ทดลองด้วยตัวเอง

ปุ่มชนิดนี้สามารถใช้ <a>、<button> หรือ <input> องค์ประกอบ：

ตัวอย่าง

<a href="#" class="btn btn-success">ปุ่มลิงก์</a>
<button type="button" class="btn btn-success">ปุ่ม</button>
<input type="button" class="btn btn-success" value="ปุ่มค่าตัวเลข">
<input type="submit" class="btn btn-success" value="บันทึกด้วยค่าตัวเลข">
<input type="reset" class="btn btn-success" value="รีเซ็ทด้วยค่าตัวเลข">

ทดลองด้วยตัวเอง

ทำไมเราเขียน # ในคุณสมบัติ href ของลิงก์?

เนื่องจากไม่มีหน้าที่สามารถลิงก์ไปยัง และเราไม่ต้องการรับข้อความ "404" ดังนั้นเราใช้ # ในคุณสมบัติ href ของลิงก์. ในชีวิตประจำวัน มันควรเป็น URL ที่แท้จริงของหน้า "ค้นหา"

ปุ่มรอยประกอบ

Bootstrap 5 ยังมีปุ่มรอยประกอบ/ขอบเขตทั้งหมดแปดตัว

เมื่อเคลื่อนเมาส์ไปยังด้านบนของมัน จะเห็นปรากฏการณ์ "hover" เพิ่มเติม:

ตัวอย่าง

<button type="button" class="btn btn-outline-primary">หลัก</button>
<button type="button" class="btn btn-outline-secondary">ของรอง</button>
<button type="button" class="btn btn-outline-success">ประสบความสำเร็จ</button>
<button type="button" class="btn btn-outline-info">ข้อมูล</button>
<button type="button" class="btn btn-outline-warning">คำเตือน</button>
<button type="button" class="btn btn-outline-danger">อันตราย</button>
<button type="button" class="btn btn-outline-dark">สีดำ</button>
<button type="button" class="btn btn-outline-light text-dark">สีแบบเทา</button>

ทดลองด้วยตัวเอง

ขนาดปุ่ม

ใช้สำหรับปุ่มใหญ่ .btn-lg คลาส ใช้สำหรับปุ่มเล็ก .btn-sm คลาส：

ตัวอย่าง

<button type="button" class="btn btn-primary btn-lg">ขนาดใหญ่</button>
<button type="button" class="btn btn-primary">ปกติ</button>
<button type="button" class="btn btn-primary btn-sm">ขนาดเล็ก</button>

ทดลองด้วยตัวเอง

ปุ่มระดับบล็อค

ถ้าต้องการสร้างปุ่มระดับบล็อคที่ขนานกับความกว้างขององค์ประกอบพ่อ ให้ใช้ .d-grid คลาส "helper":

ตัวอย่าง

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">ปุ่มครึ่งกว่านี้</button>
</div>

ทดลองด้วยตัวเอง

หากคุณมีปุ่มบล็อคหลายตัว คุณสามารถใช้ .gap-* รูปแบบที่ควบคุมช่องว่างระหว่างตัวแทน

ตัวอย่าง

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">ปุ่มครึ่งกว่านี้</button>
  <button type="button" class="btn btn-primary btn-block">ปุ่มครึ่งกว่านี้</button>
  <button type="button" class="btn btn-primary btn-block">ปุ่มครึ่งกว่านี้</button>
</div>

ทดลองด้วยตัวเอง

ปุ่มเปิดใช้งาน/ปิดการใช้งาน

ปุ่มสามารถตั้งค่าเป็นสถานะเปิดใช้งาน (แสดงดูเหมือนว่ามันถูกกด) หรือ ปิดการใช้งาน (ไม่สามารถคลิกได้):

รูปแบบ .active ทำให้ปุ่มแสดงดูเหมือนว่ามันถูกกด disabled คุณสมบัติที่ทำให้ปุ่มไม่สามารถคลิกได้ โปรดจำแนกเหตุผลว่าตัวแทน <a> ไม่สนับสนุนคุณสมบัติ disabled ดังนั้นคุณจะต้องใช้ .disabled รูปแบบที่ทำให้มันแสดงดูเหมือนว่ามันถูกปิดการใช้งาน

ตัวอย่าง

<button type="button" class="btn btn-primary active">เปิดใช้งานหลักที่เปิดใช้งาน</button>
<button type="button" class="btn btn-primary" disabled>เปิดใช้งานหลักที่เปิดใช้งานไม่ได้</button>
<a href="#" class="btn btn-primary disabled">ลิงก์ที่เปิดใช้งานไม่ได้</a>

ทดลองด้วยตัวเอง

ปุ่มโหลด

คุณยังสามารถเพิ่ม "spinner" ไปที่ปุ่ม คุณจะได้เรียนรู้มากกว่าในตัวอย่าง BS5 Spinner ของเรา:

ตัวอย่าง

<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>

ทดลองด้วยตัวเอง