คำแนะนำหลักสูตร

Bootstrap 5 แจ้งเตือน

เตือน

Bootstrap 5 มีวิธีง่ายที่ทำให้เกิดข้อความเตือนที่เป็นที่รู้จัก

  • ข้อความเตือนสร้างด้วยประสม .alert ตามด้วยประสมหลักฐานหนึ่ง
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

ตัวอย่าง

<div class="alert alert-success">
  <strong>สำเร็จ!</strong> ข้อความเตือนนี้แสดงถึงการกระทำที่สำเร็จหรือการกระทำที่บวกบวก
</div>

ทดสอบเองเลย

.alert-dark

การเพิ่มเติมของลิงก์เตือน .alert-link เพิ่มประสมเข้าไปในลิงก์ที่มีอยู่ในข้อความเตือน เพื่อที่จะสร้างลิงก์ที่มีสีที่เทียบเท่า

ตัวอย่าง

<div class="alert alert-success">
  <strong>สำเร็จ!</strong> คุณควร <a href="#" class="alert-link">อ่านข้อความนี้</a> ครับ
</div>

ทดสอบเองเลย

ปิดข้อความเตือน

เพื่อปิดข้อความเตือน โปรดใส่ .alert-dismissible เพิ่มประสมเข้าไปในตัวแทนของข้อความเตือน หลังจากนั้นเพิ่ม class="btn-close" และ data-bs-dismiss="alert" เพิ่มไปยังองค์ประกอบของลิงก์หรือปุ่ม (เมื่อคุณกดทำให้ข้อความเตือนหายไป)

ตัวอย่าง

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>สำเร็จ!</strong> ข้อความเตือนนี้แสดงถึงการกระทำที่สำเร็จหรือการกระทำที่บวกบวก
</div>

ทดสอบเองเลย

การเพิ่มเติมของข้อความเตือน

.fade และ .show เพิ่มประสมหลักฐานเพื่อที่จะมีการเพิ่มเติมที่จะทำให้ข้อความเตือนที่ปิดลงมีประสมที่เรียบเรียง

ตัวอย่าง

<div class="alert alert-danger alert-dismissible fade show">

ทดสอบเองเลย