Hướng dẫn bootstrap 4 product grid - lưới sản phẩm bootstrap 4

Question

Trung Nguyen
15/03/2022
Nội dung chính Show
22 min read

Bootstrap Grid (Lưới Bootstrap) là cách nhanh nhất và dễ dàng để tạo bố cục trang web thích ứng.

Bootstrap Grid là gì?

Bootstrap Grid cung cấp một cách dễ dàng và mạnh mẽ để tạo các bố cục trang web thích ứng với mọi hình dạng và kích thước. Nó được xây dựng bằng flexbox với cách tiếp cận ưu tiên thiết bị di động. Ngoài ra, nó hoàn toàn đáp ứng và sử dụng hệ thống mười hai cột (12 cột có sẵn trên mỗi hàng) và sáu cấp phản hồi mặc định.

Bạn có thể sử dụng các lớp được định nghĩa trước của Bootstrap để nhanh chóng tạo bố cục cho các loại thiết bị khác nhau như điện thoại di động, máy tính bảng, máy tính xách tay, máy tính để bàn, v.v. Ví dụ: bạn có thể sử dụng các lớp


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

0 để tạo cột lưới cho các thiết bị nhỏ hơn như điện thoại di động ở chế độ dọc và các lớp


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

1 cho điện thoại di động ở chế độ ngang.

Tương tự, bạn có thể sử dụng các lớp


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

2 để tạo cột lưới cho các thiết bị màn hình trung bình như máy tính bảng, các lớp


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

3 cho các thiết bị như máy tính xách tay nhỏ, các lớp


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

4 cho máy tính xách tay và máy tính để bàn và các lớp


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

5 cho màn hình lớn.

Bảng sau đây tóm tắt các tính năng chính của Bootstrap Grid.

Đặc trưng Bootstrap Grid System	X-Small (xs)	Small (sm)≥576px	Medium (md)≥768px	Large (lg)≥992px	X-Large (xl)≥1200px	XX-Large (xxl)≥1400px
Container max-width	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`Column one Column two Column one Column two Column three` 6	`Column one Column two Column one Column two Column three` 7	`Column one Column two Column one Column two Column three` 8	`Column one Column two Column one Column two Column three` 9	`Column one Column two Column one Column two Column three` 0	`Column one Column two Column one Column two Column three` 1
Số cột	12
Chiều rộng rãnh	1.5rem (.75rem ở bên trái và bên phải)
Rãnh tùy chỉnh	Có
Có thể lồng nhau	Có
Có thể lồng nhau	Có

Có thể lồng nhau

Thứ tự cột

Bảng trên cho thấy một điều quan trọng, việc áp dụng bất kỳ lớp


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

1 nào cho một phần tử sẽ không chỉ ảnh hưởng đến các thiết bị nhỏ mà còn trên các thiết bị vừa, lớn và cực lớn (chiều rộng khung nhìn ≥768px), nếu một lớp


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

2,


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

3,


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

4 hoặc


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

5 không có mặt.

Tương tự như vậy, lớp


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

2 sẽ không chỉ có ảnh hưởng đến các thiết bị trung bình mà còn trên các thiết bị lớn và cực lớn nếu một lớp


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

3,


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

4 hoặc


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

5 không có mặt.

Bây giờ câu hỏi đặt ra là làm thế nào để tạo hàng và cột bằng cách sử dụng hệ thống lưới thích ứng 12 cột này. Câu trả lời khá đơn giản, lúc đầu hãy tạo một container hoạt động như một trình bao bọc cho các hàng và cột của bạn bằng cách sử dụng bất kỳ lớp container

Column one

Column two

Column three

1 nào, sau đó tạo các hàng bên trong container bằng cách sử dụng lớp

Column one

Column two

Column three

2 và để tạo các cột bên trong bất kỳ hàng nào, bạn có thể sử dụng các lớp

Column one

Column two

Column one

Column two

Column three

0,

Column one

Column two

Column one

Column two

Column three

1,

Column one

Column two

Column one

Column two

Column three

2,

Column one

Column two

Column one

Column two

Column three

3,

Column one

Column two

Column one

Column two

Column three

4 và

Column one

Column two

Column one

Column two

Column three

5.

