Bootstrap 4 - Hệ thống lưới
Sự miêu tả
Hệ thống lưới Bootstrap 4 được xây dựng với flexbox hoàn toàn đáp ứng và mở rộng quy mô lên đến 12 cột (theo kích thước của thiết bị) bằng cách tạo bố cục với các hàng và cột trên trang. Nó cung cấp hệ thống lưới linh hoạt đầu tiên đáp ứng, di động, chia tỷ lệ các cột khi kích thước thiết bị hoặc khung nhìn tăng lên.
Hoạt động của hệ thống lưới
Các hàng phải được đặt trong lớp .container để căn chỉnh và đệm thích hợp.
Để sử dụng lớp .container chiều rộng đáp ứng và cho chiều rộng cố định trên tất cả khung nhìn, hãy sử dụng lớp .container-chất lỏng .
Sử dụng các hàng để tạo các nhóm cột theo chiều ngang.
Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng.
Các cột chứa đệm để kiểm soát không gian giữa chúng.
Nếu bạn đặt nhiều hơn 12 cột trong một hàng, thì các cột sẽ được đặt trong một dòng mới.
Các cột tạo khoảng trống giữa nội dung cột thông qua đệm. Do đó, bạn có thể xóa lề khỏi các hàng và khoảng đệm khỏi các cột có lớp .no-gutters trên hàng.
Bạn có thể làm cho hệ thống lưới đáp ứng bằng cách sử dụng năm điểm ngắt lưới như cực nhỏ, nhỏ, vừa, lớn và cực lớn.
Các lớp lưới được xác định trước như .col-4 có sẵn để nhanh chóng tạo bố cục lưới. LESS mixin cũng có thể được sử dụng cho nhiều bố cục ngữ nghĩa hơn.
Tùy chọn lưới
Bảng sau đây tóm tắt các khía cạnh về cách hệ thống lưới Bootstrap 4 hoạt động trên nhiều thiết bị -
| Thiết bị cực nhỏ (<576px) | Thiết bị nhỏ (≥576px) | Thiết bị trung bình (≥768px) | Thiết bị lớn (≥992px) | Thiết bị cực lớn (≥1200px) | |
|---|---|---|---|---|---|
| Hành vi lưới | Ngang mọi lúc | Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt | Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt | Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt | Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt |
| Chiều rộng vùng chứa tối đa | Không có (tự động) | 540px | 720px | 960px | 1140px |
| Lớp học | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| # cột | 12 | 12 | 12 | 12 | 12 |
| Chiều rộng máng xối | 30px (15px trên mỗi bên của cột) |
30px (15px trên mỗi bên của cột) |
30px (15px trên mỗi bên của cột) |
30px (15px trên mỗi bên của cột) |
30px (15px trên mỗi bên của cột) |
| Lồng được | Đúng | Đúng | Đúng | Đúng | Đúng |
| Thứ tự cột | Đúng | Đúng | Đúng | Đúng | Đúng |
Cấu trúc lưới cơ bản
Sau đây là cấu trúc cơ bản của lưới Bootstrap 4:
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>Ví dụ về Hệ thống lưới
Sau đây là một ví dụ về hệ thống lưới Bootstrap 4:
Thí dụ
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</style>
.grid_system div[class^="col"] {
border: 1px solid white;
background: #e4dcdc;
text-align: center;
padding-top: 5px;
padding-bottom: 5px
}
</style>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class =" col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-5">.col-sm-5</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-12">.col-sm-12</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Đầu ra
Tạo bố cục hai cột
Ví dụ sau đây mô tả việc tạo bố cục hai cột cho các thiết bị nhỏ, vừa và lớn. Trên các thiết bị nhỏ như điện thoại di động, các cột sẽ tự động trở thành chiều ngang theo mặc định.
Thí dụ
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-7">.col-sm-7</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-8">.col-sm-8</div>
</div>
<div class = "row">
<div class = "col-sm-9">.col-sm-9</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Đầu ra
Tạo bố cục ba cột
Ví dụ sau mô tả việc tạo bố cục ba cột cho các thiết bị vừa và lớn. Nếu độ phân giải màn hình lớn hơn hoặc bằng 992 pixel, thì nó sẽ hiển thị ở chế độ ngang trong máy tính bảng và như thường lệ, nó sẽ hiển thị ở chế độ dọc.
Thí dụ
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = " stylesheet" href = " https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-8">.col-sm-8</div>
<div class = "col-sm-2">.col-sm-2</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Nó sẽ tạo ra kết quả sau: