Hướng dẫn container trong bootstrap - container trong bootstrap

Nội dung bài viết

Giới thiệu nội dung bài viết

Trong quá trình lập trình web, chắc hẳn các bạn sẽ gặp phải tình huống muốn thiết lập độ dài cố định cho nội dung các phần tử trong website để nội dung được bố trí rõ ràng hơn. Từ đó giúp người dùng có những trải nghiệm tốt nhất khi sử dụng trang web của bạn.lập trình web, chắc hẳn các bạn sẽ gặp phải tình huống muốn thiết lập độ dài cố định cho nội dung các phần tử trong website để nội dung được bố trí rõ ràng hơn. Từ đó giúp người dùng có những trải nghiệm tốt nhất khi sử dụng trang web của bạn.


Để giải quyết trường hợp này, lúc này các lập trình viên sẽ phải cần dùng đến thuộc tính container trong Bootstrap. Đó cũng chính là chủ đề hôm nay mà anh muốn chia sẻ với các bạn, sử dụng Container trong Bootstrap. Trước khi đi vào cụ thể cách sử dụng, anh sẽ giải thích, giới thiệu về 2 loại Bootstrap gồm container và container-fluid để các bạn hiểu được thuộc tính này là gì? Sau đó chúng ta sẽ lần lượt đi qua các phần hướng dẫn cách để sử dụng với Container như thiết lập độ dài cố định, độ dài tràn màn hình, cấu hình padding, border, color, responsive cho container.container trong Bootstrap. Đó cũng chính là chủ đề hôm nay mà anh muốn chia sẻ với các bạn, sử dụng Container trong Bootstrap. Trước khi đi vào cụ thể cách sử dụng, anh sẽ giải thích, giới thiệu về 2 loại Bootstrap gồm container và container-fluid để các bạn hiểu được thuộc tính này là gì? Sau đó chúng ta sẽ lần lượt đi qua các phần hướng dẫn cách để sử dụng với Container như thiết lập độ dài cố định, độ dài tràn màn hình, cấu hình padding, border, color, responsive cho container.


Hi vọng những chia sẻ dưới đây cùng với những ví dụ minh hoạ cụ thể cho mỗi phần sẽ giúp các bạn dễ dàng nắm bắt được kiến thức này và áp dụng được quá trình lập trình web một cách hiệu quả nhất.lập trình web một cách hiệu quả nhất.

1. Container là gì

Container chúng ta sử dụng để bọc tất cả các thành phần của web vào trong nó. Nó giống như một cái khung trong đó ta chứa đựng các thành phần của web. Có 2 loại containers được sử dụng để bao bọc các phần tử web đó là container và container-fluid chúng ta sử dụng để bọc tất cả các thành phần của web vào trong nó. Nó giống như một cái khung trong đó ta chứa đựng các thành phần của web. Có 2 loại containers được sử dụng để bao bọc các phần tử web đó là container và container-fluid

Hướng dẫn container trong bootstrap - container trong bootstrap

Như các em thấy thiết kế blog của anh. Ngay tại trang chủ levunguyen.com anh sử dụng container để bao bọc các thành phần website. Các em sẽ thấy có khoảng trống ở bên tay trái và tay phải. Còn nội dung sẽ ở phần ở giữa. Sử dụng container khi chúng ta muốn thiết lập độ dài cố định cho nội dung các phần tử trong website

Còn khi các em vào các bài đọc chi tiết anh sử dụng container-fluid thì nội dung sẽ tràn đầy màn hình không có khoảng trống bên trái và bên phải

2. Thiết lập độ dài cố định

Chúng ta sử dụng container khi muốn nội dung cố định của khung hiển thị.

3. Thiết lập độ dài tràn màn hình

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

1
2
3
4
  class="container">
  

My First Bootstrap Page

This is some text.

3. Thiết lập độ dài tràn màn hình

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

  class="container-fluid">
  

My First Bootstrap Page

This is some text.

Mặc định các container trong bootstrap có padding left và right là 15px. Nó không có padding top và bottom. Chúng ta có thể thêm thuộc tính pt để container có thể padding top như sau

1
2
3
4
  class="container">
  

My First Bootstrap Page

This is some text.

4. Cấu hình padding cho container

5. Cấu hình border và color cho container

1
  class="container pt-3">
1
2
3
4
5
 class="container p-3 my-3 border">
 class="container p-3 my-3 bg-dark text-white">
 class="container p-3 my-3 bg-primary text-white">
6. Cấu hình Responsive kích thước cho containerChúng ta có thể sử dụng container-sm
classmd lg xl để tạo nên chức năng responsive cho website hiển thị trên các thiết bị khác nhau. Ứng với mỗi sm, md, lg, xl tương ứng với độ rộng theo px như sau. màn hình cực nhỏ (màn hình nhỏ (>=576px)
màn hình vừa (>= 768px)màn hình lớn (>=992px)màn hình cực lớn.container-sm 100% 540px
720px màn hình lớn (>=992px)màn hình lớn (>=992px).container-sm 100% 540px
720px màn hình lớn (>=992px)màn hình lớn (>=992px)màn hình lớn (>=992px)100% 540px
720px màn hình lớn (>=992px)màn hình lớn (>=992px)màn hình lớn (>=992px)màn hình lớn (>=992px)540px

3. Thiết lập độ dài tràn màn hình

Hướng dẫn container trong bootstrap - container trong bootstrap

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

Hướng dẫn container trong bootstrap - container trong bootstrap

Hướng dẫn container trong bootstrap - container trong bootstrap


My First Bootstrap Page

This is some text.

4. Cấu hình padding cho container

1
2
3
4
  class="container">
  

My First Bootstrap Page

This is some text.