Hệ thống lưới điện – div class row bootstrap

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-liquid cho width: 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ó padding nằm ngang (được gọi là rãnh nước) để kiểm soát khoảng cách giữa chúng. Sau đó, padding nà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 width s đượ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óa margin từ các hàng và padding từ các cột có . no-gutters trê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ên xs breakpoint).
  • 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 . 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 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 . order-last thay đổi thứ tự của một phần tử bằng cách áp dụng order: -1 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 $ 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

Xem Thêm  ArrayList trong Java - mảng java của danh sách mảng