By GokiSoft.Com|
19:30 12/10/2020|
Tài Liệu Bootstrap
Bootstrap 4 Alerts
Bootstrap 4 Alerts
Bootstrap 4 cung cấp một cách dễ dàng để tạo alert messages:
Success! This alert box indicates a successful or positive action.
Info! This alert box indicates a neutral informative change or action.
Warning! This alert box indicates a warning that might need attention.
Danger! This alert box indicates a dangerous or potentially negative action.
Primary! This alert box indicates an important action.
Secondary! This alert box indicates a less important action.
Dark! Dark grey alert box.
Light! Light grey alert box.
Các Alert được tạo bởi class .alert, sau đó ta cũng có các class .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark:
Ví dụ
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>Alert Links
Bạn có thể thêm class alert-link cho link bên trong alert box:
Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.
Primary! You should read this message.
Secondary! You should read this message.
Dark! You should read this message.
Light! You should read this message.
Ví dụ
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>Closing Alerts (Đóng alert)
×Click on the "x" symbol to the right to close me.
Để đóng hộp alert, bạn hãy thêm class .alert-dismissible. Sau đó thêm class="close" và data-dismiss="alert" để khi click vào nút đóng bên cạnh nó sẽ làm hộp alert biến mất.
Ví dụ
<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>Chú ý: ký tự × chính là dấu (×).
Animated Alerts
×Click on the "x" symbol to the right to close me. I will "fade" out.
Class .fade và .show tạo hiệu ứng fade khi đóng hộp alert:
Ví dụ
<div class="alert alert-danger alert-dismissible fade show">Tags:
