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.
Bạn đang xem : bootstrap hàng lớp div
Hệ thống lưới
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. < / p>
Cách 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à căn chỉnh nội dung. Nó được xây dựng bằng flexbox và hoàn toàn đáp ứng. Dưới đây là một ví dụ và một cái nhìn sâu hơn 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? Hãy đọc hướng dẫn về flexbox Thủ thuật CSS này để biết thông tin cơ bản, thuật ngữ, nguyên tắc và đoạn mã.
Một trong ba cột
Một trong ba cột
Một trong ba cột
& lt; div
class =
"container"
& gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-sm"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; div
class =
"col-sm"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; div
class =
"col-sm"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
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 . Container .
Chia nhỏ nó, đây là cách 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
. Containerđể có chiều rộng pixel đáp ứng hoặc. Container-liquidchowidth: 100%trên tất cả các kích thước khung nhìn và thiết bị. - Hàng là trình bao bọc cho các cột. Mỗi cột có
paddingnằm ngang (được gọi là rãnh nước) để kiểm soát khoảng cách giữa chúng. Sau đó,paddingnày sẽ bị loại bỏ trên các hàng có lề â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ó
widthđược chỉ định sẽ tự động 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. Col-sm, mỗi phiên bản sẽ tự động có chiều rộng 25% từ điểm ngắt nhỏ trở lên. Xem phần cột tự động bố cục để 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 muốn ba cột có chiều rộng bằng nhau, bạn có thể sử dụng
. Col-4. - 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ó ngang
paddingđể tạo rãnh giữa các cột riêng lẻ, tuy nhiên, bạn có thể xóamargintừ các hàng vàpaddingtừ 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.
- Các điểm ngắt của lưới dựa trên các truy vấn phương tiện có chiều rộng tối thiểu, 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 phải thiết bị đầu tiênxsbreakpoint). - Bạn có thể sử dụng các lớp lưới được xác định trước (như
. col-4) hoặc Sass mixins để có thêm đánh dấu ngữ nghĩa.
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 em s hoặc rem s để xác định hầu hết các kích thước, px s được sử dụng cho các điểm ngắt của 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ỏ
& lt; 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
Tự động bố cục các cột
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 .
Equal-width
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.
1 của 2
2 của 2
1 trong 3
2 của 3
3 của 3
& lt; div
class =
"container"
& gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col"
& gt;
1 của 2
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
2 của 2
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col"
& gt;
1 trong 3
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
2 của 3
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
3 của 3
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Các cột có chiều rộng bằng nhau có thể được chia thành nhiều dòng, nhưng có một lỗi Safari flexbox đã ngăn điều này hoạt động mà không có flex-base < / code> hoặc 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 bạn đã cập nhật.
Cột
Cột
Cột
Cột
& lt; div
class =
"container"
& gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col"
& gt;
Cột & lt; / div & gt;
& lt; div
class =
"col"
& gt;
Cột & lt; / div & gt;
& lt; div
class =
"w-100"
& gt; & lt; / div & gt;
& lt; div
class =
"col"
& gt;
Cột & lt; / div & gt;
& lt; div
class =
"col"
& gt;
Cột & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Đặ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 chiều 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 chính giữa.
1 trong 3
2 của 3 (rộng hơn)
3 của 3
1 trong 3
2 của 3 (rộng hơn)
3 của 3
& lt; div
class =
"container"
& gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col"
& gt;
1 trong 3
& lt; / div & gt;
& lt; div
class =
"col-6"
& gt;
2 của 3 (rộng hơn)
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
3 của 3
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col"
& gt;
1 trong 3
& lt; / div & gt;
& lt; div
class =
"col-5"
& gt;
2 của 3 (rộng hơn)
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
3 của 3
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Nội dung có độ rộng biến đổi
Sử dụng các lớp col- {breakpoint} -auto để định kích thước cột dựa trên chiều rộng tự nhiên của nội dung của chúng.
1 trong 3
Nội dung chiều rộng thay đổi
3 của 3
1 trong 3
Nội dung chiều rộng thay đổi
3 của 3
& lt; div
class =
"container"
& gt;
& lt; div
class =
"row justify-content-md-center"
& gt;
& lt; div
class =
"col col-lg-2"
< p class = "nt"> & gt;
1 trong 3
& lt; / div & gt;
& lt; div
class =
"col-md-auto"
& gt;
Nội dung chiều rộng thay đổi
& lt; / div & gt;
& lt; div
class =
"col col-lg-2"
< p class = "nt"> & gt;
3 của 3
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col"
& gt;
1 trong 3
& lt; / div & gt;
& lt; div
class =
"col-md-auto"
& gt;
Nội dung chiều rộng thay đổi
& lt; / div & gt;
& lt; div
class =
"col col-lg-2"
< p class = "nt"> & gt;
3 của 3
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Nhiều hàng có chiều rộng bằng nhau
Tạo các cột có chiều rộng bằng nhau kéo dài nhiều hàng bằng cách chèn . w-100 nơi 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-100 với một số tiện ích hiển thị đáp ứng .
col
col
col
col
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col"
& gt;
col & lt; / div & gt;
& lt; div
class =
"col"
& gt;
col & lt; / div & gt;
& lt; div
class =
"w-100"
& gt; & lt; / div & gt;
& lt; div
class =
"col"
& gt;
col & lt; / div & gt;
& lt; div
class =
"col"
& gt;
col & lt; / div & gt;
& lt; / div & gt;
Các lớp đáp ứng
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 vừa vặn.
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 . col và . col- * các lớp. 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, vui lòng theo dõi . col .
col
col
col
col
col-8
col-4
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col"
& gt;
col & lt; / div & gt;
& lt; div
class =
"col"
& gt;
col & lt; / div & gt;
& lt; div
class =
"col"
& gt;
col & lt; / div & gt;
& lt; div
class =
"col"
& gt;
col & lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-8"
& gt;
col-8 & lt; / div & gt;
& lt; div
class =
"col-4"
& gt;
col-4 & lt; / div & gt;
& lt; / div & gt;
Xếp chồng lên nhau
Sử dụng một tập hợp các lớp . col-sm- * , 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ỏ (< code class = "highlighter-rouge"> sm ).
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-sm-8"
& gt;
col-sm-8 & lt; / div & gt;
& lt; div
class =
"col-sm-4"
& gt;
col-sm-4 & lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-sm"
& gt;
col-sm & lt; / div & gt;
& lt; div
class =
"col-sm"
& gt;
col-sm & lt; / div & gt;
& lt; div
class =
"col-sm"
& gt;
col-sm & lt; / div & gt;
& lt; / div & gt;
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. Hãy xem ví dụ bên dưới để biết rõ hơn về cách hoạt động của tất cả.
. col-12 .col-md-8
. col-6 .col-md-4
. col-6 .col-md-4
. col-6 .col-md-4
. col-6 .col-md-4
. col-6
. col-6
& lt;! - Xếp chồng các cột trên thiết bị di động bằng cách tạo một chiều rộng đầy đủ và một nửa chiều rộng còn lại - & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-12 col-md-8"
& gt;
.col-12 .col-md-8 & lt; / div & gt;
& lt; div
class =
"col-6 col-md-4"
& gt;
.col-6 .col-md-4 & lt; / div & gt;
& lt; / div & gt;
& lt;! - Các cột bắt đầu rộng 50% trên thiết bị di động và rộng tới 33,3% trên máy tính để bàn - & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-6 col-md-4"
& gt;
.col-6 .col-md-4 & lt; / div & gt;
& lt; div
class =
"col-6 col-md-4"
& gt;
.col-6 .col-md-4 & lt; / div & gt;
& lt; div
class =
"col-6 col-md-4"
& gt;
.col-6 .col-md-4 & lt; / div & gt;
& lt; / div & gt;
& lt;! - Các cột luôn rộng 50%, trên thiết bị di động và máy tính để bàn - & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-6"
& gt;
.col-6 & lt; / div & gt;
& lt; div
class =
"col-6"
& gt;
.col-6 & lt; / div & gt;
& lt; / div & gt;
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.
Căn chỉnh theo chiều dọc
Một trong ba cột
Một trong ba cột
Một trong ba cột
Một trong ba cột
Một trong ba cột
Một trong ba cột
Một trong ba cột
Một trong ba cột
Một trong ba cột
& lt; div
class =
"container"
& gt;
& lt; div
class =
"row align-items-start"
< p class = "nt"> & gt;
& lt; div
class =
"col"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row align-items-center"
< p class = "nt"> & gt;
& lt; div
class =
"col"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row align-items-end"
< p class = "nt"> & gt;
& lt; div
class =
"col"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
Một trong ba cột
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Một trong ba cột
Một trong ba cột
Một trong ba cột
& lt; div
class =
"container"
& gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col align-self-start"
< p class = "nt"> & gt;
Một trong ba cột
& lt; / div & gt;
& lt; div
class =
"col align-self-center"
< p class = "nt"> & gt;
Một trong ba cột
& lt; / div & gt;
& lt; div
class =
"col align-self-end"
< p class = "nt"> & gt;
Một trong ba cột
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Căn chỉnh theo chiều ngang
Một trong hai cột
Một trong hai cột
Một trong hai cột
Một trong hai cột
Một trong hai cột
Một trong hai cột
Một trong hai cột
Một trong hai cột
Một trong hai cột
Một trong hai cột
& lt; div
class =
"container"
& gt;
& lt; div
class =
"row justify-content-start"
< p class = "nt"> & gt;
& lt; div
class =
"col-4"
& gt;
Một trong hai cột
& lt; / div & gt;
& lt; div
class =
"col-4"
& gt;
Một trong hai cột
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row justify-content-center"
< p class = "nt"> & gt;
& lt; div
class =
"col-4"
& gt;
Một trong hai cột
& lt; / div & gt;
& lt; div
class =
"col-4"
& gt;
Một trong hai cột
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row justify-content-end"
< p class = "nt"> & gt;
& lt; div
class =
"col-4"
& gt;
Một trong hai cột
& lt; / div & gt;
& lt; div
class =
"col-4"
& gt;
Một trong hai cột
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row justify-content-around"
< p class = "nt"> & gt;
& lt; div
class =
"col-4"
& gt;
Một trong hai cột
& lt; / div & gt;
& lt; div
class =
"col-4"
& gt;
Một trong hai cột
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row justify-content-between"
< p class = "nt"> & gt;
& lt; div
class =
"col-4"
& gt;
Một trong hai cột
& lt; / div & gt;
& lt; div
class =
"col-4"
& gt;
Một trong hai cột
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Không có máng xối
Có thể xóa 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 bằng . no-gutters . Thao tác này sẽ xóa margin s phủ định khỏi . Row và ngang đệm từ 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ỉ áp dụng cho các cột con đầu tiên và được nhắm mục tiêu thông qua công cụ chọn thuộc tính . Mặc dù điều này tạo ra một bộ chọn cụ thể hơn, nhưng phần đệm cột vẫn có thể được tùy chỉnh thêm với tiện ích giãn cách .
Bạn cần thiết kế hoàn thiện? Hãy thả . container hoặc . chất lỏng chứa .
. no-gutters
{
margin-right
:
0
;
margin-left
:
0
;
& gt;
. col
,
& gt;
[
class
* =
"col-"
]
{
padding-right
:
0
;
padding-left
:
0
;
}
}
Trên thực tế, đây là giao diện của nó. Xin 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.v.).
. col-12 .col-sm-6 .col-md-8
. col-6 .col-md-4
& lt; div
class =
"row no-gutters"
& gt;
& lt; div
class =
"col-12 col-sm-6 col-md- 8 "
& gt;
.col-12 .col-sm-6 .col-md-8 & lt; / div & gt; < / p>
& lt; div
class =
"col-6 col-md-4"
& gt;
.col-6 .col-md-4 & lt; / div & gt;
& lt; / div & gt;
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.
. col-9
. col-4
Vì 9 + 4 = 13 & gt; 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ề.
. col-6
Các cột tiếp theo tiếp tục dọc theo dòng mới.
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-9"
& gt;
.col-9 & lt; / div & gt;
& lt; div
class =
"col-4"
& gt;
.col-4 & lt; br & gt;
Vì 9 + 4 = 13 & amp; gt; 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ề.
& lt; / div & gt;
& lt; div
class =
"col-6"
& gt;
.col-6 & lt; br & gt;
Các cột tiếp theo tiếp tục dọc theo dòng mới. & lt; / div & gt ;
& lt; / div & gt;
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 thao tác nhỏ: thêm một phần tử có width: 100% ở bất cứ nơi nào bạn muốn bọc 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 . Row , 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.
. col-6 .col-sm-3
. col-6 .col-sm-3
. col-6 .col-sm-3
. col-6 .col-sm-3
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-6 col-sm-3"
& gt;
.col-6 .col-sm-3 & lt; / div & gt;
& lt; div
class =
"col-6 col-sm-3"
& gt;
.col-6 .col-sm-3 & lt; / div & gt;
& lt;! - Buộc các cột tiếp theo ngắt thành dòng mới - & gt;
& lt; div
class =
"w-100"
& gt; & lt; / div & gt;
& lt; div
class =
"col-6 col-sm-3"
& gt;
.col-6 .col-sm-3 & lt; / div & gt;
& lt; div
class =
"col-6 col-sm-3"
& gt;
.col-6 .col-sm-3 & lt; / div & gt;
& lt; / div & gt;
Bạn cũng có thể áp dụng thời gian nghỉ này tại các điểm dừng cụ thể bằng tiện ích hiển thị đáp ứng của chúng tôi.
. col-6 .col-sm-4
. col-6 .col-sm-4
. col-6 .col-sm-4
. col-6 .col-sm-4
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-6 col-sm-4"
& gt;
.col-6 .col-sm-4 & lt; / div & gt;
& lt; div
class =
"col-6 col-sm-4"
& gt;
.col-6 .col-sm-4 & lt; / div & gt;
& lt;! - Buộc các cột tiếp theo ngắt thành dòng mới tại điểm ngắt md trở lên - & gt;
& lt; div
class =
"w-100 d-none d-md-block"
& gt; & lt; / div & gt;
& lt; div
class =
"col-6 col-sm-4"
& gt;
.col-6 .col-sm-4 & lt; / div & gt;
& lt; div
class =
"col-6 col-sm-4"
& gt;
.col-6 .col-sm-4 & lt; / div & gt;
& lt; / div & gt;
Sắp xếp lại thứ tự
Thứ tự các lớp
Sử dụng các lớp . order- để kiểm soát thứ tự trực quan của nội dung của bạn. Các lớp này đáp ứng, vì vậy bạn có thể đặt order theo breakpoint (ví dụ: . Order-1.order-md-2 ). Bao gồm hỗ trợ cho 1 đến 12 trên tất cả năm cấp lưới.
Đầu tiên, nhưng không có thứ tự
Thứ hai, nhưng cuối cùng
Thứ ba, nhưng đầu tiên
& lt; div
class =
"container"
& gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col"
& gt;
Đầu tiên, nhưng không có thứ tự
& lt; / div & gt;
& lt; div
class =
"col order-12"
& gt;
Thứ hai, nhưng cuối cùng
& lt; / div & gt;
& lt; div
class =
"col order-1"
& gt;
Thứ ba, nhưng đầu tiên
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Ngoài ra còn có các lớp . order-first và . order-last thay đổi thứ tự của một phần tử bằng cách áp dụng order: -1 và order: 13 ( order: $ column + 1 ), tương ứng. Các lớp này cũng có thể được trộn lẫn với các lớp . Order- * được đánh số khi cần thiết.
Đầu tiên, nhưng cuối cùng
Thứ hai, nhưng không có thứ tự
Thứ ba, nhưng đầu tiên
& lt; div
class =
"container"
& gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col order-last"
& gt;
Đầu tiên, nhưng cuối cùng
& lt; / div & gt;
& lt; div
class =
"col"
& gt;
Thứ hai, nhưng không có thứ tự
& lt; / div & gt;
& lt; div
class =
"col order-first"
& gt;
Thứ ba, nhưng đầu tiên
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Chênh lệch các cột
Bạn có thể bù đắp các cột lưới theo hai cách: các lớp lưới . offset- đáp ứng của chúng tôi và các tiện ích lề 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.
Bù đắp các lớp
Di chuyển các cột sang bên phải bằng cách sử dụng các lớp . offset-md- * . Các lớp này tăng lề trái của cột bằng * cột. Ví dụ: . Offset-md-4 di chuyển . Col-md-4 qua bốn cột.
. col-md-4
. col-md-4 .offset-md-4
. col-md-3 .offset-md-3
. col-md-3 .offset-md-3
. col-md-6 .offset-md-3
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-md-4"
& gt;
.col-md-4 & lt; / div & gt;
& lt; div
class =
"col-md-4 offset-md-4" < / p>
& gt;
.col-md-4 .offset-md-4 & lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-md-3 offset-md-3" < / p>
& gt;
.col-md-3 .offset-md-3 & lt; / div & gt;
& lt; div
class =
"col-md-3 offset-md-3" < / p>
& gt;
.col-md-3 .offset-md-3 & lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-md-6 offset-md-3" < / p>
& gt;
.col-md-6 .offset-md-3 & lt; / div & gt;
& lt; / div & gt;
Ngoài việc xóa cột tại các điểm ngắt thích ứng, bạn có thể cần phải đặt lại các hiệu ứng. Xem điều này hoạt động trong ví dụ về lưới .
. col-sm-5 .col-md-6
. col-sm-5 .offset-sm-2 .col-md-6 .offset-md- 0
. col-sm-6 .col-md-5 .col-lg-6
. col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-sm-5 col-md-6" < / p>
& gt;
.col-sm-5 .col-md-6 & lt; / div & gt;
& lt; div
class =
"col-sm-5 offset-sm-2 col- md-6 offset-md-0 "
& gt;
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md- 0 & lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-sm-6 col-md-5 col- lg-6 "
& gt;
.col-sm-6 .col-md-5 .col-lg-6 & lt; / div & gt;
& lt; div
class =
"col-sm-6 col-md-5 offset- md-2 col-lg-6 offset-lg-0 "
& gt;
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0 & lt; / div & gt;
& lt; / div & gt;
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 cách xa nhau.
. col-md-4
. col-md-4 .ml-auto
. col-md-3 .ml-md-auto
. col-md-3 .ml-md-auto
. col-auto .mr-auto
. col-auto
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-md-4"
& gt;
.col-md-4 & lt; / div & gt;
& lt; div
class =
"col-md-4 ml-auto"
& gt;
.col-md-4 .ml-auto & lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-md-3 ml-md-auto" < / p>
& gt;
.col-md-3 .ml-md-auto & lt; / div & gt;
& lt; div
class =
"col-md-3 ml-md-auto" < / p>
& gt;
.col-md-3 .ml-md-auto & lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-auto mr-auto"
< p class = "nt"> & gt; .col-auto .mr-auto & lt; / div & gt;
& lt; div
class =
"col-auto"
& gt;
.col-auto & lt; / div & gt;
& lt; / div & gt;
Làm tổ
Để lồng nội dung của bạn với lưới mặc định, hãy thêm . row mới và tập hợp . col-sm- * trong cột . col-sm- * 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).
Cấp độ 2: .col-8 .col-sm-6
Cấp độ 2: .col-4 .col-sm-6
Cấp độ 1: .col-sm-9
& lt; div
class =
" row "
& gt;
& lt; div
class =
"col-sm-9"
& gt;
Cấp độ 1: .col-sm-9
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-8 col-sm-6"
& gt;
Cấp độ 2: .col-8 .col-sm-6
& lt; / div & gt;
& lt; div
class =
"col-4 col-sm-6"
& gt;
Cấp độ 2: .col-4 .col-sm-6
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Sass mixins
Khi sử dụng 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 hỗn hợp tùy chỉnh được liệt kê bên dưới.
$ grid-column
:
12
;
$ grid-gutter-width
:
30px
;
$ grid-breakpoints
:
(
//
Thêm
nhỏ
màn hình < / p>
/
điện thoại
xs
:
0
,
//
Màn hình nhỏ
/ < / p>
điện thoại
sm
:
576px
,
//
Màn hình trung bình
/ < / p>
máy tính bảng
md
:
768px
,
//
Màn hình
lớn
/ < / p>
máy tính để bàn
lg
:
992px
,
//
Thêm
màn hình lớn
< / p>
/
wide
máy tính để bàn
xl
:
1200px
);
$ container-max-widths
:
(
sm
:
540px
,
md
:
720px
,
lg
:
960px
,
xl
:
1140px
);
Mixin
Kết hợp đượ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ẻ.
// Tạo một trình bao bọc cho một chuỗi các cột
@ bao gồm
make-row
();
// Đặt phần tử ở trạng thái sẵn sàng (áp dụng mọi thứ trừ chiều rộng)
@ bao gồm
make-col-ready
();
@ bao gồm
make-col
(
$ size
,
$ cột
:
$ lưới-cột
);
// Thích thú bằng cách bù trừ hoặc thay đổi thứ tự sắp xếp
@ bao gồm
make-col-offset
(
$ size
,
$ cột
:
$ grid-column
);
Cách sử dụng mẫu
Bạn có thể sửa đổi các biến thành giá trị tùy chỉnh của riêng mình hoặc chỉ sử dụng các mixin với 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
{
width
:
800px
;
@ bao gồm
make-container
();
}
. example-row
{
@ bao gồm
make-row
();
}
. example-content-main
{
@ bao gồm
make-col-ready
();
@ bao gồm
media-breakpoint-up
(
sm
)
{
@ bao gồm
make-col
(
6
);
}
@ bao gồm
media-breakpoint-up
(
lg
)
{
@ bao gồm
make-col
(
8
);
}
}
. example-content-Secondary
{
@ bao gồm
make-col-ready
();
@ bao gồm
media-breakpoint-up
(
sm
)
{
@ bao gồm
make-col
(
6
);
}
@ bao gồm
media-breakpoint-up
(
lg
)
{
@ bao gồm
make-col
(
4
);
}
}
Nội dung chính
Nội dung phụ
& lt; div
class =
"example-container"
& gt;
& lt; div
class =
"example-row"
& gt;
& lt; div
class =
"example-content-main"
& gt;
Nội dung chính & lt; / div & gt;
& lt; div
class =
"example-content-Secondary"
& gt;
Nội dung phụ & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Tùy chỉnh lưới
Bằng cách 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-column đượ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 < / code> đặt chiều rộng cho các rãnh cột.
$ grid-column
:
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 bậc lưới. Nếu bạn chỉ muốn bốn tầng lưới, bạn nên cập nhật $ grid-breakpoints và $ container-max-widths cho một cái gì đó như thế này:
$ 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 (không phải rem , em hoặc % ).
Xem thêm những thông tin liên quan đến chủ đề div class row bootstrap
Bootstrap 5 Grid System Tutorial
- Tác giả: Keep coding
- Ngày đăng: 2020-07-07
- Đánh giá: 4 ⭐ ( 2676 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Bootstrap grid is a powerful system for building mobile-first layouts. It's a very extensive tool with a great number of options.
Learn more about the newest Bootstrap 5 grid system in our tutorial: https://mdbootstrap.com/docs/standard/layout/grid/
Download Bootstrap:
https://mdbootstrap.com/docs/standard/bootstrap-5/===============================
🎁 Join our mailing list & receive exclusive resources for developers
https://mdbootstrap.com/newsletter/⭐ Support the creation of open-source packages with a STAR on GitHub
https://github.com/mdbootstrap/mdb-ui-kit👨👩👧👦 If you have any questions - don't hesitate to ask on our Facebook group:
https://www.facebook.com/groups/682245759188413🎓 Learn responsive web design with the latest Bootstrap 5
https://www.youtube.com/watch?v=c9B4TPnak1A📥 Download Material Design for Bootstrap - FREE open-source UI KIT
https://mdbootstrap.com/docs/standard/bootstrap5tutorialgridprogramming
0:00 Intro
0:48 Installation
4:08 Bootstrap Grid Explained
5:40 Breakpoints
6:30 Bootstrap grid examples
10:10 Changes in Bootstrap 5
10:30 Tutorial
10:55 Containers
13:49 Columns
14:14 Gutters
Bootstrap CSS class
- Tác giả: bootstrapshuffle.com
- Đánh giá: 5 ⭐ ( 6272 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Bootstrap CSS class row with source code and live preview. You can copy our examples and paste them into your project!
How to center divs in row in bootstrap?
- Tác giả: stackoverflow.com
- Đánh giá: 4 ⭐ ( 2525 lượt đánh giá )
- Khớp với kết quả tìm kiếm:
div class row in bootstrap code example
- Tác giả: newbedev.com
- Đánh giá: 3 ⭐ ( 6454 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Example 1: row class in bootstrap /* In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns
How does row work in Bootstrap with Examples?
- Tác giả: www.educba.com
- Đánh giá: 3 ⭐ ( 3468 lượt đánh giá )
- Khớp với kết quả tìm kiếm: This is a guide to Bootstrap row. Here we discuss the introduction, how does row work in bootstrap? and examples respectively.
Kiến thức Column và Row trong Bootstrap
- Tác giả: getbootstrap.com.vn
- Đánh giá: 3 ⭐ ( 6394 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Ở trong bootstrap thì Column(cột) và Row(dòng) là 2 thành phần quan trọng nhất ở trong hệ thống lưới - grid system, kiến thức về cột và hàng trong bootstrap
Bootstrap Grid System
- Tác giả: www.w3schools.com
- Đánh giá: 3 ⭐ ( 6754 lượt đánh giá )
- Khớp với kết quả tìm kiếm:
Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình