Bootstrap 4 Alerts
Bootstrap 4 Alerts
Bootstrap 4 ให้วิธีง่ายๆ ในการสร้างข้อความเตือนที่กำหนดไว้ล่วงหน้า:
การแจ้งเตือนจะถูกสร้างขึ้นพร้อมกับ.alertคลาส ตามด้วยหนึ่งในคลาสตามบริบท.alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondary, .alert-lightหรือ.alert-dark:
ตัวอย่าง
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive 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">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
เคล็ดลับ: &ครั้ง; (×) เป็นเอนทิตี HTML ที่เป็นไอคอนที่ต้องการสำหรับปุ่มปิด แทนที่จะเป็นตัวอักษร "x"
สำหรับรายการของเอนทิตี HTML ทั้งหมดโปรดไปที่การอ้างอิงเอนทิตี HTML ของเรา
การแจ้งเตือนแบบเคลื่อนไหว
คลาส.fadeและ.showจะเพิ่มเอฟเฟกต์จางเมื่อปิดข้อความเตือน:
ตัวอย่าง
<div class="alert alert-danger
alert-dismissible fade show">
ทำการอ้างอิงการแจ้งเตือน Bootstrap 4 ให้สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกการแจ้งเตือน วิธีการ และเหตุการณ์ทั้งหมด ไปที่ Bootstrap 4 JS Alert Referenceของเรา