Bootstrap 4 Alert การแจ้งเตือน

Alert ใน Bootstrap 4 เป็นเครื่องมือที่ใช้ในการแสดงข้อความแจ้งเตือนผู้ใช้งาน ไม่ว่าจะเป็นการแจ้งเตือนความสำเร็จ ข้อผิดพลาด ข้อมูล หรือคำเตือน ซึ่งสามารถนำไปประยุกต์ใช้ได้ในหลากหลายรูปแบบ เช่น การแจ้งผลการบันทึกข้อมูลสำเร็จหรือข้อผิดพลาดต่าง ๆ

การสร้าง Alert พื้นฐาน

ในการสร้าง Alert พื้นฐาน สามารถใช้คลาส .alert และคลาส .alert-<ประเภท> เพื่อกำหนดประเภทของ Alert ซึ่งมี 5 ประเภทหลัก ดังนี้:

• .alert-primary สำหรับการแจ้งเตือนปกติ
• .alert-secondary สำหรับการแจ้งเตือนแบบรอง
• .alert-success สำหรับการแจ้งเตือนความสำเร็จ
• .alert-danger สำหรับการแจ้งเตือนข้อผิดพลาด
• .alert-warning สำหรับการแจ้งเตือนคำเตือน
• .alert-info สำหรับการแจ้งเตือนข้อมูล

<div class="alert alert-primary" role="alert">
  นี่คือข้อความแจ้งเตือนประเภท Primary
</div>

<div class="alert alert-success" role="alert">
  นี่คือข้อความแจ้งเตือนประเภท Success
</div>

<div class="alert alert-danger" role="alert">
  นี่คือข้อความแจ้งเตือนประเภท Danger
</div>

การปิด Alert โดยอัตโนมัติ

เราสามารถเพิ่มปุ่มเพื่อปิดข้อความแจ้งเตือนด้วยคลาส .alert-dismissible และเพิ่มปุ่มปิด <button> พร้อมคลาส .close เพื่อให้ผู้ใช้สามารถปิดการแจ้งเตือนเองได้

ตัวอย่าง

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  นี่คือข้อความแจ้งเตือนที่สามารถปิดได้!
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

การเพิ่มข้อความแบบ HTML ภายใน Alert

ใน Alert ของ Bootstrap 4 สามารถใส่ HTML ได้เพื่อจัดรูปแบบข้อความ เช่น การเน้นตัวหนา การขีดเส้นใต้ หรือการเพิ่มลิงก์

<div class="alert alert-info" role="alert">
  <strong>โปรดทราบ!</strong> นี่คือข้อความแจ้งเตือนที่มี <a href="#" class="alert-link">ลิงก์</a> เพื่อแนะนำเพิ่มเติม
</div>

การใช้ Alert กับ JavaScript

หากต้องการให้ Alert ปิดลงแบบอัตโนมัติเมื่อทำงานกับ JavaScript สามารถใช้ฟังก์ชัน alert() และ close() ใน JavaScript เพื่อควบคุมได้ เช่น การแสดงข้อความเตือนแล้วปิดโดยอัตโนมัติ

<script>
  // ทำให้ Alert ปิดหลังจากแสดงผล 3 วินาที
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove(); 
    });
  }, 3000);
</script>

การเปลี่ยนแปลงขนาดและการจัดรูปแบบของ Alert

เราสามารถปรับแต่งขนาดและรูปแบบของ Alert ได้ตามต้องการ โดยเพิ่ม CSS เพื่อกำหนดการแสดงผลให้เหมาะสมกับการออกแบบของเว็บไซต์

<style>
  .custom-alert {
    font-size: 18px;
    padding: 20px;
    border-radius: 10px;
  }
</style>

<div class="alert alert-danger custom-alert" role="alert">
  นี่คือข้อความแจ้งเตือนแบบกำหนดเอง
</div>

การใช้งานร่วมกับไอคอน

สามารถเพิ่มไอคอนเพื่อเน้นความสำคัญของ Alert โดยใช้ไอคอนจาก FontAwesome หรือไอคอนอื่นๆ เพื่อให้การแจ้งเตือนดูน่าสนใจยิ่งขึ้น

<div class="alert alert-success" role="alert">
  <i class="fa fa-check-circle"></i> บันทึกข้อมูลสำเร็จ!
</div>

สรุป

การใช้งาน Alert ใน Bootstrap 4 เป็นเครื่องมือที่มีความยืดหยุ่น สามารถปรับแต่งได้หลากหลายตามความต้องการของผู้ใช้งาน ไม่ว่าจะเป็นการแจ้งเตือนแบบพื้นฐาน หรือการใช้ฟังก์ชันเพิ่มเติมเพื่อสร้างประสบการณ์ที่ดีแก่ผู้ใช้