Các cột là khu vực nội dung thực tế nơi chúng ta sẽ đặt nội dung của mình. Trong các phần sau, chúng tôi sẽ đưa tất cả những thứ này vào hành động thực tế và xem nó thực sự hoạt động như thế nào:


    
    
        Column left
        Column right
    
    
    
    
        Column left
        Column right
    
    
    
    
        Column left
        Column right

Tạo bố cục hai cột Trong bố cục dạng lưới, nội dung phải được đặt bên trong các cột (
    
        Column one
        Column two
        Column three
    
9 và
    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three
    
0) và chỉ các cột là con trực tiếp của hàng (
    
        Column one
        Column two
        Column three
    
2). Ngoài ra, các hàng nên được đặt bên trong container (fixed-width hoặc fluid) để có padding và căn chỉnh thích hợp.

Ví dụ sau sẽ hướng dẫn bạn cách tạo bố cục hai cột cho các thiết bị vừa, lớn và cực lớn như máy tính bảng, máy tính xách tay và máy tính để bàn, v.v. Tuy nhiên, trên điện thoại di động (chiều rộng màn hình nhỏ hơn 768px), các cột sẽ tự động trở thành chiều ngang (2 hàng , 1 cột). Chiều rộng cột lưới đượ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ử cha của chúng. Ngoài ra, mỗi cột có padding ngang (được gọi là máng xối) để kiểm soát không gian giữa các cột riêng lẻ.

Lưu ý: Trong bố cục dạng lưới, nội dung phải được đặt bên trong các cột (


    
        Column one
        Column two
        Column three

9 và


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

0) và chỉ các cột là con trực tiếp của hàng (


    
        Column one
        Column two
        Column three

2). Ngoài ra, các hàng nên được đặt bên trong container (fixed-width hoặc fluid) để có padding và căn chỉnh thích hợp.

Mẹo: Chiều rộng cột lưới đượ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ử cha của chúng. Ngoài ra, mỗi cột có padding ngang (được gọi là máng xối) để kiểm soát không gian giữa các cột riêng lẻ.

Vì Bootstrap Grid dựa trên 12 cột, do đó để giữ các cột trong một hàng (tức là nằm cạnh nhau trên một hàng), tổng số cột của lưới trong một hàng không được lớn hơn 12. Nếu bạn xem qua mã ví dụ trên một cách cẩn thận, bạn sẽ thấy tổng số cột của lưới (tức là


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

2) đều là 12 (6 + 6, 4 + 8 và 3 + 9) cho mỗi hàng.


    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right

Tạo bố cục ba cột Nếu nhiều hơn 12 cột của lưới được đặt trong một hàng, thì tổng thể mỗi nhóm cột bổ sung sẽ nằm trên một dòng mới.

Tương tự, bạn có thể tạo các bố cục khác dựa trên nguyên tắc trên. Ví dụ, ví dụ sau thường sẽ tạo bố cục ba cột cho màn hình máy tính xách tay và máy tính để bàn. Nó cũng hoạt động trong máy tính bảng ở chế độ ngang nếu độ phân giải màn hình lớn hơn hoặc bằng 992 pixel (ví dụ: Apple iPad). Tuy nhiên, ở chế độ dọc, các cột lưới sẽ nằm ngang như bình thường.

Lưu ý: Nếu nhiều hơn 12 cột của lưới được đặt trong một hàng, thì tổng thể mỗi nhóm cột bổ sung sẽ nằm trên một dòng mới.

Hãy thử ví dụ sau để hiểu cách hoạt động chính xác của nó:


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

Ngoài ra, bạn cũng có thể đặt chiều rộng của một cột và để các cột anh chị em tự động thay đổi kích thước xung quanh nó bằng nhau. Bạn có thể sử dụng các lớp lưới được định nghĩa trước hoặc độ rộng nội tuyến.

Nếu bạn thử ví dụ sau, bạn sẽ thấy các cột trong một hàng có lớp


    
        Column one
        Column two
        Column three

9 có chiều rộng bằng nhau.


    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three

Column Wrapping Behavior

