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:
==> Xem thêm: Glyphicon là gì? Cách sử dụng
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.
