การแจ้งเตือน
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>
ลองตัวเอง» การแจ้งเตือนการปิดบัญชี
เพื่อปิดข้อความแจ้งเตือนให้เพิ่ม class="close"
และ data-dismiss="alert"
เพื่อการเชื่อมโยงหรือองค์ประกอบปุ่ม:
ตัวอย่าง
<div class="alert alert-success">
<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"
การแจ้งเตือนเคลื่อนไหว
.fade
และ .in
เรียนเพิ่มผลซีดจางเมื่อปิดข้อความแจ้งเตือน:
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 »
กรอก Bootstrap แจ้งเตือนอ้างอิง
สำหรับการอ้างอิงที่สมบูรณ์ของทุกตัวเลือกการแจ้งเตือนวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap อ้างอิง JS แจ้งเตือน