Lưới Bootstrap - Thiết bị lớn
Ví dụ về lưới Bootstrap: Thiết bị lớn
Extra small | Small | Medium | Large | |
---|---|---|---|---|
Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
Screen width | <768px | >=768px | >=992px | >=1200px |
Trong chương trước, chúng tôi đã trình bày một ví dụ về lưới với các lớp dành cho thiết bị vừa và nhỏ. Chúng tôi đã sử dụng hai div (cột) và chia chúng theo tỷ lệ 25%/75% trên các thiết bị nhỏ và tỷ lệ chia 50%/50% trên các thiết bị trung bình:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Nhưng trên các thiết bị lớn, thiết kế có thể tốt hơn khi chia tỷ lệ 33%/66%.
Mẹo: Các thiết bị lớn được xác định là có chiều rộng màn hình từ 1200 pixel trở lên .
Đối với các thiết bị lớn, chúng tôi sẽ sử dụng các lớp .col-lg-*
.
Vì vậy bây giờ chúng ta sẽ thêm độ rộng cột cho các thiết bị lớn:
<div class="col-sm-3 col-md-6 col-lg-4 ">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 ">....</div>
Bây giờ Bootstrap sẽ nói "ở kích thước nhỏ, hãy xem các lớp có -sm- trong đó và sử dụng chúng. Ở kích thước trung bình, hãy xem các lớp có -md- trong đó và sử dụng chúng. Ở kích thước lớn, hãy nhìn vào các lớp có từ -lg- trong đó và sử dụng chúng".
Ví dụ sau đây sẽ dẫn đến mức chia 25%/75% trên các thiết bị nhỏ, mức chia 50%/50% trên các thiết bị trung bình và mức chia 33%/66% trên các thiết bị lớn:
Ví dụ
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Hãy tự mình thử »Lưu ý: Đảm bảo tổng luôn bằng 12.
Chỉ sử dụng lớn
Trong ví dụ bên dưới, chúng tôi chỉ chỉ định lớp .col-lg-6
(không có .col-md-*
và/hoặc .col-sm-*
). Điều này có nghĩa là các thiết bị lớn sẽ chia 50%/50%. Tuy nhiên, đối với các thiết bị vừa VÀ nhỏ, nó sẽ xếp chồng theo chiều dọc (chiều rộng 100%):
Ví dụ
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-lg-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Hãy tự mình thử »