Hệ thống lưới điện
Sử dụng lưới flexbox ưu tiên cho thiết bị di động mạnh mẽ của chúng tôi để tạo bố cục với mọi hình dạng và kích thước nhờ hệ thống mười hai cột, sáu tầng đáp ứng mặc định, biến Sass và mixin, cùng hàng chục lớp được xác định trước.
Thí dụ
Hệ thống lưới của Bootstrap sử dụng một loạt các vùng chứa, hàng và cột để bố trí và sắp xếp nội dung. Nó được xây dựng với flexbox và hoàn toàn đáp ứng. Dưới đây là một ví dụ và giải thích chuyên sâu về cách hệ thống lưới kết hợp với nhau.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Ví dụ trên tạo ba cột có chiều rộng bằng nhau trên tất cả các thiết bị và khung nhìn bằng cách sử dụng các lớp lưới được xác định trước của chúng tôi. Các cột đó được căn giữa trong trang với cột chính .container
.
Làm thế nào nó hoạt động
Chia nhỏ nó ra, đây là cách hệ thống lưới kết hợp với nhau:
-
Lưới của chúng tôi hỗ trợ sáu điểm ngắt đáp ứng . Điểm ngắt dựa trên
min-width
các truy vấn phương tiện, có nghĩa là chúng ảnh hưởng đến điểm ngắt đó và tất cả những người phía trên nó (ví dụ:.col-sm-4
áp dụng chosm
,md
và ) . Điều này có nghĩa là bạn có thể kiểm soát kích thước và hành vi của vùng chứa và cột theo từng điểm ngắt.lg
xl
xxl
-
Vùng chứa ở giữa và đệm nội dung của bạn theo chiều ngang. Sử dụng
.container
cho chiều rộng pixel đáp ứng,.container-fluid
chowidth: 100%
tất cả các cửa sổ xem và thiết bị hoặc vùng chứa đáp ứng (ví dụ.container-md
:) cho sự kết hợp của chiều rộng pixel và linh hoạt. -
Hàng là trình bao bọc cho các cột. Mỗi cột có chiều ngang
padding
(được gọi là máng xối) để kiểm soát không gian giữa chúng. Sau đó, điều nàypadding
được chống lại trên các hàng có lề âm để đảm bảo nội dung trong các cột của bạn được căn chỉnh trực quan xuống phía bên trái. Các hàng cũng hỗ trợ các lớp bổ trợ để áp dụng thống nhất các lớp định cỡ cột và lớp rãnh để thay đổi khoảng cách của nội dung của bạn. -
Các cột rất linh hoạt. Có 12 cột mẫu có sẵn trên mỗi hàng, cho phép bạn tạo các tổ hợp phần tử khác nhau trải dài bất kỳ số lượng cột nào. Các lớp cột cho biết số lượng cột mẫu sẽ kéo dài (ví dụ:
col-4
kéo dài bốn).width
s được đặt theo tỷ lệ phần trăm để bạn luôn có cùng một kích thước tương đối. -
Máng xối cũng đáp ứng và có thể tùy chỉnh. Các lớp Gutter có sẵn trên tất cả các điểm ngắt, với tất cả các kích thước giống như khoảng cách lề và khoảng đệm của chúng tôi . Thay đổi máng xối ngang với
.gx-*
các lớp, máng xối dọc với.gy-*
hoặc tất cả các máng xối có.g-*
lớp..g-0
cũng có sẵn để loại bỏ máng xối. -
Các biến Sass, bản đồ và mixin cung cấp năng lượng cho lưới điện. Nếu bạn không muốn sử dụng các lớp lưới được xác định trước trong Bootstrap, bạn có thể sử dụng Sass nguồn của lưới của chúng tôi để tạo lớp lưới của riêng bạn với nhiều đánh dấu ngữ nghĩa hơn. Chúng tôi cũng bao gồm một số thuộc tính tùy chỉnh CSS để sử dụng các biến Sass này nhằm mang lại sự linh hoạt hơn nữa cho bạn.
Hãy lưu ý những hạn chế và lỗi xung quanh flexbox , chẳng hạn như không thể sử dụng một số phần tử HTML làm vùng chứa flex .
Tùy chọn lưới
Hệ thống lưới của Bootstrap có thể điều chỉnh trên tất cả sáu điểm ngắt mặc định và bất kỳ điểm ngắt nào bạn tùy chỉnh. Sáu cấp lưới mặc định như sau:
- Cực nhỏ (xs)
- Nhỏ (sm)
- Trung bình (md)
- Lớn (lg)
- Cực lớn (xl)
- Cực lớn (xxl)
Như đã lưu ý ở trên, mỗi điểm ngắt này có vùng chứa riêng, tiền tố lớp duy nhất và bổ ngữ. Đây là cách lưới thay đổi qua các điểm ngắt này:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Thùng đựng hàngmax-width |
Không có (tự động) | 540px | 720px | 960px | 1140px | 1320px |
Tiền tố lớp | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# cột | 12 | |||||
Chiều rộng máng xối | 1.5rem (.75rem ở bên trái và bên phải) | |||||
Máng xối tùy chỉnh | Đúng | |||||
Có thể lồng vào nhau | Đúng | |||||
Thứ tự cột | Đúng |
Các cột bố cục tự động
Sử dụng các lớp cột dành riêng cho điểm ngắt để dễ dàng định kích thước cột mà không cần một lớp được đánh số rõ ràng như .col-sm-6
.
Chiều rộng bằng nhau
Ví dụ: đây là hai bố cục lưới áp dụng cho mọi thiết bị và chế độ xem, từ xs
đến xxl
. Thêm bất kỳ số lượng lớp nào ít hơn đơn vị cho mỗi điểm ngắt bạn cần và mọi cột sẽ có cùng chiều rộng.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Đặt chiều rộng một cột
Tự động bố trí cho các cột lưới flexbox cũng có nghĩa là bạn có thể đặt chiều rộng của một cột và để các cột anh em tự động thay đổi kích thước xung quanh nó. Bạn có thể sử dụng các lớp lưới được xác định trước (như được hiển thị bên dưới), kết hợp lưới hoặc độ rộng nội tuyến. Lưu ý rằng các cột khác sẽ thay đổi kích thước bất kể chiều rộng của cột trung tâm.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Nội dung chiều rộng thay đổi
Sử dụng col-{breakpoint}-auto
các lớp để định kích thước các cột dựa trên chiều rộng tự nhiên của nội dung của chúng.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Các lớp học phản hồi
Lưới của Bootstrap bao gồm sáu lớp các lớp được xác định trước để xây dựng các bố cục đáp ứng phức tạp. Tùy chỉnh kích thước cột của bạn trên các thiết bị cực nhỏ, nhỏ, vừa, lớn hoặc cực lớn theo cách bạn thấy phù hợp.
Tất cả các điểm ngắt
Đối với các lưới giống nhau từ thiết bị nhỏ nhất đến lớn nhất, hãy sử dụng các lớp .col
và .col-*
. Chỉ định một lớp được đánh số khi bạn cần một cột có kích thước đặc biệt; nếu không, hãy thoải mái gắn bó .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Xếp chồng lên nhau theo chiều ngang
Sử dụng một tập hợp các .col-sm-*
lớp, bạn có thể tạo một hệ thống lưới cơ bản bắt đầu xếp chồng lên nhau và trở thành nằm ngang tại điểm ngắt nhỏ ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Pha trộn và kết hợp
Bạn không muốn các cột của mình chỉ xếp chồng lên nhau trong một số tầng lưới? Sử dụng kết hợp các lớp khác nhau cho mỗi cấp khi cần thiết. Xem ví dụ bên dưới để biết rõ hơn về cách hoạt động của tất cả.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Hàng cột
Sử dụng các .row-cols-*
lớp đáp ứng để nhanh chóng đặt số lượng cột hiển thị tốt nhất nội dung và bố cục của bạn. Trong khi .col-*
các lớp bình thường áp dụng cho các cột riêng lẻ (ví dụ .col-md-4
:), thì các lớp cột hàng được đặt trên cha .row
như một phím tắt. Với .row-cols-auto
bạn có thể cung cấp cho các cột chiều rộng tự nhiên của chúng.
Sử dụng các lớp cột hàng này để nhanh chóng tạo bố cục lưới cơ bản hoặc để kiểm soát bố cục thẻ của bạn.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Bạn cũng có thể sử dụng mixin Sass đi kèm row-cols()
,:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Làm tổ
Để lồng nội dung của bạn với lưới mặc định, hãy thêm một .row
tập hợp các .col-sm-*
cột mới trong một .col-sm-*
cột hiện có. Các hàng lồng nhau phải bao gồm một tập hợp các cột có tối đa 12 hoặc ít hơn (không bắt buộc bạn phải sử dụng tất cả 12 cột có sẵn).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass
Khi sử dụng các tệp Sass nguồn của Bootstrap, bạn có tùy chọn sử dụng các biến Sass và mixin để tạo bố cục trang tùy chỉnh, ngữ nghĩa và đáp ứng. Các lớp lưới được xác định trước của chúng tôi sử dụng các biến và hỗn hợp tương tự này để cung cấp toàn bộ các lớp sẵn sàng sử dụng cho các bố cục đáp ứng nhanh.
Biến
Các biến và bản đồ xác định số lượng cột, chiều rộng rãnh và điểm truy vấn phương tiện để bắt đầu cột nổi. Chúng tôi sử dụng chúng để tạo các lớp lưới được xác định trước được nêu ở trên, cũng như cho các mixin tùy chỉnh được liệt kê bên dưới.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Mixin
Mixin được sử dụng cùng với các biến lưới để tạo CSS ngữ nghĩa cho các cột lưới riêng lẻ.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);
Ví dụ sử dụng
Bạn có thể sửa đổi các biến thành các giá trị tùy chỉnh của riêng mình hoặc chỉ sử dụng các mixin với các giá trị mặc định của chúng. Dưới đây là một ví dụ về việc sử dụng cài đặt mặc định để tạo bố cục hai cột có khoảng cách giữa.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Tùy chỉnh lưới
Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.
Columns and gutters
The number of grid columns can be modified via Sass variables. $grid-columns
is used to generate the widths (in percent) of each individual column while $grid-gutter-width
sets the width for the column gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Grid tiers
Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the $grid-breakpoints
and $container-max-widths
to something like this:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px
(not rem
, em
, or %
).