Bootstrap Alerts
การแจ้งเตือน
Bootstrap มีวิธีง่ายๆ ในการสร้างข้อความเตือนที่กำหนดไว้ล่วงหน้า:
การแจ้งเตือนจะถูกสร้างขึ้นพร้อมกับ.alertคลาส ตามด้วยหนึ่งในสี่คลาสตามบริบท.alert-success, .alert-info, .alert-warningหรือ
.alert-danger:
ตัวอย่าง
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
ลิงค์แจ้งเตือน
เพิ่มalert-linkคลาสไปยังลิงก์ใดๆ ในกล่องแจ้งเตือนเพื่อสร้าง "ลิงก์สีที่ตรงกัน":
ตัวอย่าง
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
ปิดการแจ้งเตือน
หากต้องการปิดข้อความแจ้งเตือน ให้เพิ่ม.alert-dismissible
คลาสลงในคอนเทนเนอร์การแจ้งเตือน จากนั้นเพิ่มclass="close"และdata-dismiss="alert"
ไปยังลิงก์หรือองค์ประกอบปุ่ม (เมื่อคุณคลิกที่กล่องการแจ้งเตือนนี้จะหายไป)
ตัวอย่าง
<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
แอตทริบิวต์ aria-* และ × คำอธิบาย
เพื่อช่วยปรับปรุงการเข้าถึงสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ คุณควรรวมแอตทริบิวต์ aria-label="close" เมื่อสร้างปุ่มปิด
&ครั้ง; (×) เป็นเอนทิตี HTML ที่เป็นไอคอนที่ต้องการสำหรับปุ่มปิด แทนที่จะเป็นตัวอักษร "x"
สำหรับรายการของเอนทิตี HTML ทั้งหมดโปรดไปที่การอ้างอิงเอนทิตี HTML ของเรา
การแจ้งเตือนแบบเคลื่อนไหว
คลาส.fadeและ.inจะเพิ่มเอฟเฟกต์จางเมื่อปิดข้อความเตือน:
ตัวอย่าง
<div class="alert alert-danger fade in">
อ้างอิงการแจ้งเตือน Bootstrap ที่สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกการแจ้งเตือน วิธีการ และเหตุการณ์ทั้งหมด ไปที่ Bootstrap JS Alert Referenceของเรา