Hướng dẫn sử dụng bootstrap container

Posted on by mtoplistChuyên mục:Top List

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.

mtoplist