Tìm hiểu container trong bootstrap 5

15/12
Thạch
Bootstrap 5
0
427

Container-fluid là gì trong Bootstrap? Bài viết sẽ cung cấp cho bạn mọi điều cần biết về Container trong Bootstrap 5.

Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?

Container trong Bootstrap là gì?

Container là một phần không thể thiếu trong Bootstrap. Container được sử dụng để thiết lập lề (margin) cho nội dung, giúp nội dung thích ứng với 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 các phần nội dung trên website hay tạo các 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 một hộp chứa các phần tử khác bên trong. Chiếc 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ị.

Bài viết này, Sinitc sẽ hướng dẫn chi tiết hơn nữa cách sử dụng container và các thành phần đi kèm trong Bootstrap 5. Bootstrap 5 có 2 lớp container để bạn có thể lựa chọn và sử dụng:

Class .container cung cấp một vùng chứa có chiều rộng cố định responsive.

Class .container-fluid cung cấp một vùng chứa có chiều rộng đầy đủ, kéo dài toàn bộ chiều rộng của khung nhìn.

Tìm hiểu về 2 loại Container trong Bootstrap 5

Vùng chứa cố định

Sử dụng class .container để tạo một vùng chứa responsive, có chiều rộng cố định.

Lưu ý rằng chiều rộng của nó (max-width) sẽ thay đổi trên các kích thước màn hình khác nhau:

Kích thước màn hình	max-width
Extra Small <576px	100%
Small ≥576px	540px
Medium ≥768px	720px
Large ≥992px	960px
Extra Large ≥1200px	1140px
XXL ≥1400px	1320px

XXL (≥1400px) là điểm mới trong Bootstrap 5. Trên Bootstrap 4 mới chỉ hỗ trợ ở điểm Extra large (≥1200px).

Ví dụ: hãy thử dùng code sau lưu nó vào 1 file HTML và thử mở nó trên cửa sổ trình duyệt. Sau đó điều chỉnh kích thước cửa sổ để xem sự thay đổi nhé!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Trang Bootstrap đầu tiên của Sinitc</h1>
  <p>Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên Sinitc</p>
</div>

</body>
</html>

Vùng chứa rộng

Sử dụng class .container-fluid để tạo vùng chứa có chiều rộng full với độ rộng màn hình (chiều rộng luôn là 100%)

Ví dụ:

<div class="container-fluid">
  <h1>Trang Bootstrap đầu tiên của Sinitc</h1>
  <p>Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên Sinitc</p>
</div>

Các thành phần bổ sung thêm cho Container

Các khoảng padding của Container

Mặc định, vùng chứa có phần đệm bên trái và bên phải, không có phần đệm trên/dưới. Do đó, chúng ta thường cần sử dụng thêm các tiện ích giãn cách, chẳng hạn như padding và margin bổ sung để làm cho chúng trông đẹp hơn. Ví dụ: .pt-5 có nghĩa là "thêm một khoảng đêm trên cùng (padding top)". Ví dụ:

<div class="container pt-5"></div>

Viền và màu sắc của Container

Các tiện ích khác như đường viền và màu sắc, cũng thường được sử dụng cùng với các Container.

Ví dụ 1:

<div class="container p-5 my-5 border">
  <h1>Sinitc</h1>
  <p>Container này có đường viền và một số phần đệm và lề bổ sung.</p>
</div>

Ví dụ 2:

<div class="container p-5 my-5 bg-dark text-white">
  <h1>Sinitc</h1>
  <p>Container có thêm định dạng nền đen, chữ trắng và một số padding/margin.</p>
</div>

Ví dụ 3:

<div class="container p-5 my-5 bg-primary text-white">
  <h1>Sinitc</h1>
  <p>Container có thêm định dạng nền xanh, chữ trắng và một số padding/margin.</p>
</div>

Bạn sẽ tìm hiểu thêm về màu sắc và các tiện ích đường viền trong các bài sau!

Responsive Container

Bạn cũng có thể sử dụng các class .container-sm | md | lg | xl để xác định khi nào vùng chứa sẽ responsive.

max-width của vùng chứa sẽ thay đổi trên các kích thước màn hình/chế độ xem khác nhau:

Class	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px	XXL ≥1400px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px

Ví dụ:

<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>
<div class="container-xxl">.container-xxl</div>

Ví dụ trên web Sinitc.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container pt-3">
  <h1>Container đáp ứng</h1>
  <p>Chỉnh lại kích thước cửa sổ trình duyệt để thấy sự thay đổi.</p>
</div>

<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>

</body>
</html>

Như đã nói ở trên, Bootstrap tạo một chuỗi class container xác định trước để giúp bạn xây dựng bố cục web như ý muốn.Bạn có thể tùy biến các class container xác định trước đó bằng cách chính sửa map Sass (được tìm thấy trong _variables.scss) sở hữu chúng:

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);

Ngoài việc tùy biến Sass, bạn cũng có thể tự tạo container riêng bằng cách kết hợp Sass như ví dụ dưới đây:

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}

// Usage
.custom-container {
@include make-container();
}

Trên đây là những thông tin hay cách tạo container cơ bản bằng Bootstrap 5. Hi vọng bài viết hữu ích với các bạn

Bài 3: Hệ thống lưới Grid System trong Bootstrap 5