NTM Solutions

Facebook Youtube Google+

Thứ Sáu, 17 tháng 3, 2017

Tự học Bootstrap – Cơ bản – bài 08 – Hộp thông báo

Thông báo

Bootstrap cung cấp 01 cách thức dễ dàng tạo ra các hộp cảnh báo được định dạng sẵn:


Các cảnh báo được tạo ra bằng lớp .alert, sau đây là các lớp cảnh báo có trong Bootstrap .alert-success, .alert-info, .alert-warning hoặc .alert-danger:

Ví dụ:

<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>

Liên kết thông báo

Thêm lớp alert-link vào bất kỳ liên kết nào bên trong hộp cảnh báo để tạo ra các liên kết cùng màu sắc (ton sur ton):


Ví dụ:

<div class="alert alert-success">
  
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.</div>

Thông báo có nút đóng



Để đóng hộp thông báo , thêm 01 lớp .alert-dismissable vào lớp container của hộp thông báo. Sau đó thêm lớp class="close" và lớp data-dismiss="alert" cho 01 liên kết hoặc 01 nút (khi bạn nhấp chuột trên đối tượng này ,hộp cảnh báo sẽ biến mất).

Ví dụ:

<div class="alert alert-success alert-dismissable">
  
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  
<strong>Success!</strong> Indicates a successful or positive action.</div>
Thuộc tính aria-* và &times; explanation

To help improve accessibility for people using screen readers, you should include the aria-label="close" attribute, when creating a close button.

&times; (×) is an HTML entity that is the preferred icon for close buttons, rather than the letter "x".

Thông báo “động”

02 lớp .fade.in thêm 01 hiệu ứng nhạt dần khi đóng hộp thông báo:

Ví dụ:


<div class="alert alert-danger fade in">  
video