Tóm Tắt
Khái niệm bootstrap container
Trong ngôn ngữ lập trình HTML thì container chính là 1 phần tử có thể chứa được nhiều phần tử khác như <div>, <span>…
Mỗi lớp .container hay .container-fluid có thể được sử dụng cho các phần tử này.
Class .container-fluid
Lớp này được áp dụng cho 1 phần tử sẽ và sẽ làm cho phần từ này có chiều rộng là 100%.
Code html ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Container Example</title>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css”>
</head>
<body>
<h4>.container-fluid Example</h4><div class=”container-fluid” style=”background: #cdd;”>
.container-fluid
</div><script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js”></script>
</body>
</html>
Kết quả hình ảnh:
Class .container
Với clas này thì nó sẽ dựa vào kích thước chiều rộng màn hình của các thiết bị, và với bootstrap thì chúng ta chia làm 5 loại:
- Với các thiết bị có chiều rộng nhỏ hơn 567px được coi là Extra small
- Với các thiết bị có chiều rộng lớn hơn hoặc bằng 567px được coi là Small hay sm
- Với các thiết bị có chiều rộng lớn hơn hoặc bằng 768px được coi là Medium hay md
- Với các thiết bị có chiều rộng lớn hơn hoặc bằng 992px được coi là Large hay lg
- Với các thiết bị có chiều rộng lớn hơn hoặc bằng 1200px được coi là Extra Large hay xl
<h4 style=”color:#ff9249″>.container Example:</h4>
<div class=”container” style=”background: #cdd;”>
.container
</div>
Với TH1: Chiều rộng màn hình thiết bị nhỏ hơn 567px, khi đó phần từ sẽ có chiều rộng 100%
Với TH2: Chiều rộng màn hình thiết bị lớn hơn hoặc bằng 567px và nhỏ hơn 768px thì phần từ sẽ được hiển thị ở giữa và có chiều rộng là 567px
Với TH3: Chiều rộng màn hình thiết bị lớn hơn hoặc bằng 768px hay nhỏ hơn 992px thì phần từ sẽ hiển thị ở giữa và có chiều rộng 768px
Với TH4: Chiều rộng màn hình thiết bị lớn hơn hoặc bằng 992px và nhỏ hơn 1200px thì phần tử hiển thị ở giữa và có chiều rộng 992px
Với TH5: Chiều rộng màn hình thiết bị lớn hơn hoặc bằng 1200px thì phần tử sẽ hiển thị ở giữa và có chiều rộng là 1200px.
Hi vọng với những thông tin ở trên về cách sử dụng bootstrap container sẽ giúp bạn có thêm kiến thức bootstrap nhé. Chúc các bạn thành công.