Giới thiệu nội dung bài viết
Trong quá trình phát triển trang web, chắc chắn bạn sẽ gặp tình huống muốn đặt độ dài cố định cho các phần tử trên trang để bố cục trở nên rõ ràng hơn. Điều này giúp người dùng có trải nghiệm tốt nhất khi sử dụng trang web của bạn.
Để giải quyết vấn đề này, lập trình viên thường sử dụng thuộc tính container trong Bootstrap. Đây cũng là chủ đề chính mà chúng ta sẽ nói về trong bài viết này. Trước khi đi vào cách sử dụng cụ thể, chúng ta sẽ tìm hiểu về 2 loại container trong Bootstrap, đó là container và container-fluid, để bạn có thể hiểu cách hoạt động của thuộc tính này. Sau đó, chúng ta sẽ đi qua các hướng dẫn về cách sử dụng container, bao gồm đặt độ dài cố định, độ dài tràn màn hình, cấu hình padding, border, color và tạo tính responsive cho container.
Bạn đang xem: Sử dụng Container trong Bootstrap
Mong rằng những chia sẻ dưới đây cùng với các ví dụ minh họa sẽ giúp bạn nắm bắt kiến thức này một cách dễ dàng và áp dụng hiệu quả trong quá trình phát triển trang web.
1. Container là gì
Container được sử dụng để bao bọc tất cả các thành phần trên trang web. Nó giống như một khung chứa tất cả các thành phần của trang web. Có 2 loại container được sử dụng để bao bọc các phần tử trên trang web, đó là container và container-fluid.
Ví dụ trên trang chủ của levunguyen.com, chúng ta thấy container được sử dụng để bao bọc các thành phần của trang web. Có một khoảng trống ở cả hai phía bên trái và bên phải, trong khi nội dung được căn giữa. Sử dụng container khi bạn muốn đặt độ dài cố định cho các phần tử trên trang web.
Còn khi bạn xem các bài viết chi tiết, container-fluid được sử dụng để làm cho nội dung tràn đầy màn hình mà không có khoảng trống bên trái và bên phải.
2. Đặt độ dài cố định
Chúng ta sử dụng container khi muốn nội dung trong khung hiển thị có độ dài cố định.
3. Đặt độ dài tràn màn hình
Xem thêm : Arc Anime Là Gì – Arc Là Viết Tắt Của Từ Gì
Chúng ta sử dụng container-fluid để tạo một khung có chiều dài tràn màn hình.
4. Cấu hình padding cho container
Mặc định, các container trong Bootstrap có padding left và right là 15px. Không có padding top và bottom. Chúng ta có thể thêm thuộc tính pt để container có padding top như sau:
5. Cấu hình border và màu sắc cho container
6. Tính năng responsive cho container
Chúng ta có thể sử dụng các class container-sm, container-md, container-lg, container-xl để tạo tính năng responsive cho trang web trên các thiết bị khác nhau. Các class này tương ứng với các độ rộng theo px như sau: màn nhỏ (<576px), màn vừa (>=576px), màn lớn (>=768px), màn rộng (>=992px) và màn cực lớn (>=1200px).
7. Video demo
8. Thực hành và mã nguồn
