Hệ thống grid của Bootstrap chia tối đa 12 cột trên trang.
Nếu bạn không muốn sử dụng cả 12 cột, bạn có thể nhóm các cột lại với nhau để tạo các cột rộng hơn:
Hệ thống grid có responsive, tất cả các cột sẽ được sắp xếp sao cho vừa với màn hình của bạn.
Đảm bảo rằng tổng cột tối đa 12 hoặc ít hơn (không bắt buộc bạn phải sử dụng tất cả 12 cột).
Hệ thống grid Bootstrap 4 gồm có 5 class:
.col-
(extra small devices - chiều rộng màn hình nhỏ hơn 576px).col-sm-
(small devices - chiều rộng màn hình bằng hoặc lớn hơn 576px).col-md-
(medium devices - chiều rộng màn hình bằng hoặc lớn hơn 768px).col-lg-
(large devices - chiều rộng màn hình bằng hoặc lớn hơn 992px).col-xl-
(xlarge devices - chiều rộng màn hình bằng hoặc lớn hơn 1200px)Các class ở 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: Nếu bạn muốn set một độ rộng duy nhất mà không biết chọn sm
hay md
, bạn chỉ cần chọn sm
là được.
Sau đây là cấu trúc cơ bản của Bootstrap 4 grid:
<!-- Kiểm soát độ rộng cột và cách chúng xuất hiện trên các thiết bị khác nhau -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Hoặc để Bootstrap tự động xử lý bố cục -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Ví dụ đầu tiên: tạo một row (<div class="row">
). Sau đó, thêm số lượng cột mong muốn (các thẻ với các class .col-*-*
thích hợp). Dấu sao thứ nhất (*) đại diện cho sự đáp ứng responsiveness: sm, md, lg hoặc xl, trong khi đó dấu sao thứ hai đại diện cho một số, từ 1 - 12.
Ví dụ thứ hai: thay vì thêm một số cho mỗi col
, hãy để bootstrap tự xử lý bố cục, để tạo các cột có chiều rộng bằng nhau: nếu có hai "col"
thì mỗi cột chia 50% chiều rộng. 3 cột = 33.33%. 4 cột = 25%, vv. Bạn cũng có thể dùng .col-sm|md|lg|xl
cho việc responsive các cột.
Dưới đây là một số ví dụ về bố trí grid Bootstrap 4 cơ bản.
Ví dụ sau đây cho thấy cách tạo ba cột có chiều rộng bằng nhau, trên tất cả các thiết bị và chiều rộng màn hình:
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Ví dụ sau đây cho thấy cách tạo bốn cột có chiều rộng bằng nhau bắt đầu từ máy tính bảng và chia tỷ lệ cho các máy tính để bàn lớn hơn. Trên điện thoại di động hoặc màn hình rộng dưới 576px, các cột sẽ tự động xếp chồng lên nhau:
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Ví dụ sau đây cho thấy cách lấy hai cột có chiều rộng khác nhau bắt đầu từ máy tính bảng và chia tỷ lệ cho các máy tính để bàn lớn hơn:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Bạn sẽ được tìm hiểu thêm về Bootstrap 4 grids trong các bài sau này.Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Công nghệ ZicZac Việt Nam.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website