ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

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>
ลองตัวเอง»

การแจ้งเตือนการปิดบัญชี

เพื่อปิดข้อความแจ้งเตือนให้เพิ่ม class="close" และ data-dismiss="alert" เพื่อการเชื่อมโยงหรือองค์ประกอบปุ่ม:

ตัวอย่าง

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
ลองตัวเอง»

aria-* แอตทริบิวต์และ &times; คำอธิบาย

เพื่อช่วยปรับปรุงการเข้าถึงสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอคุณควรจะรวมถึง aria-label="close" แอตทริบิวต์เมื่อสร้างปุ่มปิด

&times; (×) &times; (×) เป็นนิติบุคคล HTML ที่เป็นไอคอนที่แนะนำสำหรับปุ่มปิดมากกว่าตัวอักษร "x"


การแจ้งเตือนเคลื่อนไหว

.fade และ .in เรียนเพิ่มผลซีดจางเมื่อปิดข้อความแจ้งเตือน:

ตัวอย่าง

<div class="alert alert-success fade in">
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 »


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

สำหรับการอ้างอิงที่สมบูรณ์ของทุกตัวเลือกการแจ้งเตือนวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap อ้างอิง JS แจ้งเตือน