Bài 14: Alert và Button trong Bootstrap 4

0
289

Xin chào các bạn, trong bài này, mình sẽ giới thiệu cho các bạn những thành phần chính là Alert và Button trong Bootstrap 4.

Alert – Thông báo

Alert là dạng thông báo, các bạn có thể sử dụng bằng cách dùng class alert alert-*

Có tất cả 8 loại alert với 8 màu mang ý nghĩa khác nhau:

+ primary: thông thường

+ secondary: thông báo thứ cấp

+ success: thông báo thành công

+ danger: thông báo nguy hiểm

+ warning: cảnh báo

+ info: thông báo thông tin

+ light: màu sáng

+ dark: màu tối

Alert trong Bootstrap 4

Ví dụ về cách dùng:

Button trong Bootstrap 4

Định nghĩa các class button trong bootstrap 4

Để có thể làm việc tốt với các class này thì các bạn cần phải nắm rõ các class mẫu sau đây:

ClassMô tả
.btnButton mặc định (Bắt buộc phải khai báo)
.btn-primaryTạo ra button màu xanh dương đậm
.btn-successTạo ra button màu xanh
.btn-infoTạo ra button màu xanh dương
.btn-warningTạo ra button màu cam
.btn-dangerTạo ra button màu đỏ
.btn-linkTạo ra button có dạng cick liên kết

Ví dụ:

Kết quả:

Lưu ý: Các bạn xem code và để ý là phần class button cũng giống như các class khác là nó cần được khai báo một class mặc định là class cha .btn ,sau đó các bạn muốn khai báo class con nào thì lồng vào sau class btn là ok.

Class resize button bootstrap 4

ClassMô tả
.btn-lgTạo ra button với size lớn nhất
.btn-smTạo ra button với size nhỏ vừa
.btn-xsTạo ra button với size nhỏ xíu
.btn-blockTạo ra button với dạng block.

Ví dụ:

Kết quả:

Lưu ý: Cũng giống như cách khai báo class ở phần trên bằng cách lồng trực tiếp vào class cha .btn . Các bạn có thể resize theo độ phân giải màn hình mà các bạn đang làm việc một cách đơn giản và tối ưu nhất.

Kết luận

Bài viết mình xin dừng lại tại đây vì đã đủ khi làm việc với alert và button trong bootstrap 4 rồi. Hẹn các bạn ở trong các bài viết tiếp theo.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây