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