Bootstrap là 1 framework HTML, CSS và JavaScript cho phép người dùng dễ dàng thiết kế website theo 1 chuẩn nhất, tạo các website thân thiện với các thiết bị cầm tay như mobile, ipad, tablet,. Trong khuôn khổ bài viết này mình sẽ giới thiệu về Container trong Bootstrap 4, phân biệt các container và cách sử dụng container
Các container thường được sử dụng để bọc nội dung bên trong chúng và có 2 lớp container
- vùng chứa cung cấp một vùng chứa có chiều rộng tương thích [vùng chứa có chiều rộng cố định đáp ứng]
- container-fluid cung cấp một container có đủ chiều rộng, trải rộng toàn bộ chiều rộng của khung nhìn [container có chiều rộng đầy đủ]
Container cố định
Use class. vùng chứa để tạo vùng chứa câu trả lời, 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
bình chứa chất lỏng
Use class. container-liquid để tạo vùng chứa có đủ chiều rộng, 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%]
đệm container
Theo mặc định, các vùng chứa phần đệm 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. Do đó, chúng tôi thường sử dụng các tiện ích giãn cách, chẳng hạn như phần đệm và lề bổ sung để làm cho chúng trông đẹp hơn. Ví dụ. . pt-3 có nghĩa là "thêm phần padding-top 16px"
Trang Bootstrap đầu tiên của tôi
Vùng chứa này có phần đệm trên cùng là 16 pixel [. pt-3]
Cố gắng loại bỏ các. pt-3 để thấy sự khác biệt
Container Border và Color
Những tiện ích khác, chẳng hạn như đường viền hay màu sắc thường được sử dụng cùng với các thùng chứa
Vùng chứa đáp ứng
You can't use. thùng chứa-sm. md. lg. lớp xl để tạo vùng chứa với chiều rộng tương thích
chiều rộng tối đa của vùng chứa sẽ thay đổi theo kích thước màn hình/góc nhìn khác nhau
.container-sm
. vùng chứa-md
. vùng chứa-lg
. vùng chứa-xl
Kết luận
Trên đây là một số lớp thường được sử dụng của Container trong Bootstrap 4 và ứng dụng của nó, hy vọng giúp ích cho các bạn trong quá trình học tập html css
Bootstrap Grid cung cấp một cách dễ dàng và mạnh mẽ để tạo các trang web cục bộ thích ứng với mọi hình dạng và kích thước. Nó được xây dựng bằng flexbox với cách tiếp cận thiết bị di động ưu tiên. Ngoài ra, nó hoàn toàn trả lời câu hỏi và sử dụng hệ thống mười hai cột [12 cột có sẵn trên mỗi hàng] và sáu cấp độ phản hồi mặc định
Bạn có thể sử dụng các lớp được xác định trước của Bootstrap để nhanh chóng tạo ra một tổ chức cục bộ cho các loại thiết bị khác nhau như điện thoại di động, máy tính bảng, máy tính xách tay, máy tính để bàn, v.v. v. Ví dụ. bạn có thể sử dụng các lớp
Column one
Column two
Column one
Column two
Column three
Column one
Column two
Column one
Column two
Column three
Tương tự, bạn có thể sử dụng các lớp
Column one
Column two
Column one
Column two
Column three
Column one
Column two
Column one
Column two
Column three
Column one
Column two
Column one
Column two
Column three
Bảng sau đây tóm tắt các tính năng chính của Bootstrap Grid
Đặc trưng Bootstrap Grid SystemX-Small [xs]