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, năm lớp đáp ứng mặc định, biến Sass và mixin, cùng hàng chục lớp được xác định trước.
Làm thế nào nó hoạt động
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à một cái nhìn chuyên sâu về cách lưới kết hợp với nhau.
Bạn mới sử dụng hay chưa quen với flexbox? Đọc hướng dẫn flexbox CSS Tricks này để biết thông tin cơ bản, thuật ngữ, hướng dẫn và đoạn mã.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>Ví dụ trên tạo ba cột có chiều rộng bằng nhau trên các thiết bị nhỏ, vừa, lớn và cực lớ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.
Chia nhỏ nó ra, đây là cách nó hoạt động:
- Vùng chứa cung cấp một phương tiện để căn giữa và đệm nội dung trang web của bạn theo chiều ngang. Sử dụng
.containercho chiều rộng pixel đáp ứng hoặc.container-fluidchowidth: 100%tất cả các kích thước cửa sổ xem và thiết bị. - 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. Điều nàypaddingsau đó được chống lại trên các hàng có biên âm. Bằng cách này, tất cả 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. - Trong bố cục dạng lưới, 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.
- Nhờ flexbox, các cột lưới không có chỉ định
widthsẽ tự động được bố trí dưới dạng các cột có chiều rộng bằng nhau. Ví dụ: bốn phiên bản của.col-smsẽ tự động có chiều rộng 25% từ điểm ngắt nhỏ trở lên. Xem phần cột bố cục tự động để biết thêm ví dụ. - Các lớp cột cho biết số cột bạn muốn sử dụng trong số 12 cột có thể có trên mỗi hàng. Vì vậy, nếu bạn muốn ba cột có chiều rộng bằng nhau, bạn có thể sử dụng
.col-4. - Các cột
widths được đặt theo tỷ lệ phần trăm, vì vậy chúng luôn linh hoạt và có kích thước tương ứng với phần tử mẹ của chúng. - Các cột có chiều ngang
paddingđể tạo rãnh giữa các cột riêng lẻ, tuy nhiên, bạn có thể xóamarginkhỏi các hàng vàpaddingkhỏi các cột có.no-gutterstrên.row. - Để làm cho lưới đáp ứng, có năm điểm ngắt lưới, một điểm cho mỗi điểm ngắt đáp ứng : tất cả các điểm ngắt (cực nhỏ), nhỏ, vừa, lớn và cực lớn.
- Điểm ngắt lưới dựa trên các truy vấn phương tiện có chiều rộng tối thiểu, có nghĩa là chúng áp dụng cho một điểm ngắt đó và tất cả những điểm phía trên nó (ví dụ:
.col-sm-4áp dụng cho các thiết bị nhỏ, vừa, lớn và cực lớn, nhưng không áp dụng choxsđiểm ngắt đầu tiên). - Bạn có thể sử dụng các lớp lưới được xác định trước (như
.col-4) hoặc hỗn hợp Sass để đánh dấu ngữ nghĩa hơ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
Trong khi Bootstrap sử dụng ems hoặc rems để xác định hầu hết các kích thước, pxs được sử dụng cho các điểm ngắt lưới và chiều rộng vùng chứa. Điều này là do chiều rộng khung nhìn tính bằng pixel và không thay đổi theo kích thước phông chữ .
Xem các khía cạnh của hệ thống lưới Bootstrap hoạt động như thế nào trên nhiều thiết bị bằng một bảng tiện dụng.
| Cực nhỏ <576px |
Nhỏ ≥576px |
Trung bình ≥768px |
Lớn ≥992px |
Cực lớn ≥1200px |
|
|---|---|---|---|---|---|
| Chiều rộng vùng chứa tối đa | Không có (tự động) | 540px | 720px | 960px | 1140px |
| Tiền tố lớp | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # cột | 12 | ||||
| Chiều rộng máng xối | 30px (15px trên mỗi bên của cột) | ||||
| 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 xl. 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>Nhiều dòng có chiều rộng bằng nhau
Tạo các cột có chiều rộng bằng nhau trải dài nhiều dòng bằng cách chèn vào .w-100vị trí bạn muốn các cột ngắt thành một dòng mới. Làm cho thời gian nghỉ trở nên nhạy bén bằng cách kết hợp .w-100với một số tiện ích hiển thị đáp ứng .
Đã có một lỗi flexbox của Safari ngăn điều này hoạt động mà không có flex-basishoặc rõ ràng border. Có những giải pháp thay thế cho các phiên bản trình duyệt cũ hơn, nhưng chúng không cần thiết nếu trình duyệt mục tiêu của bạn không rơi vào các phiên bản lỗi.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</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}-autocá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 năm 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 .colvà .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>Máng xối
Máng xối có thể được điều chỉnh một cách nhạy bén bằng các lớp đệm dành riêng cho điểm ngắt và các lớp tiện ích lề âm. Để thay đổi các rãnh trong một hàng nhất định, hãy ghép nối một tiện ích lề âm trên .rowvà phù hợp với các tiện ích đệm trên .cols. Cũng có thể cần phải điều chỉnh phần cha .containerhoặc mẹ để tránh tràn không mong muốn, sử dụng lại tiện ích đệm phù hợp..container-fluid
Đây là một ví dụ về việc tùy chỉnh lưới Bootstrap tại lgđiểm ngắt lớn () trở lên. Chúng tôi đã tăng phần .colđệm bằng .px-lg-5, chống lại điều đó với .mx-lg-n5phần chính .rowvà sau đó điều chỉnh phần đệm .containerbằng .px-lg-5.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</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 .rownhư một phím tắt.
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-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);
}
}
Căn chỉnh
Sử dụng tiện ích căn chỉnh flexbox để căn chỉnh các cột theo chiều dọc và chiều ngang. Internet Explorer 10-11 không hỗ trợ căn chỉnh theo chiều dọc của các mục linh hoạt khi vùng chứa linh hoạt có biểu tượng min-heightnhư được hiển thị bên dưới. Xem Flexbugs # 3 để biết thêm chi tiết.
Căn chỉnh theo chiều dọc
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>Căn chỉnh theo chiều ngang
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>Không có máng xối
Các rãnh giữa các cột trong các lớp lưới được xác định trước của chúng tôi có thể được loại bỏ bằng .no-gutters. Điều này loại bỏ các âm margins từ .rowvà ngang paddingkhỏi tất cả các cột con ngay lập tức.
Đây là mã nguồn để tạo các kiểu này. Lưu ý rằng ghi đè cột chỉ được áp dụng cho các cột con đầu tiên và được nhắm mục tiêu thông qua bộ chọn thuộc tính . Trong khi điều này tạo ra một bộ chọn cụ thể hơn, phần đệm cột vẫn có thể được tùy chỉnh thêm với các tiện ích giãn cách .
Cần một thiết kế tối tân? Bỏ cha mẹ .containerhoặc .container-fluid.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Trong thực tế, đây là cách nó trông. Lưu ý rằng bạn có thể tiếp tục sử dụng điều này với tất cả các lớp lưới được xác định trước khác (bao gồm chiều rộng cột, lớp đáp ứng, sắp xếp lại và hơn thế nữa).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>Gói cột
Nếu có nhiều hơn 12 cột được đặt trong một hàng, thì mỗi nhóm cột phụ, như một đơn vị, sẽ nằm trên một dòng mới.
Vì 9 + 4 = 13> 12, div rộng 4 cột này được bao bọc trên một dòng mới dưới dạng một đơn vị liền kề.
Các cột tiếp theo tiếp tục dọc theo dòng mới.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>Ngắt cột
Việc ngắt các cột thành một dòng mới trong flexbox yêu cầu một thủ thuật nhỏ: thêm một phần tử vào bất kỳ vị trí width: 100%nào bạn muốn để chuyển các cột của mình thành một dòng mới. Thông thường điều này được thực hiện với nhiều .rows, nhưng không phải mọi phương pháp triển khai đều có thể giải thích được điều này.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>Bạn cũng có thể áp dụng ngắt này tại các điểm ngắt cụ thể bằng các tiện ích hiển thị đáp ứng của chúng tôi .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>Sắp xếp lại
Đặt hàng các lớp học
Sử dụng .order-các lớp để kiểm soát thứ tự trực quan của nội dung của bạn. Các lớp này là đáp ứng, vì vậy bạn có thể đặt ordertheo điểm ngắt (ví dụ .order-1.order-md-2:). Bao gồm hỗ trợ 1thông 12qua tất cả năm cấp lưới.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>Ngoài ra còn có các lớp đáp ứng .order-firstvà thay đổi thành phần của một phần tử bằng cách áp dụng và ( ), tương ứng. Các lớp này cũng có thể được trộn lẫn với các lớp được đánh số khi cần thiết..order-lastorderorder: -1order: 13order: $columns + 1.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>Các cột bù trừ
Bạn có thể bù trừ các cột lưới theo hai cách: .offset-các lớp lưới đáp ứng của chúng tôi và các tiện ích ký quỹ của chúng tôi . Các lớp lưới có kích thước phù hợp với các cột trong khi lề hữu ích hơn cho các bố cục nhanh trong đó chiều rộng của phần bù có thể thay đổi.
Các lớp bù đắp
Di chuyển các cột sang bên phải bằng cách sử dụng .offset-md-*các lớp. Các lớp này tăng lề trái của một cột theo *các cột. Ví dụ: .offset-md-4di chuyển .col-md-4qua bốn cột.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>Ngoài việc xóa cột tại các điểm ngắt đáp ứng, bạn có thể cần đặt lại các hiệu ứng. Xem điều này hoạt động trong ví dụ lưới .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>Tiện ích ký quỹ
Với việc chuyển sang flexbox trong v4, bạn có thể sử dụng các tiện ích lề như .mr-autođể buộc các cột anh em xa nhau.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>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 .rowtậ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-9">
Level 1: .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>Hỗn hợp 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: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
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();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@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
Sử dụng các biến và bản đồ Sass lưới tích hợp của chúng tôi, bạn hoàn toàn có thể tùy chỉnh các lớp lưới được xác định trước. Thay đổi số lượng lớp, kích thước truy vấn phương tiện và chiều rộng vùng chứa — sau đó biên dịch lại.
Cột và máng xối
Số lượng cột lưới có thể được sửa đổi thông qua các biến Sass. $grid-columnsđược sử dụng để tạo chiều rộng (tính bằng phần trăm) của từng cột riêng lẻ trong khi $grid-gutter-widthđặt chiều rộng cho máng xối của cột.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Các cấp lưới
Vượt ra ngoài các cột, bạn cũng có thể tùy chỉnh số lượng các tầng lưới. Nếu bạn chỉ muốn bốn tầng lưới, bạn nên cập nhật $grid-breakpointsvà $container-max-widthsthành một cái gì đó như sau:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Khi thực hiện bất kỳ thay đổi nào đối với các biến hoặc bản đồ của Sass, bạn sẽ cần lưu các thay đổi của mình và biên dịch lại. Làm như vậy sẽ xuất ra một tập hợp các lớp lưới được xác định trước hoàn toàn mới cho độ rộng cột, hiệu số và thứ tự. Các tiện ích hiển thị đáp ứng cũng sẽ được cập nhật để sử dụng các điểm ngắt tùy chỉnh. Đảm bảo đặt các giá trị lưới trong px(not rem, emhoặc %).