Ý nghĩa của các số trong Tiếng col-md-4,, col col-xs-1,

Tôi bối rối với hệ thống lưới trong Bootstrap mới, đặc biệt là các lớp này:

col-lg-*
col-md-*
col-xs-*

(trong đó * đại diện cho một số số).

Bất cứ ai có thể vui lòng giải thích như sau:

1. Làm thế nào con số đó được sắp xếp các lưới?
2. Làm thế nào để sử dụng những con số này?
3. Những gì họ thực sự đại diện?

Chỉ áp dụng cho Bootstrap 3.

Bỏ qua các chữ cái (x s , sm , md , lg ) cho bây giờ , tôi sẽ bắt đầu với chỉ số ...

• các số (1-12) đại diện cho một phần của tổng chiều rộng của bất kỳ div nào
• tất cả các div được chia thành 12 cột
• vì vậy, col-*-6kéo dài 6 trên 12 cột (một nửa chiều rộng), col-*-12kéo dài 12 trong 12 cột (toàn bộ chiều rộng), v.v.

Vì vậy, nếu bạn muốn hai cột bằng nhau trải dài một div, hãy viết

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

Hoặc, nếu bạn muốn ba cột không bằng nhau trải rộng cùng chiều rộng đó, bạn có thể viết:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

Bạn sẽ nhận thấy số cột luôn luôn lên tới 12. Nó có thể ít hơn mười hai, nhưng hãy cẩn thận nếu hơn 12, vì các div vi phạm của bạn sẽ va vào hàng tiếp theo (không phải .rowlà một câu chuyện khác hoàn toàn).

Bạn cũng có thể lồng các cột trong các cột , (tốt nhất với .rowtrình bao bọc xung quanh chúng), chẳng hạn như:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

Mỗi bộ div được lồng cũng kéo dài tới 12 cột của div cha. LƯU Ý: Vì mỗi .collớp có phần đệm 15px ở hai bên, bạn nên thường bọc các cột lồng nhau trong một .row, có lề -15px. Điều này tránh trùng lặp phần đệm và giữ cho nội dung được xếp thành hàng giữa các lớp col lồng nhau và không lồng nhau.

- Bạn không hỏi cụ thể về xs, sm, md, lgcách sử dụng, nhưng chúng luôn song hành với nhau để tôi không thể không chạm vào nó ...

Nói tóm lại, chúng được sử dụng để xác định kích thước màn hình mà lớp đó nên áp dụng:

• xs = màn hình nhỏ thêm (điện thoại di động)
• sm = màn hình nhỏ (máy tính bảng)
• md = màn hình trung bình (một số máy tính để bàn)
• lg = màn hình lớn (máy tính để bàn còn lại)

Đọc chương " Tùy chọn lưới " từ tài liệu chính thức của Bootstrap để biết thêm chi tiết.

Bạn thường nên phân loại một div bằng cách sử dụng nhiều lớp cột để nó hoạt động khác nhau tùy thuộc vào kích thước màn hình (đây là trung tâm của những gì làm cho bootstrap phản ứng nhanh). ví dụ: một div có các lớp col-xs-6và col-sm-4sẽ kéo dài một nửa màn hình trên điện thoại di động (xs) và 1/3 màn hình trên máy tính bảng (sm).

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

LƯU Ý: theo nhận xét bên dưới, các lớp lưới cho kích thước màn hình nhất định áp dụng cho kích thước màn hình đó và lớn hơn trừ khi một tuyên bố khác ghi đè lên nó (tức là col-xs-6 col-md-4kéo dài 6 cột trên xs vàsm , và 4 cột trên md vàlg , mặc dù smvà lgkhông bao giờ được khai báo rõ ràng)

Chú ý: nếu bạn không xác định xs, nó sẽ mặc định col-xs-12(tức col-sm-6là một nửa chiều rộng trên sm, mdvà lgmàn hình, nhưng đầy đủ chiều rộng trên xsmàn hình).

LƯU Ý: nó thực sự hoàn toàn tốt nếu bạn .rowbao gồm hơn 12 cols, miễn là bạn biết họ sẽ phản ứng như thế nào. - Đây là một vấn đề gây tranh cãi, và không phải ai cũng đồng ý.

Hệ thống lưới Bootstrap có bốn lớp:
xs (cho điện thoại)
sm (cho máy tính bảng)
md (cho máy tính để bàn)
lg (cho máy tính để bàn lớn hơn)

Các lớp ở trên có thể được kết hợp để tạo ra bố cục năng động và linh hoạt hơn.

Mẹo: Mỗi lớp tăng tỷ lệ, vì vậy nếu bạn muốn đặt cùng độ rộng cho xs và sm, bạn chỉ cần chỉ định xs.

OK, câu trả lời là dễ, nhưng đọc tiếp:

col-lg- là viết tắt của cột lớn ≥ 1200px
col-md- là viết tắt của cột trung bình ≥ 992px
col-xs- là viết tắt của cột cực nhỏ≥ 768px

Số pixel là điểm dừng, vì vậy, ví dụ như col-xsnhắm mục tiêu phần tử khi cửa sổ nhỏ hơn 768px (có thể là thiết bị di động) ...

Tôi cũng tạo ra hình ảnh dưới đây để thấy cách thức hoạt động hệ thống lưới điện, trong ví dụ này tôi sử dụng chúng với 3, như col-lg-6để chỉ cho bạn cách làm việc hệ thống lưới điện trong trang, nhìn vào như thế nào lg, mdvà xsluôn nhiệt tình với kích thước cửa sổ:

Điểm chính là đây:

col-lg-* col-md-* col-xs-* col-sm xác định có bao nhiêu cột trong các kích thước màn hình khác nhau này.

Ví dụ: nếu bạn muốn có hai cột trong màn hình máy tính để bàn và trong màn hình điện thoại, bạn đặt hai col-md-6và hai col-xs-6lớp vào cột của mình.

Nếu bạn muốn có hai cột trong màn hình máy tính để bàn và chỉ có một cột trong màn hình điện thoại (tức là hai hàng xếp chồng lên nhau) bạn đặt two col-md-6và hai col-xs-12cột trong các cột của bạn và vì tổng số sẽ là 24 cột, chúng sẽ tự động xếp chồng lên nhau khác, hoặc chỉ để lại xsphong cách.

Từ tài liệu Twitter Bootstrap :

• lưới nhỏ (≥ 768px) = .col-sm-*,
• lưới trung bình (≥ 992px) = .col-md-*,
• lưới lớn (≥ 1200px) = .col-lg-*.

để đọc thêm ...

Bạn đi đây

col-lg-2: nếu màn hình lớn ( lg ) thì thành phần này sẽ chiếm không gian của 2 phần tử xem xét toàn bộ hàng có thể phù hợp với 12 phần tử (vì vậy bạn sẽ thấy rằng trên màn hình lớn, thành phần này chiếm 16% không gian của một hàng)

col-lg-6: nếu màn hình lớn ( lg ) thì thành phần này sẽ chiếm không gian 6 yếu tố xem xét toàn bộ hàng có thể phù hợp với 12 yếu tố - khi áp dụng bạn sẽ thấy thành phần đó đã chiếm một nửa không gian có sẵn trong hàng.

Quy tắc trên chỉ được áp dụng khi màn hình lớn. khi màn hình nhỏ, quy tắc này sẽ bị loại bỏ và chỉ có một thành phần trên mỗi hàng được hiển thị.

Dưới đây hình ảnh cho thấy chiều rộng kích thước màn hình khác nhau: