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

Trong bài tập này, chúng ta sẽ chỉ sử dụng Bootstrap 5 do đó, việc setup hết sức đơn giản.

Bước 1: Download Bootstrap 5, giải nén và copy vào folder bài tập. Các hình ảnh trong bài tập bạn có thể download tại đây. Sau khi setup xong, dự án của chúng ta sẽ có cấu trúc như sau:

Bước 2: Tất nhiên là tạo file index.html rồi, với Visual Studio Code các bạn có thể tạo 1 file HTML với template HTML5 một cách nhanh chóng.

Bước 3 (không bắt buộc): Cài đặt các extensions cho VSC để lập trình dễ dàng hơn. Với bài tập này, mình gợi ý sử dụng các extensions sau:

  • HTML CSS Support
  • HTML Snippets
  • Live Server

2 extensions đầu tiên sẽ hỗ trợ highlight syntax, gợi ý code cho HTML và CSS. Live Server sẽ giúp chúng ta refresh lại browser mỗi lần bấm lưu code (ctrl + s).

Xây dựng giao diện

Mình sẽ chia nhỏ giao diện thành các phần khác nhau và khi thực hiện, mình sẽ tận dụng tối đa các lớp (class CSS) được định nghĩa sẵn trong Bootstrap 5.

Menu

Bootstrap có định nghĩa sẵn các classes về thanh điều hướng (navigation bar – navbar). Các classes này sẽ hỗ trợ chúng ta định dạng logo (branding), menu (navigations) và một vài thứ khác nữa. Quan trọng nhất là tất cả chúng đều hỗ trợ responsive. Ví dụ với menu bên phải của chúng ta, khi thu nhỏ màn hình lại, nó sẽ tự động chuyển đổi.

Các bạn chỉ cần truy cập tài liệu, kéo dần từ trên xuống và chọn mẫu, sau đó copy phần code hướng dẫn vào, cuối cùng là đổi nội dung theo chủ đề.

Các sections

Sau khi thực hiện xong menu, mình sẽ chia phần nội dung ra thành các phần khác nhau (section). Từ trên xuống có các sections như:

  • banner
  • newsletter
  • features
  • html
  • react
  • faqs
  • trainers
  • footer

Để xây dựng giao diện (layout) các sections này, mình sử dụng đến các lớp trong hệ thống lưới của Bootstrap (grid system). Nếu các bạn chưa có khái niệm về hệ thống lưới của BS, có lẽ các bạn sẽ cần đọc thêm bài giới thiệu về hệ thống lưới cũng như hệ thống lưới trong Bootstrap.

Tiếp theo, mình sử dụng các classes tiện ích (utilities) để định dạng background, font, màu và size chữ. Riêng section FAQs có thêm hiệu ứng khi click vào câu hỏi. Các bạn cũng không cần lo lắng quá nha, BS hỗ trợ tính năng này luôn, các bạn tham khảo thêm về Accordion nha.

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

HTML cho phép chúng ta nhúng các đối tượng multimedia vào trang web của mình. Các bạn có thể tham khảo trong bài viết làm việc với multimedia nha.

Popup đăng ký

Ở phần banner, chúng ta có 1 button đăng ký, khi người dùng click vào button này, một popup (modal) sẽ hiện ra để người dùng điền form đăng ký.

Cũng tương tự như Accordion, Bootstrap hỗ trợ tính năng Modal, các bạn có thể dễ dàng xây dựng các popup đẹp lung linh mà không cần phải viết bất cứ 1 dòng mã JavaScript nào cả.

kết luận

Bài viết này nhằm mục đích giới thiệu tổng thể về Bootstrap 5. Trong bài viết này, mình gợi ý một số tính năng của Bootstrap 5, đây là 1 thư viện lâu đời, với hệ thống tài liệu (documents) rất rõ ràng, các bạn hãy thử tự mình học cách sử dụng nó. Dưới đây là toàn bộ mã nguồn (HTML) của bài tập, các bạn hãy cố gắng tự mình thực hiện trước khi tham khảo nhé.