Bootstrap Grid - 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 25% / 75% cho các thiết bị nhỏ.
Mẹo: 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 .col-sm-*lớp.
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 chúng và sử dụng chúng".
Ví dụ sau sẽ dẫn đến tỷ lệ phân 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%):
Thí 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>
Lưu ý: Đảm bảo rằng tổng luôn bằng 12.
Đối với mức phân chia 33,3% / 66,6%, bạn sẽ sử dụng .col-sm-4và .col-sm-8:
Thí 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>
Chương tiếp theo sẽ trình bày cách thêm phần trăm phân chia khác nhau cho các thiết bị trung bình.