Hướng dẫn what are offset columns in bootstrap? - các cột bù đắp trong bootstrap là gì?

Sử dụng lưới Flexbox đầu tiên di động mạnh mẽ của chúng tôi để xây dựng bố cục mọi hình dạng và kích thước nhờ hệ thống mười hai cột, năm tầng đáp ứng mặc định, biến SASS và mixin và hàng chục lớp được xác định trước.

Làm thế nào nó hoạt động

Hệ thống lưới Bootstrap, sử dụng một loạt các thùng chứa, hàng và cột để bố trí và căn chỉnh nội dung. Nó được xây dựng với Flexbox và đáp ứng đầy đủ. Dưới đây là một ví dụ và một cái nhìn sâu sắc về cách lưới kết hợp với nhau.

Mới hoặc không quen thuộc với Flexbox? Đọc hướng dẫn CSS Tricks Flexbox này cho nền, thuật ngữ, hướng dẫn và đoạn mã. Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

Một trong ba cột

Một trong ba cột

Một trong ba cột


  
    
      One of three columns
    
One of three columns One of three columns

Ví dụ trên tạo ra ba cột có chiều rộng bằng nhau trên các thiết bị nhỏ, trung bình, lớn và cực lớn bằng các lớp lưới được xác định trước của chúng tôi. Các cột đó được tập trung trong trang với cha mẹ


  
    Column
    Column
    
    Column
    Column
  
9.

Phá vỡ nó, ở đây, cách thức hoạt động của nó:

Hãy nhận biết các hạn chế và lỗi xung quanh Flexbox, như không có khả năng sử dụng một số yếu tố HTML làm thùng chứa flex.

Tùy chọn lưới

Mặc dù Bootstrap sử dụng


  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
7S hoặc

  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
8 để xác định hầu hết các kích thước, các

  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
9 được sử dụng cho các điểm dừng lưới và chiều rộng của container. Điều này là do chiều rộng chế độ xem có tính bằng pixel và không thay đổi với kích thước phông chữ.

Xem cách các khía cạnh của hệ thống lưới bootstrap hoạt động trên nhiều thiết bị với một bảng tiện dụng.

Rất nhỏ
12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6 .col-MD-4
Subsequent columns continue along the new line.


  
    
      1 of 2
    
    
      2 of 2
    
  
  
    
      1 of 3
    
    
      2 of 3
    
    
      3 of 3
    
  
4

Liên kết

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

Căn chỉnh dọc

Căn chỉnh dọc

Căn chỉnh dọc

Căn chỉnh dọc


  
    
      1 of 2
    
    
      2 of 2
    
  
  
    
      1 of 3
    
    
      2 of 3
    
    
      3 of 3
    
  
5

Một trong ba cột

Liên kết ngang

Liên kết ngang

Liên kết ngang

Liên kết ngang


  
    
      1 of 2
    
    
      2 of 2
    
  
  
    
      1 of 3
    
    
      2 of 3
    
    
      3 of 3
    
  
6

Một trong hai cột

Không có máng xối

Các máng xối giữa các cột trong các lớp lưới được xác định trước của chúng tôi có thể được loại bỏ bằng


  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
2. Điều này loại bỏ các ____40 âm từ

  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
3 và ngang

  
    
      1 of 3
    
    
      2 of 3 [wider]
    
    
      3 of 3
    
  
  
    
      1 of 3
    
    
      2 of 3 [wider]
    
    
      3 of 3
    
  
3 từ tất cả các cột trẻ em ngay lập tức.visual order of your content. These classes are responsive, so you can set the

  col-sm-8
  col-sm-4


  col-sm
  col-sm
  col-sm
7 by breakpoint [e.g.,

  col-sm-8
  col-sm-4


  col-sm
  col-sm
  col-sm
8]. Includes support for

  col-sm-8
  col-sm-4


  col-sm
  col-sm
  col-sm
9 through


  .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
0 across all five grid tiers.

Ở đây, mã nguồn để tạo các phong cách này. Lưu ý rằng các điểm ghi đè cột chỉ được phân chia đến các cột trẻ đầu tiên và được nhắm mục tiêu thông qua bộ 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, phần đệm cột vẫn có thể được tùy chỉnh thêm với các tiện ích khoảng cách.

Cần một thiết kế cạnh từ cạnh? Thả cha mẹ


  
    Column
    Column
    
    Column
    Column
  
9 hoặc

  
    
      1 of 3
    
    
      2 of 3 [wider]
    
    
      3 of 3
    
  
  
    
      1 of 3
    
    
      2 of 3 [wider]
    
    
      3 of 3
    
  
1.

Trong thực tế, ở đây, nó trông như thế nào. Lưu ý 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, các tầng đáp ứng, sắp xếp lại, v.v.].


  
    
      1 of 2
    
    
      2 of 2
    
  
  
    
      1 of 3
    
    
      2 of 3
    
    
      3 of 3
    
  
7

.col-12 .col-SM-6 .col-MD-8

Bao bọc cột

Nếu hơn 12 cột được đặt trong một hàng, mỗi nhóm các cột bổ sung, như một đơn vị, sẽ quấn vào một dòng mới.

Trong thực tế, ở đây, nó trông như thế nào. Lưu ý 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, các tầng đáp ứng, sắp xếp lại, v.v.].


  
    
      1 of 2
    
    
      2 of 2
    
  
  
    
      1 of 3
    
    
      2 of 3
    
    
      3 of 3
    
  
8

.col-12 .col-SM-6 .col-MD-8

Bao bọc cột

Các lớp bù

Di chuyển các cột sang phải bằng các lớp



  .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
9. Các lớp này tăng biên bên trái của một cột bằng các cột

  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
0. Ví dụ,

  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
1 di chuyển

  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
2 trên 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


  
    
      1 of 2
    
    
      2 of 2
    
  
  
    
      1 of 3
    
    
      2 of 3
    
    
      3 of 3
    
  
9

Ngoài việc xóa cột tại các điểm dừng đáp ứng, bạn có thể cần phải đặt lại độ lệch. Xem điều này trong hành động trong ví dụ 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


  
    Column
    Column
    
    Column
    Column
  
0

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 ký quỹ như


  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
3 để buộc các cột anh chị em 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


  
    Column
    Column
    
    Column
    Column
  
1

Làm tổ

Để làm tổ nội dung của bạn bằng lưới mặc định, hãy thêm một cột


  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
3 mới và bộ các cột

  col
  col
  col
  col


  col-8
  col-4
6 trong cột

  col
  col
  col
  col


  col-8
  col-4
6 hiện có. Các hàng lồng nhau nên bao gồm một tập hợp các cột cộng thêm tới 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 1: .col-SM-9

Cấp 2: .Col-8 .Col-SM-6

Cấp 2: .Col-4 .Col-SM-6


  
    Column
    Column
    
    Column
    Column
  
2

Mixin sass

Khi sử dụng các tệp SASS nguồn Bootstrap, bạn có tùy chọn sử dụng các biến và mixin SASS để 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à mixin tương tự để cung cấp toàn bộ các lớp sẵn sàng sử dụng để bố trí nhanh chóng.

Biến

Các biến và bản đồ xác định số lượng cột, chiều rộng máng xối và điểm truy vấn phương tiện để bắt đầu các cột nổi. Chúng tôi sử dụng chúng để tạo ra các lớp lưới được xác định trước được ghi nhận ở trên, cũng như cho các bản mixin tùy chỉnh được liệt kê dưới đây.


  
    Column
    Column
    
    Column
    Column
  
3

Mixins

Mixin được sử dụng cùng với các biến lưới để tạo CSS ngữ nghĩa cho các cột lưới riêng lẻ.


  
    Column
    Column
    
    Column
    Column
  
4

Ví dụ sử dụng

Bạn có thể sửa đổi các biến thành các giá trị tùy chỉnh của riêng bạn hoặc chỉ sử dụng các mixin với các giá trị mặc định của chúng. Ở đây, một ví dụ về việc sử dụng các cài đặt mặc định để tạo bố cục hai cột với khoảng cách giữa.


  
    Column
    Column
    
    Column
    Column
  
5

Nội dung chính

Nội dung thứ cấp


  
    Column
    Column
    
    Column
    Column
  
6

Tùy chỉnh lưới

Sử dụng các biến và bản đồ SASS tích hợp của chúng tôi, nó có thể tùy chỉnh hoàn toàn các lớp lưới được xác định trước. Thay đổi số lượng các tầng, kích thước truy vấn phương tiện và chiều rộng của container, sau đó được 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.


  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
7 được sử dụng để tạo ra các chiều rộng [tính theo phần trăm] của từng cột riêng lẻ trong khi

  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
8 cho phép các chiều rộng dành riêng cho điểm dừng được chia đều trên

  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  
9 và

  
    
      1 of 2
    
    
      2 of 2
    
  
  
    
      1 of 3
    
    
      2 of 3
    
    
      3 of 3
    
  
00 cho máng xối cột.


  
    Column
    Column
    
    Column
    Column
  
7

Lưới tầng

Di chuyển ra ngoài các cột, bạn cũng có thể tùy chỉnh số lượng các tầng lưới. Nếu bạn chỉ muốn bốn tầng lưới, bạn sẽ cập nhật


  
    
      1 of 2
    
    
      2 of 2
    
  
  
    
      1 of 3
    
    
      2 of 3
    
    
      3 of 3
    
  
01 và

  
    
      1 of 2
    
    
      2 of 2
    
  
  
    
      1 of 3
    
    
      2 of 3
    
    
      3 of 3
    
  
02 lên một cái gì đó như thế này:


  
    Column
    Column
    
    Column
    Column
  
8

Khi thực hiện bất kỳ thay đổi nào đối với các biến SASS hoặc bản đồ, bạn sẽ cần lưu các thay đổi 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 cho chiều rộng cột, độ lệch và đặt hàng. Tiện ích hiển thị đáp ứng cũng sẽ được cập nhật để sử dụng các điểm dừng tùy chỉnh. Đảm bảo đặt các giá trị lưới trong


  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
9 [không phải

  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
8,

  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    
      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
7 hoặc

  
    
      1 of 2
    
    
      2 of 2
    
  
  
    
      1 of 3
    
    
      2 of 3
    
    
      3 of 3
    
  
06].

Những gì được bù trong lưới bootstrap?

Một phần bù được sử dụng để đẩy các cột qua để có nhiều khoảng cách hơn.Để sử dụng độ lệch trên màn hình lớn, sử dụng.col-md-offset-* Các lớp.used to push columns over for more spacing. To use offsets on large displays, use the . col-md-offset-* classes.

Đó là ví dụ chính xác của các cột bù trong bootstrap?

Các lớp bù này các lớp này tăng biên bên trái của một cột bằng các cột *.Ví dụ, .Offset-MD-4 di chuyển .Col-MD-4 trên bốn cột..offset-md-4 moves .col-md-4 over four columns.

Làm cách nào để bù một cột trong bootstrap 4?

Cách sử dụng cách sử dụng Bootstrap Offset: Offset-MD-3 sẽ bù phần tử cột mong muốn với 3 cột ở bên phải từ vị trí mặc định của nó trên kích thước màn hình trung bình trở lên..Các lớp bù luôn thay đổi nội dung của nó sang bên phải.offset-md-3 which will offset the desired column element with 3 columns to the right from its default position on medium screen sizes and above. . offset classes always shifts its content to the right.

Lưới bù là gì?

Lưới bù cho phép bạn áp dụng phòng và đánh giá bù cho một khối kinh doanh.Bằng cách áp dụng các khoản bù đắp của Business Block trong lưới bù, hệ thống sẽ tính toán doanh thu khối dự báo chính xác hơn, thay vì từ lưới phòng chính không có độ bù trừ.allows you to apply room and rate offsets to a business block. By applying business block offsets in the offset grid, the system will calculate the forecasted block revenue more accurately, rather than from the main room grid that does not have offsets applied.

Bài Viết Liên Quan

Chủ Đề