Buzz
Trong bài học về Bootstrap trước đó, Mytour đã giới thiệu về Grid System trong Bootstrap. Trong bài học này, chúng ta sẽ tiếp tục khám phá cách tạo Bố cục Cố định (Fixed Layout) với Bootstrap.
Hướng dẫn chi tiết tạo Bố cục Cố định (Fixed Layout) với Bootstrap
Hướng dẫn tạo Bố cục Cố định với Bootstrap
Trong Bootstrap 4, chúng ta có khả năng tạo bố cục trang web dựa trên pixel cố định. Tuy nhiên, chiều rộng của phần tử chứa sẽ thay đổi theo chiều rộng của viewport và bố cục giao diện Responsive.
Để tạo bố cục cố định cho giao diện Responsive, đầu tiên, chúng ta sử dụng lớp .container. Sau đó, tạo các hàng bằng cách sử dụng lớp .row để bao bọc nhóm cột theo chiều ngang. Đảm bảo rằng các hàng được đặt trong .container để căn chỉnh và padding đúng cách.
Để tạo các cột bên trong một hàng, chúng ta sử dụng các lớp lưới đã định sẵn như .col-*, .col-sm-*, .col-md-*, .col-lg-* và .col-xl-*. Trong đó, * đại diện cho số cột (từ 1 đến 12).
Lưu ý: Để đảm bảo cấu trúc giao diện Responsive, các thông tin như văn bản, hình ảnh, video, bảng, ... cần được đặt bên trong các cột. Chỉ có các cột mới có thể là con của các hàng.
Ví dụ: Trong ví dụ sau đây, chúng ta sẽ tạo bố cục giao diện Responsive với chiều rộng cố định là 720px trên các thiết bị có kích thước màn hình trung bình (chiều rộng màn hình lớn hơn hoặc bằng 768 px) như máy tính bảng. Hoặc có thể là 960px trên các thiết bị có kích thước màn hình lớn (lớn hơn hoặc bằng 992px) như laptop màn hình nhỏ, và 1140px trên các thiết bị có kích thước màn hình cực lớn (lớn hơn hoặc bằng 1200px) như máy tính.
Tuy nhiên, nếu viewport của thiết bị nhỏ hơn 768px nhưng lớn hơn hoặc bằng 576px, thì bố cục sẽ rộng 540px. Với viewport có kích thước nhỏ hơn 576px, bố cục sẽ chiếm toàn bộ chiều rộng. Ngoài ra, các cột được xếp chồng lên nhau theo chiều dọc sẽ được thu gọn trong cả hai trường hợp.
Kết quả trả về sẽ có dạng như sau:
Trong ví dụ trước, chúng ta đã sử dụng các lớp căn chỉnh như .mb-3, .ml-auto, mx-2 v.v. để điều chỉnh khoảng trắng giữa các phần tử. Các lớp .text-dark, .text-muted, .text-md-right cũng được sử dụng để thay đổi màu sắc và căn chỉnh văn bản.
Bài học về Bootstrap của Mytour vừa giới thiệu cách tạo Bố cục Cố định (Fixed Layout) với Bootstrap. Nếu có thắc mắc hoặc câu hỏi, hãy để lại ý kiến của bạn trong phần bình luận dưới bài viết.
Trong bài học tiếp theo, Mytour sẽ hướng dẫn cách tạo Fluid Layout với Bootstrap. Hãy theo dõi nhé.
