Chúng ta đã học từ chương trước rằng Bootstrap yêu cầu một phần tử chứa hay vùng chứa để bao bọc nội dung trang web rồi phải không nào. Trong bài này chúng ta sẽ tìm hiểu chi tiết hơn về vùng chứa container trong Bootstrap 4 các bạn nhé!
Container cơ bản
Vùng chứa container được sử dụng để bao bọc toàn bộ nội dung bên trong chúng, bootstrap 4 có sẵn hai lớp vùng chứa:
- Lớp .container cung cấp một vùng chứa responsive có chiều rộng cố định
- Lớp .container-fluid cung cấp một vùng chứa có chiều rộng toàn phần kéo dài toàn bộ chiều rộng của khung nhìn
Vùng chứa cố định (Fixed Container)
Sử dụng lớp .container để tạo một vùng chứa responsive, có chiều rộng cố định.
Lưu ý rằng chiều rộng của nó (chiều rộng tối đa) sẽ thay đổi trên các kích thước màn hình khác nhau:
Mở ví dụ bên dưới và thay đổi kích thước cửa sổ trình duyệt để thấy rằng chiều rộng vùng chứa sẽ thay đổi tại các điểm ngắt khác nhau:
<div class="container"> <p>Chào các bạn! Phần này nằm trong Container</p> <p>Thay đổi kích thước màn hình cửa sổ của bạn để thấy sự thay đổi</p> </div>
Vùng toàn màn hình (Fluid Container)
Sử dụng lớp .container-liquid để tạo vùng chứa có chiều rộng toàn màn hình, vùng chứa sẽ luôn kéo dài toàn bộ chiều rộng của màn hình (chiều rộng luôn là 100%):
Ví dụ:
<div class="container"> <h1 id="container-responsive">Container Responsive</h1> <p>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng.</p> </div> <div class="container-sm border">.container-sm</div> <div class="container-md mt-3 border">.container-md</div> <div class="container-lg mt-3 border">.container-lg</div> <div class="container-xl mt-3 border">.container-xl</div>
Padding container
Theo mặc định, vùng chứa có phần đệm ( khoảng cách từ viền đến nội dung) bên trái và bên phải 15px, không có phần đệm trên cùng hoặc dưới cùng. Tuy nhiên chúng ta có thể sử dụng các tiện ích giãn cách, chẳng hạn như padding và margin bổ sung để làm cho chúng trông đẹp hơn. Ví dụ: .pt-3 có nghĩa là "thêm phần đệm trên cùng 16px":
Ví dụ:
<div class="container pt-3"></div>
Đường viền và màu sắc vùng chứa (Container Border and Color)
Các tiện ích khác, chẳng hạn như đường viền và màu sắc, cũng thường được sử dụng cùng với các vùng chưa.
Copy đoạn code ví dụ sau và chạy thử:
<div class="container p-3 my-3 border"> <h1>Container có viền</h1> <p>Vùng chứa này có đường viền và một số phần đệm và lề bổ sung.</p> </div> <div class="container p-3 my-3 bg-dark text-white"> <h1>Container có màu nền tối</h1> <p>Vùng chứa này có màu nền tối và văn bản màu trắng, cùng một số phần đệm và lề bổ sung.</p> </div> <div class="container p-3 my-3 bg-primary text-white"> <h1>Container có màu nền xanh</h1> <p>Vùng chứa này có màu nền xanh lam và văn bản màu trắng, cùng một số phần đệm và lề bổ sung.</p> </div>
Vùng chứa đáp ứng (Responsive Containers)
Bạn cũng có thể sử dụng các lớp .container-sm | md | lg | xl để tạo các vùng chứa đáp ứng.
Chiều rộng tối đa (max-width) của vùng chứa sẽ thay đổi trên các kích thước màn hình / chế độ xem khác nhau:
Ví dụ:
<div class="container"> <h1>Container Responsive</h1> <p>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng.</p> </div> <div class="container-sm border">.container-sm</div> <div class="container-md mt-3 border">.container-md</div> <div class="container-lg mt-3 border">.container-lg</div> <div class="container-xl mt-3 border">.container-xl</div>
Lời kết:
Trên đây là chi tiết về cách dùng container trong Bootstrap 4. Tùy theo sở thích và yêu cầu của mình hãy chọn container hợp lý nhất các bạn nhé. Chúc các bạn thành công!
