Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Component Alert, Badge Và Progress Bars Trong Bootstrap (Phần 9)

Component Alert, Badge Và Progress Bars Trong Bootstrap (Phần 9)


Ngày 2 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component alert, badge và progress bars trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Component Alert:

Alert giúp chúng ta đưa ra thông báo khi người dùng thực hiện hành động nào đó trên trang web của mình. Ví dụ như là bạn có một Form đăng kí khi người dùng nhập đầy đủ thông tin thì sẽ đưa ra thông báo thành công ngược lại sẽ thông báo lỗi. Để gọi component này thì ta sẽ gọi một thẻ div với class alert alert-(color) với color ở đây là các màu cơ bản của Bootstrap như primary, success, danger... Để hiểu rõ hơn hãy cùng mình xem ví dụ dưới đây nhé:

Component Alert:

See the Pen Alert Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Những màu thông báo khác nhau sẽ có một nhiệm vụ nhất định nên bạn cần xem xét sử dụng màu cho phù hợp nhé. Component Alert còn cung cấp cho chúng ta một class alert-link giúp chèn đường dẫn vào thông báo. Để nắm rõ hơn hãy cùng mình xem ví dụ sau đây nha:

Class alert-link:

See the Pen alert-link Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Phần cuối mình muốn giới thiệu là thêm chức năng đóng thông báo bằng cách sử dụng class alert-dismissible cho thẻ div chứa class alert. Sau đó chúng ta sẽ tạo một nút bên trong nó có nhiệm vụ tắt thông báo với class class="close" và thuộc tính data-dismiss="alert". Để hiểu rõ hơn bạn xem ví dụ bên dưới nhé:

Tắt thông báo (alert):

See the Pen Alert Close Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Component Badge:

Component Badge được sử dụng để thêm thông tin bổ sung cho nội dung trong trang web ví dụ như là số đếm ở phần thông báo trong Facebook, số email mà bạn chưa đọc... Để gọi component badget thì ta sẽ sử dụng một thẻ span với class là badge badge-(color) với color mà các màu Bootstrap cơ bản như là primary, success... Nào bây giờ cùng mình đi vào ví dụ để nắm rõ hơn nhé:

Component Badge:

See the Pen Component badget Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra Bootstrap còn cung cấp cho chúng ta một class badge-pill giúp làm các component badget tròn hơn. Để hiểu hơn bạn xem ví dụ dưới đây nhé:

Class badge-pill:

See the Pen badget-pill Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bây giờ chúng ta thử kết hợp component badget và component button để tạo một nút thông báo với số lượng tin nhắn chưa đọc cho trang web của chúng ta thử xem sao nhé:

Thông báo tin nhắn:

See the Pen thông báo badget by haycuoilennao19 (@haycuoilennao19) on CodePen.

Component Progress Bars:

Progress bar (thanh tiến trình) thường được sử dụng để thông báo cho người dùng biết chương trình đã xử lý được bao nhiêu %. Ví dụ như bạn download một file trên web thì Google Chorme sẽ hiển thị thanh tiến trình cho bạn biết đã download được bao nhiêu % hay là thời gian phải chờ để download xong. Bootstrap cung cấp cho chúng ta component Progress bar để tạo giao diện cho thanh tiến trình đẹp và nhanh hơn. Để tạo component này thì mình sẽ gọi một thẻ div với class progress và bên trong nó là một thẻ div con với class progress-bar. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Component progress-bar:

See the Pen progress-bar Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Mình có lưu ý nhỏ là thanh tiến trình thường luôn thay đổi theo thời gian bằng cách sử dụng Javascript. Nhưng do thiết kế giao diện nên mình sẽ sử dụng thuộc tính width để giả định % chương trình đã được xử lý trong thanh tiến trình nhé. Bây giờ chúng ta sẽ đi vào thêm số vào thanh tiến trình để người dùng có thể biết được chính xác hơn. Để nắm rõ hơn bạn xem đoạn code sau nhé:

Thêm số vào progress-bar:

See the Pen Add number in progress-bar by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để thêm màu sắc cho component này thì bạn chỉ cần thêm class bg-(color) với color là các màu mặc định trong Bootstrap như primary, success... vào thẻ div với class progress-bar. Để hiểu rõ hơn thì hãy cùng mình xem ví dụ sau đây nhé:

Thêm màu vào progress-bar:

See the Pen Color progress-bar Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để tạo thanh tiến trình sọc cho component này thì bạn chỉ cần thêm class progress-bar-striped vào trong thẻ div class progress-bar. Để nắm rõ hơn hãy cùng mình xem ví dụ dưới đây nhé:

Class progress-bar-striped:

See the Pen progress-bar-striped Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Đối với thanh tiến trình sọc thì chúng ta có thể tạo thêm hiệu ứng chuyển động bằng cách thêm class progress-bar-animated vào trong thẻ div class progress-bar rogress-bar-striped. Nhưng theo mình tìm hiểu thì nó chỉ hoạt động trên trình duyệt safari và không hoạt động trên Goole Chorme hay FireFox. Do vậy mình sẽ chỉ cung cấp thông tin thêm về class này chứ không thể xem ví dụ nhé.

Tiếp theo chúng ta sẽ đi vào cách thêm nhiều thanh tiến trình con vào trong component progress bar. Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

Thêm nhiều thanh tiến trình con:

See the Pen thêm nhiều thanh tiến trình by haycuoilennao19 (@haycuoilennao19) on CodePen.

Sau đây mình sẽ có ví dụ nho nhỏ làm cho thanh tiến trình chạy bằng cách dựa vào thời gian mà chúng ta sẽ thiết lập độ rộng cho nó bằng Jquey. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

See the Pen example progress by haycuoilennao19 (@haycuoilennao19) on CodePen.

Một lưu ý nhỏ là bạn muốn xem thanh tiến trình hoạt động thì có thể tải lại trang vì khi vừa khởi động trang thì nó đã hoạt động rồi hoặc là bạn nhấp vào Codepen trực tiếp để xem kết quả nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các bạn nắm được thêm các component trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!