Với những ai vẫn còn xa lạ với cái tên hệ thống Grid (Grid System) thì nó là một hệ thống lưới và là một thuật ngữ được dùng trong thiết kế và nó được tạo thành từ 12 cột. Kích thước trong Grid System tính bằng cột và mỗi cột này lại chiếm một % nhất định kích thước của layout. Tuy nhiên trong bài này chúng ta ko đi định nghĩa hệ thống Grid mà mục đích chính là tìm hiểu về hệ thống Grid cơ bản trong Bootstrap 3 các bạn nhé.
Bootstrap Grid System (Hệ thống lưới Bootstrap)
Hệ thống lưới của Bootstrap cho phép tối đa 12 cột trên toàn trang.
Nếu bạn không muốn sử dụng tất cả 12 cột riêng lẻ, 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 lưới của Bootstrap cho khả năng responsive linh hoạt, cột sẽ tự động sắp xếp lại tùy thuộc vào kích thước màn hình.
Các lớp trong hệ thống Grid Bootstrap 3
Hệ thống lưới Bootstrap có bốn lớp:
- xs (dành cho điện thoại - màn hình rộng dưới 768px)
- sm (dành cho máy tính bảng - màn hình rộng lớn hơn hoặc bằng 768px)
- md (dành cho máy tính xách tay nhỏ - màn hình rộng lớn hơn hoặc bằng 992px)
- lg (dành cho máy tính xách tay và máy tính để bàn - màn hình rộng lớn hơn hoặc bằng 1200px)
Các lớp trên có thể được kết hợp để tạo ra các bố cục năng động và linh hoạt hơn.
Cấu trúc cơ bản của lưới Bootstrap
Dưới đây là cấu trúc cơ bản của lưới Bootstrap:
<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> <div class="row"> ... </div>
Đầu tiên; tạo một hàng (<div class = "row">). Sau đó, thêm số cột mong muốn (các thẻ với các lớp .col - * - * thích hợp). Lưu ý rằng các số cột tối đa cho mỗi hàng là 12
Dưới đây là một số ví dụ về bố cục lưới Bootstrap cơ bản.
Ba cột bằng nhau
Ví dụ sau đây cho thấy cách lấy ba cột có chiều rộng bằng nhau hiển thị trên máy tính để bàn. Trên điện thoại di động hoặc màn hình có chiều rộng dưới 768px, các cột sẽ tự động xếp chồng lên nhau:
Ví dụ
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> </div>
Hai cột không bằng nhau
Ví dụ:
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
Ví dụ sau cho thấy cách lấy hai cột có độ rộng khác nhau :
Hàng và cột
- Hệ thống lưới trong bootstrap bao gồm hàng và cột. Điều này cho phép chúng ta thoải mái sắp xếp các yếu tố theo chiều dọc và chiều ngang.
- Hàng là khối. Điều này có nghĩa, khi chúng ta tạo ra một hàng, nó chiếm toàn bộ chiều rộng của phần tử đó . Bạn có thể nghĩ rằng các hàng như là dòng mới trong cách bố trí của bạn.
- Trong một hàng chỉ có cột là con của nó và tất cả nội dung phải đặt trong cột. nếu đặt nội dung trong 1 hàng sẽ phá vỡ bố cục của Bootstrap
Ví dụ dưới đây khi đặt nội dung trong row(hàng ở đây là sai pá vỡ bố cục của bootstrap)
<!-- Wrong --> <div class="row"> Some content </div>
Cách đặt nội dung đúng
<!-- Correct --> <div class="row"> <div class="col-md-12">Nội dung ở đây</div> </div>
Hàng được chia thành 12 phần
Một row (hàng) trong bootstrap được chia thành 12 phần bằng nhau. Khi chúng ta đặt một cột trong một hàng, chúng ta phải xác định số lượng của các phần nó sẽ chiếm.
Xác định số phần của cột bằng cách sử dụng lớp .col-xx-NUMBER với
- NUMBER là một số nguyên từ 1 đến 12. Tùy thuộc vào số lượng, một cột sẽ chiếm một tỷ lệ phần trăm của chiều rộng của hàng : 6 cột sẽ là 50% (6/12), 3 sẽ là 25% (3/12) ...
- xx: là tên viết tắt cho màn hình như tên các lớp ở trên.
Ví dụ
<div class="container"> <div class="row"> <div class="col-md-12" style="background-color:green;">Full width 100%</div> </div> <div class="row"style="background-color:pink;"> <div class="col-md-3"style="background-color:yellow;">25%</div> <div class="col-md-3" style="background-color:magenta;">25%</div> <div class="col-md-6"style="background-color:pink;">50%</div> </div> </div>
Kết quả như sau:
Cột
Trong 1 hàng tổng số phần của các cột phải nhỏ hơn hoặc bằng 12. Nếu vượt quá 12 cột cuối cùng trong nhóm sẽ bị chuyển sang dòng tiếp theo (xem ví dụ dưới)
<div class="container"> <div class="row"> <div class="col-xs-8">Cột 1</div> <div class="col-xs-4">Cột 2</div> <div class="col-xs-9">Cột 3</div> </div> </div>
Hai cột đầu tiên có kích thước lần lượt là 8 và 4 (8 + 4 = 12), làm cho hàng đầu đầy. Không có đủ không gian cho các cột thứ ba ở đó, vì vậy cột tiếp theo nó sẽ phải vào hàng tiếp theo.
Lời kết:
Đây chỉ là bài giới thiệu cơ bản về hệ thống lưới trong Bootstrap 3. Trong bài tiếp theo chúng ta sẽ tìm chiểu chi tiết hơn về nó các bạn nhé. Bài sau sẽ tương đối khó đấy. Chúc các bạn học tốt!
