Container là 1 phần ko thể thiếu trong Bootstrap. Container được dùng để thiết lập lề (margin) cho nội dung, giúp nội dung thích ứng sở hữu bố cục của bạn. Container chứa phần tử row và row là container của column (còn được gọi là hệ thống lưới). Container để bao gói những phần nội dung trên web site hay tạo những hộp nội dung.
Lý thuyết là như vậy, dễ hình dung nhất, nói theo kiểu nôm na hơn thì Container tạo ra 1 hộp chứa những phần tử khác bên trong. Cái hộp này có chiều rộng được thiết lập theo kích thước của màn hình hiển thị.
Có 2 class container là .container và .container-fluid:
- .container phân phối những container được repair chiều rộng dựa trên độ rộng của màn hình hiển thị.
- .container-fluid phân phối những container sở hữu chiều rộng full, mở rộng toàn bộ chiều rộng vừa sở hữu vùng xem (viewpoint).
.container
Dùng .container để tạo container có chiều rộng thích ứng, repair theo độ rộng của màn hình thiết bị. Lưu ý rằng độ rộng của nó (max-width) sẽ thay đổi đổi theo những kích thước màn hình khác nhau.
Bootstrap chia kích thước chiều rộng của màn hình thành 5 loại:
- Cực bé: Màn hình có chiều rộng bé hơn 576px
- Bé: Màn hình có chiều rộng lớn hơn hoặc bằng 576px
- Trung bình: Màn hình có chiều rộng lớn hơn hoặc bằng 768px
- Rộng: Màn hình có chiều rộng lớn hơn hoặc bằng 992px
- Cực rộng: Màn hình có chiều rộng lớn hơn hoặc bằng 1200px
Màn hìnhCực nhỏNhỏTrung bìnhRộngCực rộngmax-width100percent540px720px960px1140px
Cụ thể:
- Ví dụ chiều rộng màn hình bé hơn 576px, container sẽ có chiều rộng 100%.
- 576px ≤ chiều rộng màn hình < 768px, container có chiều rộng 540px và hiển thị trên giữa.
- 768px ≤ chiều rộng màn hình < 992px, container có chiều rộng 720px và hiển thị trên giữa.
- 992px ≤ chiều rộng màn hình < 1200px, container có chiều rộng 960px và hiển thị trên giữa.
- Chiều rộng màn hình ≥ 1200px, container có chiều rộng 1140px và hiển thị trên giữa.
Thí dụ về bí quyết dùng .container:
<div class=”container”> <h1>Thí dụ về .container</h1> <p>Nội dung chi tiết.</p> </div>
1 file html toàn bộ sẽ như thế này:
<!DOCTYPE html> <html lang=”vi”> <head> <title>Thí dụ Bootstrap </title> <meta charset=”utf-8″> <meta title=”viewport” content material=”width=device-width, initial-scale=1″> <hyperlink rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js”></script> </head> <physique> <div class=”container”> <h1>Quản Trị Mạng</h1> <p><robust>Giới thiệu:</robust></p> <p>sentayho.com.vn đã trở nên mạng xã hội về khoa học khoa học, mở rộng nội dung để đáp ứng nhu cầu của những thành viên về nhiều lĩnh vực khoa học hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,…</p> <p>Thay đổi đổi kích thước trình thông qua để xem độ rộng thay đổi đổi như thế nào nhé.</p> </div> </physique> </html>
Bạn thử chạy code trên, thay đổi đổi kích thước cửa sổ trình thông qua để xem độ rộng của container đổi như nào nhé.
.container-fluid
Bạn sẽ dùng class .container-fluid lúc cần tạo tạo container sở hữu độ rộng full 100%, mở rộng nội dung toàn khuôn xem của màn hình (width luôn luôn là 100%).
Thí dụ về bí quyết dùng .container-fluid:
<div class=”container-fluid”> <h1>Thí dụ về .container-fluid</h1> <p>Nội dung văn bản cần trình bày.</p> </div>
Padding của container
Padding là khoảng bí quyết từ nội dung tới viền của container. Theo mặc định, container có padding trái và nên là 15px, ko có padding trên và dưới. Ví dụ cần thêm padding và margin thì sẽ cần dùng những tiện ích khoảng bí quyết để làm cho cho nội dung hiển thị đẹp hơn. Thí dụ, .pt-5 sẽ thêm 48px cho padding trên.
<div class=”container pt-5″></div>
Mình sẽ làm cho 1 bài chi tiết về những tiện ích khoảng bí quyết này sau nhé.
Viền và màu sắc sắc của container
Để thêm đường viền hay thay đổi đổi màu sắc sắc cho container chúng ta sẽ dùng tiện ích đường viền và màu sắc sắc. Vì khá dài, mình cũng sẽ viết riêng bài sau nhé.
Thí dụ về đường viền và màu sắc sắc container:
<div class=”container p-3 my-3 border”></div> <div class=”container p-3 my-3 bg-dark text-white”></div> <div class=”container p-3 my-3 bg-primary text-white”></div>
Giả sử mình có file html dưới đây:
<!DOCTYPE html> <html lang=”vi”> <head> <title>Thí dụ Bootstrap </title> <meta charset=”utf-8″> <meta title=”viewport” content material=”width=device-width, initial-scale=1″> <hyperlink rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js”></script> </head> <physique> <div class=”container p-3 my-3 border”>Thêm border cho container – sentayho.com.vn</div> <div class=”container p-3 my-3 bg-dark text-white”>Thí dụ đổi màu sắc nền container 1 – sentayho.com.vn</div> <div class=”container p-3 my-3 bg-success text-white”>Thí dụ về đổi màu sắc nền container 2 – sentayho.com.vn</div> </physique> </html>
Lúc chạy sẽ được kết quả như này:
Container thích ứng
Bạn có thể dùng những class .container-sm|md|lg|xl để tạo những container thích ứng (responsive, thực tình mình muốn để nguyên là responsive, viết thích ứng còn thấy khó hiểu hơn :().
Lúc dùng những class này thì độ rộng cao nhất} max-width của container sẽ thay đổi đổi theo kích thước màn hình hoặc vùng xem:
Màn hìnhCực bé
Bé
Trung bình
Rộng
Cực rộng
.container-sm100percent540px720px960px1140px.container-md100percent100percent720px960px1140px.container-lg100percent100percent100percent960px1140px.container-xl100percent100percent100percent100percent1140px
Phương pháp dùng những class này sẽ như sau:
<div class=”container-sm”>.container-sm</div> <div class=”container-md”>.container-md</div> <div class=”container-lg”>.container-lg</div> <div class=”container-xl”>.container-xl</div>
Ví dụ chưa cài Bootstrap trên máy tính, bạn có thể thử dùng CSS editor on-line này để xem thử những container hoạt động ra sao nhé.
Bài tiếp: Grid System
