Alert và Button trong Bootstrap 4

• 25-06-2020 11:32:37
• by: baobinhnet

Trong bài học này, chúng ta sẽ đi tiếp với các class để tạo alert và button. Các class này cũng được sử dụng rất nhiều trong thực tế, mời các bạn cùng nghiên cứu trong bài viết này.

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



 

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:

Class	Mô tả
.btn	Button mặc định (Bắt buộc phải khai báo)
.btn-primary	Tạo ra button màu xanh dương đậm
.btn-success	Tạo ra button màu xanh
.btn-info	Tạo ra button màu xanh dương
.btn-warning	Tạo ra button màu cam
.btn-danger	Tạo ra button màu đỏ
.btn-link	Tạo ra button có dạng cick liên kết

Cùng xem ví dụ dưới đây nhé:


 

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

Class	Mô tả
.btn-lg	Tạo ra button với size lớn nhất
.btn-sm	Tạo ra button với size nhỏ vừa
.btn-xs	Tạo ra button với size nhỏ xíu
.btn-block	Tạo ra button với dạng block.

 

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

Vậy là chúng ta lại học thêm được 2 nhóm class quan trọng mới của Bootstrap 4. Hẹn gặp lại các bạn ở bài tiếp theo.



 

---

• Posted by baobinhnet
• 2020-06-25 11:22:30