Trong HTML, một container là một phần tử có thể chứa các phần tử khác, chẳng hạn như <div>, <span>, … Lớp container hoặc container-fuid có thể được sử dụng cho các phần tử này. Ok bây giờ mình sẽ giải thích cho bạn sự khác biệt của 2 lớp trên
Class. Container-fluid
Lớp container-fuid khi được áp dụng cho một phần tử sẽ làm cho phần tử sẽ làm cho phân tử này có chiều rộng 100%
Xem thêm: Hướng dẫn ghép nhiều file PDF thành một file PDF
Hướng dẫn sử dụng Bootstrap Container
container-fluid-example.html
|
|
<!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> |
Class .container
Dựa trên kích thước chiều rộng màn hình của các thiết bị, Bootstrap chia chúng thành 5 loại:
+ Các thiết bị có chiều rộng nhỏ hơn 567px được gọi là Extra Small (Rất nhỏ).
+ Các thiết bị có chiều rộng lớn hơn hoặc bằng 567px được gọi là Small (Nhỏ), hoặc được gọi là thiết bị sm.
+ Các thiết bị có chiều rộng lớn hơn hoặc bằng 768px được gọi là Medium (Trung bình), hoặc được gọi là thiết bị md.
+ Các thiết bị có chiều rộng lớn hơn hoặc bằng 992px được gọi là Large (Lớn), hoặc được gọi là thiết bị lg.
+ Các thiết bị có chiều rộng lớn hơn hoặc bằng 1200px được gọi là Extra Large (Rất lớn), hoặc được gọi là thiết bị xl.
xem thêm: Cách chuyển đổi file PDF sang Word đơn giản, không lỗi font
Một phần tử được áp dụng lớp .container điều gì sẽ xẩy ra?
container-example
| <h4 style=”color:#ff9249″>.container Example:</h4>
<div class=”container” style=”background: #cdd;”> .container </div> |
Trường hợp 1: Nếu chiều rộng thiết bị nhỏ hơn 567px, phần tử sẽ có chiều rộng 100%.
Trường hợp 2: Nếu chiều rộng thiết bị lớn hơn hoặc bằng 567px và nhỏ hơn 768px thì phần tử sẽ hiển thị ở giữa (center) và có chiều rộng 567px.
Trường hợp 3: Nếu chiều rộng của thiết bị lớn hơn hoặc bằng 768px và nhỏ hơn 992px, phần tử sẽ hiển thị ở giữa (center) và có chiều rộng 768px
Trường hợp 4: Nếu chiều rộng của thiết bị lớn hơn hoặc bằng 992px và nhỏ hơn 1200px, phần tử sẽ hiển thị ở giữa (center) và có chiều rộng 992px.
Trường hợp 5: Nếu chiều rộng của thiết bị lớn hơn hoặc bằng 1200px, phần tử sẽ hiển thị ở giữa (center) và có chiều rộng 1200px.
container-example.html
| <!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 style=”color:#ff9249″>.container Example:</h4>
<div class=”container” style=”background: #cdd;”> .container </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> |
Bình luận