Ở phần trước mình đã giới thiệu về bootstrap là gì? Nếu như bạn chưa hiểu rõ hay chưa biết gì về bootstrap thì có thể tham khải tại bài viết tại đây. (giới thiệu về bootstrap)
Và trong hôm nay, mình sẽ đi sâu hơn về bootstrap đó chính là bootstrap grid. Vậy bootstrap grid là gì? cách sử dụng bootstrap grid như thế nào? Mời các bạn cùng tham khảo.
Grid system là gì?
Grid system chính là 1 trong những hệ thống lưới được bao gồm nhiều dòng, cột … cũng như số lượng dòng này bao nhiêu thì sẽ nó phải phụ thuộc vào thiết kế của người lập trình nhưng số lượng cột trên mỗi dòng luôn là 12.
Kích thước ở trong grid system tính bằng cột, và mỗi cột sẽ chiếm một phần trăm nhất định kích thước của layout.
Thay vì người lập trình sẽ chỉ định rõ ràng kích thước đơn thuần là 200px, 300px … thì bây giờ người lập trình có thể sử dụng đơn vị là cột. Số phần trăm của mỗi cột thì đã được định nghĩa sẵn ở trong bootstrap. Khi đó chúng ta chỉ cần sử dụng nó mà không cần phải suy nghĩ rắc rối như hồi trước nữa.
Hệ thống lưới của Bootstrap sẽ bao gồm 4 lớp, với:
- xs: sử dụng cho màn hình điện thoại (<768px)
- sm: sử dụng cho màn hình máy tính bảng (≥ 768px)
- md: sử dụng cho màn hình laptop, màn hình máy tính để bàn (≥ 992px)
- lg: sử dụng cho màn hình máy tính để bàn lớn (≥ 1200px)
Ngoài ra còn có Cột(Column) và Dòng(Row):
- Cột(Column): vị trí các thành phần theo chiều dọc đã được thể hiện dựa trên các cột. Duy nhất các cột được đặt ở trong hàng, và đặt nội dung trực tiếp trong hàng sẽ làm vỡ bố cục đi.
- Dòng(Row): dòng là khối lớn nhất, và khi chúng ta tạo ra 1 hàng nào đó thì nó sẽ chiếm toàn bộ chiều rộng của thành phần chứa nó.
Cách thức hoạt động của Grid system trong Bootstrap
- Tại mỗi hàng sẽ phải được bao bọc bởi class “.container” hay “.container.fluid” để có thể canh giữa hay canh khoảng cách lề.
- Mỗi hàng sẽ bao gồm nhiều nhóm cột khác nhau.
- Nội dung sẽ được nằm trong cột, và mỗi cột có thể chứa được 12 cột con khác.
- Ở giữa các cột sẽ có khoảng cách padding. Khoảng cách padding của cột đầu đối với cột cuối sẽ được quy định bởi “.rows“
- Nếu như có nhiều hơn số cột quy đinh là 12 cột ở trên một hàng thì mỗi nhóm 12 cột sẽ cố định và số cột dư sẽ được chuyển hàng hàng mới.
- Grid system trong bootstrap sẽ được định nghĩa với các kích thước với nhiều màn hình khác nhau. VD ta sử dụng lớp “.col-md-” sẽ không được hiển thị số cột nếu như màn hình cỡ lớn hơn và “.col-lg-” sẽ không thể áp dụng nếu như bạn đang xem màn hình cỡ vừa.
Dưới đây là cách sử dụng trong 1 file HTML5 như sau:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –>
<title>LvDuit Developer</title><link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>
<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>
<![endif]–>
</head>
<body><div class=”container”>
<div class=”row”>
<div class=”col-md-8″>.col-md-8</div>
<div class=”col-md-4″>.col-md-4</div>
</div><div class=”row”>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4″>.col-md-4</div>
</div></div>
<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
Hướng dẫn sử dụng hệ thống lưới hiển thị trên các loại màn hình
Sử dụng các class: .col-xs-* và col-md-*
Sử dụng các class: .col-sm-*
Hướng dẫn sử dụng Offset
Trong quá trình làm giao diện website mà bạn muốn 1 thành phần nào đó được hiển thị cách ra 1 khoảng so với 1 thành phần kia thì bạn làm như sau:
Nếu như thông thường bạn sẽ xử lý bằng cách khai báo lại giá trị margin cho các col thì sẽ dẫn đến giao diện sẽ không còn chuẩn nữa. Khi đó bạn nên khai báo thêm class như sau: “[email protected]@[email protected]” với
- @@: là 4 giá trị xs, sm, md hay lg
- @: là giá trị từ 1 đến 12
VD: Với col-md-offset-4, từ là cột này sẽ thụt vào trong 1 khoảng bằng 4 col md.
Code HTML ví dụ:
<div class=”row”>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4 col-md-offset-4″>.col-md-4 .col-md-offset-4</div>
</div>
<div class=”row”>
<div class=”col-md-3 col-md-offset-3″>.col-md-3 .col-md-offset-3</div>
<div class=”col-md-3 col-md-offset-3″>.col-md-3 .col-md-offset-3</div>
</div>
<div class=”row”>
<div class=”col-md-6 col-md-offset-3″>.col-md-6 .col-md-offset-3</div>
</div>
Hướng dẫn sử dụng Media Queries
Media queries giúp người lập trình viên có thể tuỳ biến code CSS tương ứng với kích thước trình duyệt nhất định nào đó.
VD như bạn cần chai 1 trang web ra thành 2 cột với div nhưng khi bạn muốn xem trang web trên thiết bị di động thì 1 cột sẽ ẩn đi chỉ còn 1 cột thì lúc này bạn có thể sử dụng Media Queries để thực hiện điều này.
Nhưng, bạn cũng nên lưu ý bởi Media Queries chỉ sử dụng được nếu như bạn sử dụng LESS để viết lên CSS.
Code Media Queries
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap *//* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { … }/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { … }/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { … }
Có thể sử dụng max-width để giới hạn chiều rộng
@media (max-width: @screen-xs-max) { … }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { … }
@media (min-width: @screen-lg-min) { … }
Hi vọng bài viết ở trên sẽ giúp bạn có những kiến thức cơ bản về grid system trong bootstrap là gì. Nếu như bạn còn thắc mắc về cách sử dụng của Grid System thì có thể để lại comment ở bài viết dưới đây, chúng tôi sẽ giúp bạn giải đáp thắc mắc trong thời gian sớm nhất. Chúc các bạn thành công!
