Các vùng chứa trong Bootstrap với các ví dụ (3)

Như tên cho thấy, một vùng chứa được sử dụng để giữ hoặc liên kết một cái gì đó tương tự như vậy các vùng chứa trong bootstrap được sử dụng để lưu trữ hoặc liên kết nội dung qua một khung nhìn. Các vùng chứa thêm phần đệm vào nội dung bằng cách tạo lề cho nội dung từ tất cả bốn cạnh của khung nhìn và nó cũng có thể được thay đổi tùy theo nhu cầu. Các vùng chứa cũng có thể được lồng vào nhau.

Bây giờ, hãy để chúng tôi hiểu chi tiết từng lớp

vùng chứa

Trong bootstrap, lớp .container tạo một vùng chứa đáp ứng với chiều rộng cố định trong một khung nhìn. Nó đặt chiều rộng tối đa của một vùng chứa tùy thuộc vào kích thước của một khung nhìn.

Dưới đây là biểu đồ mô tả chiều rộng tối đa của lớp .container tùy thuộc vào kích thước của chế độ xem.

	Cực nhỏ	Nhỏ	Trung bình	Lớn	Cực lớn
max-width	100%	540px	720px	960px	1140px

Ví dụ

Hãy lấy một ví dụ để hiểu rõ hơn

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/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.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container bg-dark text-white" style>
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

Đầu ra

Đầu ra cho mã này sẽ là

Các vùng chứa trong Bootstrap với các ví dụ (3)

chất lỏng chứa

Trong bootstrap, lớp .container-liquid tạo một vùng chứa đáp ứng với chiều rộng cố định là 100% trong một khung nhìn. Nó đặt chiều rộng tối đa của vùng chứa thành 100% bất kể kích thước của chế độ xem.

Dưới đây là biểu đồ mô tả chiều rộng tối đa của lớp .container-chất lỏng.

	Cực nhỏ	Nhỏ	Trung bình	Lớn	Cực lớn
max-width	100%	100%	100%	100%	100%

Ví dụ

Hãy lấy một ví dụ để hiểu rõ hơn

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/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.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container-fluid bg-dark text-white">
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

Đầu ra

Đầu ra cho mã này sẽ là

Các vùng chứa trong Bootstrap với các ví dụ (3)