Ý nghĩa của các số trong "col-md-4", "col-xs-1", "col-lg-2" trong Bootstrap

Question

Tôi đang nhầm lẫn với hệ thống lưới trong Bootstrap mới, đặc biệt là các lớp sau:

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

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

Bất cứ ai có xin giải thích như sau:

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

Answer 1

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
• tất cả số div e chia thành 12 cột
• vậy, col-*-6 kéo dài 6 của 12 cột (một nửa chiều rộng), col-*-12 kéo dài 12 của 12 cột (toàn bộ chiều rộng), vv

Vì vậy, nếu bạn muốn hai cột bằng để span một div, viết

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

của nếu bạn muốn ba cột bất bình đẳng để span rằng chiều rộng tương tự, 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 thêm tối đa 12. Cột này có thể nhỏ hơn 12, nhưng hãy cẩn thận nếu hơn 12, vì divs vi phạm sẽ giảm xuống hàng tiếp theo (không phải .row, một câu chuyện khác hoàn toàn).

Bạn cũng có thể cột tổ trong cột, (tốt nhất với một wrapper .row xung quanh họ) 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ộ divs lồng nhau cũng trải rộng lên đến 12 cột của div cha mẹ của họ. LƯU Ý: Vì mỗi lớp .col có đệm 15px ở hai bên, bạn thường nên 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 padding và giữ nội dung xếp hàng giữa các lớp col lồng nhau và không lồng nhau.

- Bạn đã không yêu cầu cụ thể về việc sử dụng xs, sm, md, lg, nhưng chúng đi đôi với nhau nên 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 mà tại đó kích thước màn hình lớp mà nên áp dụng:

• xs = màn hình phụ nhỏ (điện thoại di động)
• sm = màn hình nhỏ (máy tính bảng)
• md = màn hình vừa (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 "Grid Options" chương từ tài liệu Bootstrap chính thức để biết thêm chi tiết.

Bạn nên thường phân loại một div sử dụng nhiều lớp cột để nó xử lý 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 đáp ứng). ví dụ: div có các lớp col-xs-6 và col-sm-4 sẽ mở rộng 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 bình luận dưới đây, các lớp lưới cho một kích thước màn hình được áp dụng cho rằng màn hình kích thước và lớn hơn trừ một tuyên bố khác sẽ ghi đè nó (tức là col-xs-6 col-md-4 kéo dài 6 cột trên xsvà sm, và 4 cột trên mdvà lg, mặc dù sm và lg chưa bao giờ được công bố một cách rõ ràng)

LƯU Ý: nếu bạn không xác định xs, nó sẽ mặc định là col-xs-12 (tức là col-sm-6 rộng một nửa trên các màn hình sm, md và lg, nhưng có chiều rộng đầy đủ trên xs màn hình).

LƯU Ý: thực sự hoàn toàn tốt nếu .row của bạn bao gồm hơn 12 cols, miễn là bạn biết cách chúng phản ứng. --Đây là một vấn đề gây tranh cãi, và không phải ai cũng đồng ý.

Answer 2

Điểm chính là thế này:

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

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 lớp col-md-6 và hai lớp col-xs-6 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 và chỉ một cột trong màn hình điện thoại (nghĩa là hai hàng xếp chồng lên nhau), bạn đặt two col-md-6 và hai col-xs-12 vào cột của mình và vì tổng số sẽ là 24 cột tự động xếp chồng lên nhau hoặc chỉ để lại kiểu dáng xs.

Answer 3

Từ Twitter Bootstrap documentation:

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

to Read More...

Answer 4

hệ thống lưới

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

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

Mẹo: Mỗi lớp quy mô lên, vì vậy nếu bạn muốn thiết lập độ rộng tương tự cho xs và sm, bạn chỉ cần xác định xs.

OK, câu trả lời là dễ dàng, Nhưng đọc trên:

col-lg- đứng cho cột lớn ≥ 1200px
col-MD- đứng cho vừa cột ≥ 992px
col-xs- là viết tắt của cột thêm nhỏ ≥ 768px

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

Tôi cũng tạo ra hình ảnh dưới đây để thấy cách hệ thống lưới công trình, 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 cách lg, md và xs luôn nhiệt tình với kích thước cửa sổ: