Sử dụng Container trong Bootstrap


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.

Có Thể Bạn Quan Tâm :   Chỉ định thầu là gì? Trường hợp nào được áp dụng hình thức chỉ định thầu?

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.

Có Thể Bạn Quan Tâm :   Tiêu & Dùng

container

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

Chúng ta sử dụng container-fluid để tạo một khung có chiều dài tràn màn hình.

Có Thể Bạn Quan Tâm :   Bột sữa gầy là gì? Thành phần, công dụng và ứng dụng trong thực phẩm

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

Sourcecode

Sourcecode

Hãy đăng ký kênh YouTube dưới đây để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khóa học lập trình MIỄN PHÍ tại đây

Back to top button