Bây giờ chúng ta sẽ tạo các bố cục linh hoạt hơn thay đổi hướng cột dựa trên kích thước khung nhìn. Ví dụ sau sẽ tạo bố cục ba cột trên các thiết bị lớn như máy tính xách tay và máy tính để bàn, cũng như trên máy tính bảng (ví dụ: Apple iPad) ở chế độ ngang, nhưng trên các thiết bị trung bình như máy tính bảng ở chế độ dọc (768px ≤ chiều rộng màn hình


    
        Column one
        Column two
        Column three

Như bạn có thể thấy trong ví dụ trên, tổng số các cột của lưới medium (tức là


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

2) là


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

6, do đó, phần tử


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

7 thứ ba với lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

8 đã thêm cột ngoài 12 cột tối đa trong một hàng (


    
        Column one
        Column two
        Column three

2), được bao bọc trên một dòng mới là một đơn vị liền kề trên các thiết bị có kích thước màn hình trung bình.

Tương tự, bạn có thể tạo nhiều bố cục thích ứng hơn cho các trang web của mình bằng cách sử dụng tính năng grid column wrapping của Bootstrap.

Tạo bố cục nhiều cột với Bootstrap

Với hệ thống lưới flexbox đầu tiên dành cho thiết bị di động Bootstrap, bạn có thể dễ dàng kiểm soát cách bố cục trang web của mình sẽ hiển thị trên các loại thiết bị khác nhau có kích thước màn hình hoặc khung nhìn khác nhau như điện thoại di động, máy tính bảng, máy tính để bàn, v.v. Hãy xem minh họa sau.

Hướng dẫn bootstrap 4 product grid - lưới sản phẩm bootstrap 4

Trong hình minh họa trên, có tổng cộng 12 hộp nội dung trong tất cả các thiết bị, nhưng vị trí của nó thay đổi tùy theo kích thước màn hình thiết bị, giống như trong thiết bị di động, bố cục được hiển thị dưới dạng bố cục lưới 1 cột và 12 hàng được đặt lên nhau, trong khi trong máy tính bảng, nó được hiển thị dưới dạng bố cục lưới 2 cột và 6 hàng.

Hơn nữa, trong các thiết bị có kích thước màn hình lớn như máy tính xách tay và máy tính để bàn, nó được hiển thị dưới dạng bố cục lưới 3 cột và 4 hàng và cuối cùng trong các thiết bị màn hình cực lớn như máy tính để bàn lớn, nó được hiển thị dưới dạng bố cục lưới 4 cột và 3 hàng.

Bây giờ câu hỏi là làm thế nào chúng ta có thể tạo các bố cục thích ứng như vậy bằng cách sử dụng hệ thống lưới flexbox Bootstrap này. Hãy bắt đầu với thiết bị đích chính. Giả sử thiết bị mục tiêu chính của chúng ta là máy tính xách tay hoặc máy tính để bàn thông thường. Vì bố cục máy tính xách tay của chúng ta có 3 cột và 4 hàng, tức là bố cục lưới 3x4, vì vậy mã HTML để tạo cấu trúc lưới như vậy sẽ trông giống như thế này.


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

Mẹo: Lớp
Box 1 Box 2 Box 3 Box 4 Box 5 Box 6 Box 7 Box 8 Box 9 Box 10 Box 11 Box 12
0 làm cho container rộng 100% nếu chiều rộng của khung nhìn nhỏ hơn 992px, do đó sử dụng toàn bộ chiều rộng có sẵn trên các màn hình nhỏ hơn. Lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

0 làm cho container rộng 100% nếu chiều rộng của khung nhìn nhỏ hơn 992px, do đó sử dụng toàn bộ chiều rộng có sẵn trên các màn hình nhỏ hơn.

Nếu bạn thấy đầu ra của ví dụ trên trong một thiết bị lớn như máy tính xách tay hoặc máy tính để bàn có chiều rộng màn hình hoặc khung nhìn lớn hơn hoặc bằng 1200px nhưng nhỏ hơn 1400px, bạn sẽ thấy bố cục có 3 hàng trong đó mỗi hàng có 4 cột bằng nhau dẫn đến bố cục lưới 3x4.

Bây giờ đã đến lúc tùy chỉnh bố cục của chúng ta cho các thiết bị khác. Trước tiên, hãy bắt đầu bằng cách tùy chỉnh nó cho các thiết bị trung bình như máy tính bảng (768px ≤ chiều rộng khung nhìn < 1200px). Vì trên máy tính bảng, bố cục của chúng ta được hiển thị dưới dạng lưới 2x6 (tức là 2 cột và 6 hàng). Vì vậy, hãy tiếp tục và thêm lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

1 vào mỗi cột.


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

Mẹo: Để thuận tiện, hãy chọn thiết bị mục tiêu chính của bạn và tạo bố cục cho thiết bị đó trước sau đó thêm các lớp để làm cho thiết bị thích ứng với các thiết bị khác. Để thuận tiện, hãy chọn thiết bị mục tiêu chính của bạn và tạo bố cục cho thiết bị đó trước sau đó thêm các lớp để làm cho thiết bị thích ứng với các thiết bị khác.

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn, chẳng hạn như màn hình máy tính để bàn lớn bằng cách thêm lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

2 trên mỗi cột, vì mỗi hàng trong bố cục đó chứa 4 cột (tức là bố cục lưới 4x3). Đây là mã cuối cùng sau khi kết hợp toàn bộ quá trình.


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

Mẹo: Theo hình minh họa trên, không cần tùy chỉnh bố cục cho điện thoại di động; vì các cột trên các thiết bị nhỏ hơn sẽ tự động nằm ngang và được hiển thị dưới dạng bố cục lưới cột 1x12 khi không có lớp
Column one Column two Column one Column two Column three
0 hoặc
Column one Column two Column one Column two Column three
1. Theo hình minh họa trên, không cần tùy chỉnh bố cục cho điện thoại di động; vì các cột trên các thiết bị nhỏ hơn sẽ tự động nằm ngang và được hiển thị dưới dạng bố cục lưới cột 1x12 khi không có lớp
    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three
    
0 hoặc
    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three
    
1.

Các cột lồng nhau

Các cột của Bootstrap Grid cũng có thể lồng vào nhau, có nghĩa là bạn có thể đặt các hàng và cột bên trong một cột hiện có. Tuy vậy, công thức đặt các cột sẽ giống nhau, tức là tổng số cột phải bằng 12 hoặc nhỏ hơn trong một hàng.


    
        Column left

Tạo các cột có chiều rộng biến đổi

Bạn có thể sử dụng lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

5 để chỉ đị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. Hãy thử ví dụ sau để xem nó hoạt động như thế nào:


    
        Column left
        Variable width column
        Column right
    
    
        Column left
        Variable width column
        Column right

Căn chỉnh cột

Bạn có thể 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 bên trong vùng chứa. Hãy thử các ví dụ sau để hiểu cách hoạt động của nó:

Căn chỉnh theo chiều dọc của cột

Bạn có thể sử dụng các lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

6,


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

7 và


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

8 để căn chỉnh các cột theo chiều dọc ở trên cùng, giữa và dưới cùng của một vùng chứa tương ứng.


    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right

0

Các cột riêng lẻ bên trong một hàng cũng có thể được căn chỉnh theo chiều dọc. Đây là một ví dụ:


    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right

1

Lưu ý: Bạn có thể bỏ qua số trong lớp
Column one Column two Column one Column two Column three
0 và chỉ sử dụng lớp
Column one Column two Column three
9 để tạo các cột có kích thước bằng nhau cho tất cả các thiết bị (extra small, small, medium, large và extra large). Bạn có thể bỏ qua số trong lớp
    
    
        Column one
        Column two
    
    
    
    
        Column one
        Column two
        Column three
    
0 và chỉ sử dụng lớp
    
        Column one
        Column two
        Column three
    
9 để tạo các cột có kích thước bằng nhau cho tất cả các thiết bị (extra small, small, medium, large và extra large).

Căn chỉnh theo chiều ngang của cột

Bạn có thể sử dụng các lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

1,


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

2 và


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

3 để căn chỉnh các cột theo chiều ngang ở bên trái, trung tâm và bên phải của một vùng chứa tương ứng. Hãy xem ví dụ sau để xem nó hoạt động như thế nào:


    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right

2

Ngoài ra, bạn có thể sử dụng lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

4 để phân phối đồng đều các cột với khoảng cách nửa kích thước ở hai đầu, trong khi bạn có thể sử dụng lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

5 để phân phối đồng đều các cột ở vị trí cột đầu tiên đặt ở đầu và cột cuối cùng được đặt ở cuối. Hãy thử ví dụ sau để xem nó thực sự hoạt động như thế nào:


    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right

3

Sắp xếp thứ tự các cột

Bạn thậm chí có thể thay đổi thứ tự trực quan của các cột của mình mà không thay đổi thứ tự của chúng trong code. Sử dụng lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

6 để sắp xếp cột cuối cùng, trong khi sử dụng lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

7 để sắp xếp cột ở vị trí đầu tiên. Hãy xem một ví dụ:


    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right

4

Bạn cũng có thể sử dụng các lớp


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

8 để sắp xếp các cột tùy thuộc vào số thứ tự. Cột có số thứ tự cao hơn đứng sau cột lưới có số thứ tự thấp hơn hoặc cột không có lớp thứ tự. Nó bao gồm hỗ trợ từ 1 đến 12 trên tất cả năm cấp lưới.


    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right

5

Bù cột

Bạn cũng có thể di chuyển các cột sang bên phải cho mục đích căn chỉnh bằng cách sử dụng các lớp bù cột như


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

9,


    
        Column left

0,


    
        Column left

1, v.v.

Các lớp này bù trừ các cột bằng cách tăng lề trái của nó theo số cột được chỉ định. Ví dụ, lớp


    
        Column left

2 trên cột


    
        Column left

3 sẽ di chuyển nó sang bên phải trên bốn cột từ vị trí ban đầu của nó. Hãy thử ví dụ sau để xem nó hoạt động như thế nào:


    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right

6

Bạn cũng có thể bù trừ các cột bằng cách sử dụng các lớp tiện ích margin. Các lớp này hữu ích trong các trường hợp mà độ rộng của phần bù không được cố định. Đây là một ví dụ:


    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right

7

Lưu ý: Bạn có thể sử dụng lớp
Column left
4 để tạo các cột chỉ chiếm nhiều không gian khi cần thiết, tức là các cột có kích thước dựa trên nội dung. Bạn có thể sử dụng lớp


    
        Column left

4 để tạo các cột chỉ chiếm nhiều không gian khi cần thiết, tức là các cột có kích thước dựa trên nội dung.

Tạo các cột nhỏ gọn

Bạn có thể loại bỏ máng xối mặc định giữa các cột để tạo bố cục nhỏ gọn bằng cách thêm lớp


    
        Column left

5 vào


    
        Column one
        Column two
        Column three

2. Lớp này loại bỏ các lề âm khỏi hàng và khoảng đệm ngang khỏi tất cả các cột con ngay lập tức. Đây là một ví dụ:


    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right

8

Ngắt các cột thành một hàng mới

Bạn cũng có thể 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 một thẻ


    
        Box 1
        Box 2
        Box 3
        Box 4
        Box 5
        Box 6
        Box 7
        Box 8
        Box 9
        Box 10
        Box 11
        Box 12

7 với lớp


    
        Column left

8 nơi bạn muốn các cột ngắt thành một hàng mới. Ngoài ra, bạn có thể làm cho các ngắt này trở nên thích ứng bằng cách kết hợp lớp


    
        Column left

8 với các lớp tiện ích hiển thị thích ứng .


    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right
    
    
    
    
        Column left
        Column middle
        Column right

9

Chúng tôi hy vọng bạn đã hiểu những điều cơ bản về Bootstrap 5 Grid mới. Trong vài chương tiếp theo, bạn sẽ học cách tạo bố cục trang web cơ bản bằng cách sử dụng hệ thống lưới flexbox này.

Nếu Comdy hữu ích và giúp bạn tiết kiệm thời gianComdy hữu ích và giúp bạn tiết kiệm thời gian

Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.

Bootstrap • Bootstrap Cơ Bản

programming bootstrap Bootstrap Học web Dấu chấm HTML List trong HTML Hocwebgiare

Hướng dẫn bootstrap 4 product grid - lưới sản phẩm bootstrap 4

Bootstrap Grid là gì?

Column Wrapping Behavior

Tạo bố cục nhiều cột với Bootstrap

Các cột lồng nhau

Tạo các cột có chiều rộng biến đổi

Căn chỉnh cột

Căn chỉnh theo chiều dọc của cột

Căn chỉnh theo chiều ngang của cột

Sắp xếp thứ tự các cột

Bù cột

Tạo các cột nhỏ gọn

Ngắt các cột thành một hàng mới

Nếu Comdy hữu ích và giúp bạn tiết kiệm thời gianComdy hữu ích và giúp bạn tiết kiệm thời gian

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội