Bạn có thể xây dựng bất kỳ loại bố cục đáp ứng nào bằng cách sử dụng hệ thống lưới Bootstrap 4. Nó được xây dựng từ flexbox để tạo ra một hệ thống 12 cột

Bạn đang xem: lưới bố cục bootstrap 4

Bạn có thể tạo bất kỳ loại bố cục đáp ứng nào bằng cách sử dụng Bootstrap 4 hệ thống lưới điện. Nó được xây dựng từ flexbox để tạo ra một hệ thống 12 cột để thay đổi kích thước thiết kế cho tất cả các loại kích thước màn hình.

Có nhiều lớp được xác định trước để tạo bố cục cho bất kỳ loại màn hình nào.

Các lớp hệ thống lưới trong Bootstrap 4

Có 5 lớp lưới để sử dụng và tạo với hệ thống lưới 12 cột trong Bootstrap 4. Các lớp lưới được cung cấp bên dưới:

  1. .col (Mới từ Bootstrap 4)
  2. .col-sm-
  3. .col-md-
  4. .col-lg-
  5. .col-xl- (Mới từ Bootstrap 4)

.col dành cho kích thước thiết bị cực nhỏ như điện thoại di động có kích thước màn hình nhỏ hơn 576px, .col-sm- dành cho kích thước thiết bị nhỏ như điện thoại di động với kích thước màn hình lớn hơn 576px, .col-md- dành cho các thiết bị có kích thước trung bình như máy tính bảng có kích thước màn hình lớn hơn 768px, .col-lg- dành cho các thiết bị kích thước lớn như máy tính để bàn có kích thước màn hình lớn hơn 992px, .col-xl- dành cho các thiết bị cực lớn như máy tính để bàn có kích thước màn hình lớn hơn 1200px.

Kích thước lưới trong Bootstrap 4

Bảng hiển thị các kích thước hệ thống lưới Bootstrap khác nhau cho tất cả các thiết bị loại trong Bootstrap 4 như được cung cấp bên dưới:

Cực nhỏ
& gt; 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-

Số 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

Bảng trên cho thấy rằng nếu bạn muốn xác định kích thước khác cho tất cả kích thước màn hình, bạn phải thêm tất cả các lớp ở trên trong phần tử & lt; div & gt; cho các bố cục khác nhau.

Nếu bạn sử dụng một lớp duy nhất trong phần tử & lt; div & gt; như lớp lưới cực nhỏ .col- , nó sẽ được áp dụng cho tất cả các kích thước màn hình cao hơn nếu bạn không sử dụng các lớp lưới khác .col-sm- , .col-md- , .col-lg- và < mã> .col-xl-

Tương tự, nếu bạn sử dụng lớp lưới nhỏ .col-sm- , nó sẽ được áp dụng cho tất cả kích thước màn hình cao hơn nhưng không áp dụng cho kích thước màn hình thấp hơn nếu bạn không sử dụng các lớp lưới khác .col- , .col-md- , .col-lg- .col-xl- . Các cột kích thước màn hình phụ nằm ngang.

Cách sử dụng hệ thống lưới trên để tạo hàng và cột

Để tạo bố cục bằng cách sử dụng hệ thống lưới Bootstrap 4 ở trên, bạn phải sử dụng phần tử & lt; div & gt; với .container .row lớp bên trong nó. Sau đó, bạn có thể sử dụng lớp hệ thống lưới ở trên .col - * - * như được đưa ra trong ví dụ bên dưới:

Ví dụ

1

2

3

4

5

6

& lt; div

class =

"container"

& gt;

& lt; div

lớp

=

" hàng "

& gt;

& lt; div

lớp

=

"col - * - *"

& gt;

Cột Một

& lt; / div & gt;

& lt; div

class

=

" col - * - * "

& gt;

Cột Hai

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Hãy cùng tìm hiểu thêm các cách với các ví dụ trực tiếp hơn được cung cấp bên dưới.

Các cột được bố trí tự động có chiều rộng bằng nhau

Để tạo các cột có cùng chiều rộng cho tất cả các kích thước màn hình. Nó không yêu cầu chỉ định số cột để tạo các cột có chiều rộng bằng nhau. Bạn phải sử dụng lớp .col của Bootstrap 4 để tạo các cột có cùng kích thước.

Sử dụng lớp .col một lần cho bố cục một cột, hai lần cho hai cột, ba lần cho ba cột, v.v. Xem ví dụ dưới đây để tạo các cột có cùng kích thước:

Bố cục tự động hai cột

Bố cục tự động hai cột yêu cầu hai lớp .col để tạo hai cột có kích thước bằng nhau cho tất cả các kích thước màn hình. Ví dụ dưới đây tạo bố cục tự động hai cột:

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

& lt; div

class =

"container"

& gt;

& lt; div

lớp

=

" hàng "

& gt;

& lt; div

class

=

"col"

& gt;

Cột Một

& lt; / div & gt;

& lt; div

class

=

"col"

& gt;

Cột Hai

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt; < / p>

Bố cục tự động ba cột

Bố cục tự động ba cột yêu cầu ba lớp .col tạo ba cột có cùng kích thước cho tất cả các kích thước màn hình. Xem ví dụ dưới đây cho thấy bố cục tự động ba cột.

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

& lt; div

class =

"container"

& gt;

& lt; div

lớp

=

" hàng "

& gt;

& lt; div

class

=

"col"

& gt;

Cột Một

& lt; / div & gt;

& lt; div

class

=

"col"

& gt;

Cột Hai

& lt; / div & gt;

& lt; div

class

=

"col"

& gt; < / p>

Cột Ba

& lt; / div & gt;

& lt; / div & gt;

< / p>

& lt; / div & gt;

Bạn có thể kiểm tra bố cục bằng nút "Kiểm tra trực tiếp" ở trên.

Tự động bố trí cột với Dấu ngắt dòng

Nếu bạn muốn tạo các cột bố cục tự động có ngắt dòng, bạn phải sử dụng lớp .w-100 cho vị trí mà bạn muốn ngắt các cột xuống dòng tiếp theo.

Ví dụ dưới đây chứa sáu lớp .col và lớp ngắt dòng .w-100 sau hai .col và sau ba < code> .col các lớp như được cung cấp bên dưới:

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

8

9

10

11

12

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row “

& gt;

& lt; div

class

=

” col “

& gt;

Cột Một

& lt; / div & gt;

< p class = "crayon-line crayon-sọc-line" id = "crayon-61f430678ff4b270435143-4">

& lt; div

class

=

“col”

& gt; < / p>

Cột Hai

& l t; / div & gt;

& lt; div

class

=

“w-100”

& gt;

& lt; / div & gt;

& lt; div

class

=

” col “

& gt;

Cột Một

& lt; / div & gt;

< p class = "crayon-i">

& lt; div

class

=

“col”

& gt;

Cột Hai

& lt; / div & gt;

& lt; div

cla ss

=

“col”

& gt;

Cột Ba

& lt; / div & gt;

& lt; div

class

=

” w-100 “

& gt;

& lt; / div & gt;

& lt; div

class

=

“col”

& gt;

Cột Một

& lt; / div & gt;

& lt; / div & gt;

& lt ; / div & gt;

Đặt chiều rộng một cột với bố cục tự động cho cột khác

Với hệ thống bố cục tự động, bạn cũng có thể đặt chiều rộng cho bất kỳ cột nào bạn chọn bằng cách thêm số vào cột. Con số có nghĩa là bạn có thể sử dụng bất kỳ lựa chọn lưới nào như .col- , .col-sm- và các lưới cao hơn khác như bên dưới:

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

& lt; div

class

=

“container”

& gt;

< / p>

& lt; div

class

=

“row”

& gt;

& lt; div

class

=

“col”

& gt;

Cột Một

& lt; / div & gt;

& lt; div

class

=

“col-sm-6 “

& gt;

Cột Hai (

& lt; mã & gt;

. col-sm-6

& lt; / code & gt;

< p class = "crayon-i">)

& lt; / div & gt;

& lt; div

class =

“col”

& gt;

Cột Ba

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Ví dụ trên có ba cột với chiều rộng cột thứ hai được đặt bằng .col-sm-6 . Điều này đặt chiều rộng cho các thiết bị nhỏ và cao hơn nhưng không đặt cho các thiết bị nhỏ hơn. Bạn có thể kiểm tra trực tiếp ví dụ trên để kiểm tra kết quả.

Chiều rộng cột biến đổi theo kích thước nội dung

Chiều rộng cột biến đổi hữu ích khi bạn muốn đặt kích thước cột theo kích thước tự nhiên của nội dung. Bạn phải sử dụng lớp Bootstrap 4 .col- {breakpoint} -auto như được cung cấp bên dưới:

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row “

& gt;

& lt; div

class

=

” col “

& gt;

Cột Một

& lt; / div & gt;

< p class = "crayon-line crayon-sọc-line" id = "crayon-61f430678ff50810965304-4">

& lt; div

class

=

“col-sm-auto”

& gt;

Theo Kích thước Nội dung

& lt; / div & gt;

& lt; div

class

=

“col-sm-4”

& gt;

Cột Ba

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Ví dụ trên đặt chiều rộng cột thay đổi cho điểm ngắt thiết bị nhỏ cũng được áp dụng cho kích thước thiết bị cao hơn nhưng không áp dụng cho kích thước màn hình nhỏ hơn. Bạn có thể kiểm tra kích thước ví dụ trên và thay đổi kích thước màn hình để kiểm tra xem màn hình có hoạt động trên các kích thước màn hình khác nhau hay không.

Tạo cho hệ thống lưới Bootstrap 4 giống nhau cho tất cả các điểm ngắt (thiết bị từ cực nhỏ đến cực lớn)

Bạn có thể tạo các cột hoạt động trên tất cả các điểm ngắt cho tất cả các kích thước thiết bị như được đưa ra trong các ví dụ bên dưới.

Các cột có cùng kích thước

Khi bạn muốn đặt các cột có cùng kích thước cho tất cả các điểm ngắt, bạn phải sử dụng lớp Bootstrap 4 .col . Số lần bạn sử dụng lớp .col, cùng một số cột mà bạn sẽ nhận được trong đầu ra cho tất cả các điểm ngắt như được cung cấp bên dưới:

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row “

& gt;

& lt; div

class

=

” col “

& gt;

col

& lt; / div & gt;

& lt; div < / p>

class

=

“col”

& gt;

col

& lt; / div & gt;

& lt; div

class

=

“col”

& gt; < / p>

col

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Cột Kích thước Chỉ định

Bạn cũng có thể chỉ định kích thước cột giống nhau cho tất cả các điểm ngắt hoặc kích thước màn hình. Để đặt kích thước được chỉ định, bạn phải sử dụng lớp .col- * như được đưa ra trong ví dụ bên dưới:

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row “

& gt;

& lt; div

class

=

” col-3 “

& gt;

col-3

& lt; / div & gt;

& lt; div

class

=

“col-6”

& gt;

col-6

& lt; / div & gt;

& lt; div

class

=

” col-3 “

& gt;

col-3

& lt; / div & gt;

< / p>

& lt; / div & gt;

& lt; / div & gt;

Ngang trên Điểm ngắt nhỏ

Để tạo các cột nằm ngang cho các điểm ngắt nhỏ, bạn phải sử dụng lớp .col-sm- * . Kích thước được chỉ định hoạt động trên các thiết bị có kích thước nhỏ đến cao hơn nhưng không áp dụng cho kích thước thiết bị cực nhỏ.

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row “

& gt;

& lt; div

class

=

” col-sm-4 “

& gt;

col-sm-4

& lt; / div & gt;

& lt; div

class

=

” col-sm-3 “

& gt;

col-sm-3

& lt; / div & gt;

& lt; div

class

=

“col-sm-5”

& gt;

col-sm-5

& lt ; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Tất cả các cột chuyển đổi thành ngang khi bạn kiểm tra trực tiếp ví dụ trên. Bạn có thể thay đổi kích thước kích thước màn hình để kiểm tra kết quả trong trình duyệt.

Bạn cũng có thể sử dụng .col-sm để đặt cùng kích thước cột cho các kích thước màn hình từ nhỏ đến cao hơn. Sau khi đạt đến điểm ngắt nhỏ, nó sẽ nằm ngang để tăng kích thước thiết bị nhỏ hơn.

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

& lt; div

class =

“container”

& 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;

& lt; / div & gt;

Sự kết hợp của các lớp khác nhau

Bạn có thể thêm các cột lưới có kích thước khác nhau để làm cho các cột giống nhau cho tất cả các điểm ngắt. Ví dụ dưới đây sử dụng các cột lưới .col- * .col- {breakpoint} - * để tạo các cột giống nhau cho các điểm ngắt được chỉ định.

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row “

& gt;

& lt; div

class

=

” col-6 col-sm-4 col-md- 8 col-lg-4 “

& gt;

col-6 col-sm-4 col-md-8 col-lg-4

& lt; / div & gt;

& lt; div

class =

“col-6 col-sm-4 col-md-4 col-lg-8”

& gt;

col-6 col-sm-4 col-md-4 col-lg-8

& lt; / div & gt;

& lt; div

class

=

“col-12 col -sm-4 col-md-6 col-lg-4 “

& gt;

col-12 col- sm-4 col-md-6 col-lg-4

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt; < / p>

Ví dụ trên sử dụng .col- * , .col-sm- * , .col-md- * .col-lg- * . Bạn có thể kiểm tra trực tiếp và thay đổi kích thước kích thước trình duyệt của mình để kiểm tra kết quả cho các điểm ngắt khác nhau với sự kết hợp được chỉ định.

Cột hàng để đặt nhanh số cột

Các cột hàng hữu ích để nhanh chóng đặt số lượng cột với hàng. Bạn phải sử dụng .row-cols- * với lớp .row để xác định các cột.

Khi bạn chỉ định .row-cols-2 với .row , điều đó có nghĩa là bạn đặt hai cột xuất hiện trong mỗi hàng như được cung cấp bên dưới:
Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

8

9

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row row-cols-2 “

& gt;

< p class = "crayon-r"> & lt; div

class

=

“col”

< p class = "crayon-r"> & gt;

col

& lt; / div & gt;

< / p>

& 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

lớp

=

“col”

& gt;

col < / p>

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Ví dụ trên sử dụng .col cho các cột có cùng kích thước với một số cột được đặt ở đầu. Tuy nhiên, bạn cũng có thể sử dụng các cột lưới điểm ngắt khác mà ví dụ được đưa ra bên dưới sau ví dụ tiếp theo.

Để tạo nhanh ba cột, bạn phải chỉ định .row-cols-3 bằng .row . Ví dụ dưới đây sử dụng cùng một số cột như bạn đã tạo trong ví dụ trên.

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

8

9

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row row-cols-3 “

& gt;

< p class = "crayon-r"> & lt; div

class

=

“col”

< p class = "crayon-r"> & gt;

col

& lt; / div & gt;

< / p>

& 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

lớp

=

“col”

& gt;

col < / p>

& lt; / div & gt;

& lt; / div & gt; < / p>

& lt; / div & gt;

Ví dụ trên sử dụng cùng một lớp .col để tạo các cột có cùng kích thước cho tất cả các điểm ngắt. Cột hàng là cách dễ nhất để ngắt các cột thành một bố cục được chỉ định duy nhất mà bạn có thể kiểm tra trực tiếp ở trên.

Ngoài tất cả các cột hàng ở trên trong Bootstrap 4, bạn cũng có thể chỉ định các cột hàng theo các điểm ngắt. Để chỉ định các điểm ngắt, bạn phải sử dụng lớp .row-cols- {breakpoint} - * với lớp .row như được cung cấp bên dưới:

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

8

9

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 “< / p>

& gt;

& lt; div

class

=

“col”

& gt;

< p class = "crayon-i"> 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; < / p>

& lt; div

class

=

“col”

& gt;

col

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Bạn có thể kiểm tra trực tiếp ví dụ trên và thay đổi kích thước kích thước trình duyệt để kiểm tra các cột hàng tự thay đổi theo các điểm ngắt được chỉ định.

Căn chỉnh các cột

Bootstrap 4 cung cấp nhiều lớp hữu ích để dễ dàng tạo các cột và căn chỉnh chúng theo chiều dọc hoặc chiều ngang. Hãy cùng tìm hiểu các lớp và các ví dụ để dễ dàng hiểu phương pháp.

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

Căn chỉnh theo chiều dọc rất hữu ích để căn chỉnh hàng và cột theo chiều dọc trong một vùng chứa kích thước được chỉ định.

Để căn chỉnh hàng chứa các cột lưới, có ba lớp Bootstrap 4. Lớp đầu tiên là align-items-start để căn chỉnh hàng lên trên cùng, .align-items-center để căn chỉnh hàng vào giữa, .align-items- end để căn chỉnh các cột đến cuối vùng chứa như được cung cấp bên dưới:

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row align-items-start “

& gt;

< p class = "crayon-r"> & lt; div

class

=

“col”

< p class = "crayon-r"> & gt;

cột một hàng đầu tiên

& lt; / div & gt;

& lt; div

class

=

” col “

& gt;

Hàng đầu tiên cột hai

& lt; / div & gt;

& lt; div

class

=

” col “

& gt;

Hàng thứ nhất, cột ba

& lt; / div & gt;

& lt; / div & gt;

< p class = "crayon-i">

& lt; div

class

=

“row align-items-center”

& gt;

& lt; div

class

=

” col “

& gt;

cột một hàng thứ 2

& lt; / div & gt;

& lt; div

class

=

“col”

& gt;

cột hai hàng thứ hai

& lt; / div & gt;

< / p>

& lt; div

class

=

“col”

& gt;

cột ba hàng thứ hai

& lt; / div & gt;

& lt; / div & gt;

& lt; div

class < / p> =

“row align-items-end”

& gt;

& lt; div

class

=

” col “

& gt;

cột một hàng thứ 3

& lt; / div & gt;

& lt; div

class

=

“col”

& gt;

Hàng thứ 3, cột hai

& lt; / div & gt;

& lt; div

class

=

“col “

& gt;

cột ba hàng thứ ba

& lt ; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Bạn có thể kiểm tra trực tiếp ví dụ trên để kiểm tra sự liên kết của các hàng chứa cột lưới.

Ngoài căn chỉnh hàng, bạn cũng có thể căn chỉnh các cột bằng cách sử dụng các lớp căn chỉnh trong Bootstrap. Lớp .align-self-start căn chỉnh cột ở vị trí trên cùng, .align-self-center căn chỉnh cột vào vị trí trung tâm, .align- self-end căn chỉnh cột với vị trí cuối của vùng chứa.

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row “

& gt;

& lt; div

class

=

” col align-self-start “

< p class = "crayon-r"> & gt;

cột một

& lt; / div & gt;

& lt; div

class

=

” col align-self-center “

& gt;

c olumn hai

& lt; / div & gt;

& lt; div

class

=

” col align-self-end “

& gt;

cột ba

< p class = "crayon-r"> & lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Khi kiểm tra trực tiếp ví dụ trên, bạn có thể thấy kết quả cho thấy rằng các cột được căn chỉnh theo chiều dọc theo vị trí được chỉ định của cột.

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

Căn chỉnh theo chiều ngang của các cột rất hữu ích để căn chỉnh các cột theo chiều ngang. Bạn có thể sử dụng lớp .justify-content-start để di chuyển các cột theo chiều ngang sang vị trí bên trái, .justify-content-center để di chuyển các cột theo chiều ngang đến vị trí trung tâm, .justify-content-end để di chuyển các cột theo chiều ngang đến đúng vị trí.

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row justify-content-start “

& gt;

< p class = "crayon-r"> & lt; div

class

=

“col-3”

& gt;

cột một hàng đầu tiên

& lt; / div & gt;

& lt; div

class

=

“col-3”

& gt;

1 giây t hàng cột hai

& lt; / div & gt;

& lt; / div & gt;

& lt; div

class

=

” row justify-content-center “

& gt;

& lt; div

class

=

“col-3”

< p class = "crayon-r"> & gt;

cột một ở hàng thứ 2

& lt; / div & gt;

& lt; div

class

=

” col-3 “

& gt;

r thứ 2 ow cột hai

& lt; / div & gt;

< p class = "crayon-i">

& lt; / div & gt;

& lt; div

class

=

“row justify-content-end”

& gt;

& lt; div

class

=

“col-3”

& gt;

cột một hàng thứ 3

& lt; / div & gt;

& lt; div

class

=

” col-3 “

& gt;

hàng thứ 3 cột hai

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Bạn có thể kiểm tra trực tiếp ví dụ trên để kiểm tra căn chỉnh theo chiều ngang trong đầu ra.

Có hai lớp khác để căn chỉnh theo chiều ngang của các cột. Bạn có thể sử dụng lớp .justify-content-around để đặt các cột lưới có kích thước bằng nửa dấu cách ở hai đầu. Bạn cũng có thể sử dụng .justify-content-between để đặt cột đầu tiên ở bên trái ở đầu và cột thứ hai ở bên phải ở cuối.

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

8

9

10

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row justify-content-around “

& gt;

< p class = "crayon-r"> & lt; div

class

=

“col-3”

& gt;

cột một hàng đầu tiên

& lt; / div & gt;

& lt; div

class

=

“col-3”

& gt;

1 cột hai hàng st

& lt; / div & gt;

& lt; / div & gt;

& lt; div

class

=

” row justify-content-between “

& gt;

& lt; div

class

=

“col-3”

< p class = "crayon-r"> & gt;

cột một ở hàng thứ 2

& lt; / div & gt;

& lt; div

class

=

” col-3 “

& gt;

thứ 2 cột hàng hai

& lt; / div & gt;

< p class = "crayon-i">

& lt; / div & gt;

& lt; / div & gt;

Hành vi đóng gói của các cột

Các cột trong một hàng hoạt động theo 12 cột lưới. Khi kích thước cột tăng lưới 12 cột, nó sẽ chuyển xuống hàng tiếp theo trong Bootstrap. Hãy cùng tìm hiểu hành vi bao bọc này với ví dụ dưới đây:

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

8

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row “

& gt;

& lt; div

class

=

” col-6 “

& gt;

col-6

& lt; / div & gt;

& lt; div

class

=

“col-3”

& gt;

col-3

& lt; / div & gt;

& lt; div

class

=

” col-4 “

& gt;

col-4

& lt; / div & gt;

& lt; div

class

=

“col-8”

& gt;

col-8

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Trong ví dụ trên, cột đầu tiên có 6 cột, cột thứ hai có 3 cột, cột thứ ba tăng 12 cột lưới để di chuyển nó sang hàng tiếp theo mà bạn có thể kiểm tra trực tiếp ở trên.

Sắp xếp lại các cột

Bạn có thể sắp xếp lại thứ tự các cột lưới để đặt thứ tự bắt buộc của các cột trong một hàng. Điều này có thể hữu ích để đặt trình tự cột thích hợp để hiển thị trong giao diện người dùng theo yêu cầu của bạn. Bạn phải sử dụng lớp sắp xếp lại .order- * để kiểm soát thứ tự của các cột trong hệ thống lưới 12 như được cung cấp bên dưới.

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row “

& gt;

& lt; div

class

=

” col “

& gt;

Cột đầu tiên, nhưng không có thứ tự

& lt; / div & gt;

& lt; div

class

=

“col order-3”

& gt;

Colu thứ hai mn, nhưng cuối cùng

& lt; / div & gt;

& lt; div

class

=

“col order-1”

& gt;

Cột thứ ba, nhưng cột thứ hai

& lt; / div & gt;

< p class = "crayon-i">

& lt; / div & gt;

& lt; / div & gt;

Ví dụ trên sử dụng lớp sắp xếp lại .order-3 để thay đổi thứ tự của các cột thứ hai để làm cho nó cuối cùng. Nó cũng đã thêm lớp .order-1 để di chuyển nó đến vị trí cột thứ hai.

Bạn cũng có thể sử dụng lớp order-first để di chuyển cột đến vị trí đầu tiên và lớp .order-last để di chuyển cột đến vị trí cuối cùng trong một thùng chứa.

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

& lt; div

class =

“container”

& gt;

& lt; div

class

=

” row “

& gt;

& lt; div

class

=

“col order-last” < / p>

& gt;

cột đầu tiên, nhưng cuối cùng

& lt; / div & gt;

< p class = "crayon-r"> & lt; div

class

=

“col”

< p class = "crayon-r"> & gt;

cột thứ hai, nhưng không có thứ tự

& lt; / div & gt; < / p>

& lt; div

class

=

“col order-first”

& gt;

cột cuối cùng, nhưng cột đầu tiên

& lt; / div & gt;

& lt ; / div & gt;

& lt; / div & gt;

Ví dụ trên sử dụng hai lớp mà bạn có thể kiểm tra trực tiếp để kiểm tra kết quả của việc sắp xếp lại các cột.

Bù đắp các cột

Việc bù trừ các cột trong Bootstrap là quá trình hữu ích để di chuyển các cột sang vị trí bên phải với một số tăng lề trái. Phần bù sử dụng các con số để tăng lề trái trên 12 cột.

Bạn phải sử dụng lớp .offset- {breakpoint} - * (như .offset-sm- * , .offset-md - * < / code> và .offset-xl- * ) để đặt lề trái cho các cột như bên dưới:

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

& lt; div

class =

"container"

& gt;

& lt; div

class

=

" row "

& gt;

& lt; div

class

=

" col-md-3 "

& gt;

col-md-3

& lt; / div & gt;

& lt; div

class

=

" col-md-6 offset-md-3 "< / p>

& gt;

col-md-6 offset- md-3

& lt; / div & gt;

< p class = "crayon-i">

& lt; / div & gt;

& lt; div

class

=

"row"

& gt;

& lt; div

class

=

"col-md-6 offset-md-6"

& gt;

col-md-6 offset-md-6

& lt; / div & gt;

& lt; / div & gt;

& lt; div

class

=

"row"

& gt;

< / p>

& lt; div

class

=

"col-md -2 "

& gt;

col-md-2

& lt; / div & gt;

& lt; div

lớp

=

"col-md-2 offset-md-2"

& gt;

col-md-2 offset-md-2

& lt; / div & gt;

& lt; div

< p class = "crayon-e"> class

=

"col-md-3 offset-md-3"

& gt;

col-md-3 offset-md-3

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt; < / p>

Ví dụ trên đặt giá trị chênh lệch cho các thiết bị kích thước trung bình cũng hoạt động cho các kích thước cao hơn nhưng không hoạt động cho các kích thước thấp hơn. Bạn có thể kiểm tra trực tiếp ví dụ để xem kết quả bù trừ làm tăng lề trái.

Bạn cũng có thể đặt độ lệch bằng cách sử dụng các lớp tiện ích lề .ml-auto để đặt cột ở cuối, .mr-auto để đặt sau cột ở end và .ml- {breakpoint} -auto để đặt cột ở cuối theo điểm ngắt đã chỉ định.

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

& lt; div

class =

"container"

& gt;

& lt; div

class

=

" row "

& gt;

& lt; div

class

=

" col-md-3 "

& gt;

col-md-3

& 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-auto mr-auto"

& gt ;

col-auto mr-auto

& lt; / div & gt;

& lt; div < / p>

class

=

"col-auto"

& gt;

col-auto

& lt; / div & gt;

& lt; / div & gt;

& lt; div

class

=

"hàng "

& gt;

& lt; div

lớp

=

"col-md-3 ml-sm-auto"

& gt;

col-md-3 ml-sm-auto

& lt; / div & gt;

& lt; div

< p class = "crayon-e"> class

=

"col-md-4 ml-sm-auto"

& gt;

col-md-4 ml-sm-auto

& lt; / div & gt;

& lt; / div & gt;

< / p>

& lt; / div & gt;

Hệ thống 4 cột lưới trong Bootstrap lồng nhau

Bạn cũng có thể đặt các cột lưới bên trong các cột lưới khác trong Bootstrap 4. Thao tác này yêu cầu một lần nữa các cột lưới bên trong lớp .row để tạo các cột lồng nhau. Cột lồng nhau cũng phải là cột lưới 12 để đặt trong một hàng như được cho bên dưới:

Kiểm tra trực tiếp

Ví dụ

1

2

3

4

5

6

7

8

9

10

11

12

& lt; div

class =

"container"

& gt;

& lt; div

class

=

" row "

& gt;

& lt; div

class

=

" col-md-4 "

& gt;

col-md-4 Cấp 1

& lt; / div & gt;

& lt; div

class

=

"col-md-8"

& gt;

Col-md-8 cấp 1

& lt; div

class =

"row"

& gt;

& lt; div

lớp

=

"col-md-6"

& gt;

col-md-6 Cấp 2

& lt; / div & gt;

& lt; div

class

=

" col-md-6 "

& gt;

Cấp 2 col-md-6

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

< / p>

& lt; / div & gt ;

& lt; / div & gt;

Ví dụ trên tạo một cột lồng nhau bên trong cột lưới .col-md-8 .

Tôi hy vọng hướng dẫn này sẽ giúp bạn tìm hiểu hệ thống lưới Bootstrap 4.

Chương tiếp theo ➔ Bootstrap 4 Typography & gt; & gt;


Xem thêm những thông tin liên quan đến chủ đề lưới bố cục bootstrap 4

Học nhanh Bootstrap 3 phần 5 - Cách chia lưới bố cục cơ bản nhất

  • Tác giả: Lửng Code
  • Ngày đăng: 2021-09-09
  • Đánh giá: 4 ⭐ ( 2742 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Facebook Profile: Facebook: https://facebook.com/itvnsoft
    Facebook Page: https://www.facebook.com/lungcode
    Youtube chanel: https://www.youtube.com/channel/UCaUOOdtyRzaZ0zbrPgWRVZg/playlists?view_as=subscriber

Grid System (Hệ thống lưới) trong Bootstrap

  • Tác giả: devmaster.edu.vn
  • Đánh giá: 3 ⭐ ( 3354 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Grid System (hệ thống lưới) trong Bootstrap được xây dựng với flexbox, cho phép tạo tới 12 cột trên một trang. Nếu bạn không muốn sử dụng tất cả 12 cột riêng biệt thì có thể nhóm chúng lại với nhau để tạo ra những cột rộng hơn., Đào tạo lập trình viên chuyên nghiệp - php - .net - java - android - ios - c - C++,C#, Tư vấn thiết kế và xậy dựng phần mềm, thiết kế website

Bootstrap: Hệ thống lưới

  • Tác giả: v1study.com
  • Đánh giá: 4 ⭐ ( 5366 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thư

Học Grid System trong Bootstrap, cú pháp và ví dụ minh họa

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 8695 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: grid system trong bootstrap, Học Grid System trong Bootstrap, cú pháp và ví dụ minh họa

Hệ thống lưới Bootstrap 4

  • Tác giả: hoc.tv
  • Đánh giá: 3 ⭐ ( 9220 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ học về hệ thống lưới của Bootstrap 4. Mặc dù cũng là hệ thống 12 cột thế nhưng hệ thống lưới của Bootstrap 4 có đôi chút khác biệt với Bootstrap 3 vì vậy bạn tránh nhầm lẫn khi sử dụng nhé!

Phần 2 CSS3 - Hệ thống lưới của BootStrap

  • Tác giả: dotnet.edu.vn
  • Đánh giá: 4 ⭐ ( 8384 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm các class được định nghĩa trước để thuận tiện cho việc xây dựng bố cục, cùng với đó một bộ các mixin để tạo ra nhiều bố cục theo ngữ nghĩa..

Bootstrap Grid System: Hệ thống lưới trong bootstrap

  • Tác giả: lamvt.vn
  • Đánh giá: 4 ⭐ ( 9709 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  nút - biểu tượng nút bootstrap 4

By ads_php