Bootstrap 5

bootstrap-5

Trong bài Bootstrap, mình đã giới thiệu tổng quan về Framework frontend phổ biến bậc nhất này. Lúc đó, phiên bản Bootstrap 5 còn đang ở giai đoạn thử nghiệm. Tới thời điểm hiện tại, Bootstrap đã được nâng cấp lên phiên bản 5.1 – đủ ổn định để các bạn có thể sử dụng trong các dự án mới của mình.

Trong bài viết này, mình sẽ giới thiệu một vài điểm mới trong Bootstrap 5. Sau đó chúng ta sẽ cùng nhau xây dựng 1 layout nho nhỏ để thực hành với FW này.

Các thay đổi trong Bootstrap 5

Tất nhiên, với một nâng cấp lớn (từ v4 -> v5) thì Bootstrap sẽ có rất rất nhiều thay đổi. Tuy nhiên, có một số thay đổi đáng kể như sau:

  1. Bootstrap 5 không còn phụ thuộc vào jQuery nữa.
  2. Ngưng hỗ trợ trình duyệt web Internet Explorer – nhờ vậy mà một số tính năng của trình duyệt web hiện đại được hỗ trợ trực tiếp mà không cần cấu hình dài dòng nữa.
  3. Nâng cao hệ thống lưới:
    • Thêm 1 breakpoint mới: xxl (1400px) -> đây là điểm mình kỳ vọng nhất. Vì chất lượng các màn hình ngày càng cao và breakpoint 1200px không còn đảm bảo cover được các màn hình này.
    • class gutter được đổi thành class tiện ích (g*) có thể sử dụng linh hoạt hơn
    • Loại bỏ thuộc tính “position: relative” ra khỏi column
  4. Cải thiện tài liệu (theo giới thiệu ở trang chủ của Bootstrap, họ đổi công cụ tạo ra tài liệu, điều này giúp tài liệu của Bootstrap 5 sẽ đẹp hơn, khoa học và dễ tra cứu hơn)
  5. Cải thiện về Form Control: Từ phiên bản 4 về trước, các form control (checkbox, radio button, …) được Bootstrap để mặc định. Do đó, có hiện tượng các trình duyệt khác nhau, trên các nền tảng khác nhau sẽ render (hiển thị) khác nhau. Ở phiên bản 5, Bootstrap reset style và ép tất cả theo style của mình -> giúp đồng bộ giao diện trên tất cả các trình duyệt web.
  6. Thêm rất nhiều class tiện ích. Có lẽ Bootstrap 5 không vì cái tôi là người anh lớn trong các FW frontend, họ đã tiếp thu những các hay của các FW frontend hướng đến các lớp tiện ích như TailwindCSS. Qua đó, họ bổ sung thêm rất nhiều class tiện ích, giúp lập trình viên đẩy nhanh hơn nữa quá trình phát triển giao diện.
  7. Xây dựng bộ Icons mới – Bootstrap Icons.

Ngoài ra, còn rất nhiều thứ thú vị khác được thêm vào ở phiên bản thứ 5 này. Các bạn hãy tự khám phá chúng nha. Tiếp theo đây, chúng ta sẽ cùng nhau xây dựng 1 giao diện web đơn giản bằng Bootstrap 5 để thấy được sự tiện dụng của FW này.

Xây dựng layout với Bootstrap 5

Đây là một bài tập nhỏ, để chúng ta có thể làm quen với Bootstrap 5. Các bạn có thể làm theo và sau đó, tự xây dựng thử cho mình 1 vài giao diện khác bằng BS5 nha.

Tổng qua giao diện

Cài đặt và thiết lập môi trường

Xây dựng giao diện

Menu

Các sections

Nhúng bản đồ (Google map) vào trang web

Popup đăng ký

Checklist