Hệ thống lưới trong Bootstrap mới: col-lg-* col-md-* col-xs-*

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:

(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?

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 hệ thống lưới hoạt động, trong ví dụ này tôi sử dụng chúng với 3, thích col-lg-6chỉ 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ổ: