Ở phần trước mình đã giới thiệu bootstrap là gì? Nếu chưa biết hoặc chưa rõ về bootstrap, bạn có thể tham khảo bài viết tại đây. (Giới thiệu về bootstrap)
Hôm nay, tôi sẽ tìm hiểu sâu hơn về bootstrap, lưới bootstrap. Vậy lưới bootstrap là gì? Cách sử dụng lưới bootstrap? Vui lòng tham khảo trước.
Hệ thống lưới
là gì?
grid system là một loại grid system, bao gồm nhiều hàng, nhiều cột… và số lượng các hàng này thì sẽ tùy thuộc vào người lập trình nhưng số lượng số cột trên mỗi hàng luôn là 12.
Được định cỡ theo cột trong hệ thống lưới, mỗi cột sẽ chiếm một tỷ lệ phần trăm nhất định của kích thước bố cục.
Thay vì lập trình viên chỉ định kích thước rõ ràng là 200px, 300px… thì giờ đây lập trình viên có thể sử dụng đơn vị cột. Tỷ lệ phần trăm cho mỗi cột đã được xác định trong bootstrap. Sau đó, chúng tôi chỉ cần sử dụng nó và không phải suy nghĩ về nó như trước đây.
Hệ thống lưới của bootstrap sẽ bao gồm 4 lớp, bao gồm:
- xs: dành cho màn hình di động (<768px)
- sm: dành cho màn hình máy tính bảng (≥ 768px)
- md: dành cho màn hình máy tính xách tay, màn hình máy tính để bàn (≥992px)
- lg: dành cho màn hình nền lớn (≥ 1200px)
- column(cột): Vị trí phần tử dọc đã được hiển thị theo cột. Chỉ các cột được đặt trong hàng, việc đặt nội dung trực tiếp trong hàng sẽ phá vỡ bố cục.
- line(row): Row là khối lớn nhất, khi chúng ta tạo một hàng, nó sẽ chiếm toàn bộ chiều rộng của phần tử chứa nó.
- Mỗi hàng phải được bao bọc bởi lớp “.container” hoặc “.container.fluid” để có thể căn giữa hoặc căn chỉnh với các khoảng cách lề.
- Mỗi hàng sẽ chứa một nhóm cột khác nhau.
- Nội dung sẽ được đặt trong các cột, mỗi cột có thể chứa 12 cột con khác.
- Sẽ có khoảng đệm giữa các cột. phần đệm của cột đầu tiên đến cột cuối cùng sẽ được chỉ định bởi “.rows“
- Nếu nhiều hơn 12 cột được chỉ định trong một hàng, thì mỗi bộ 12 cột sẽ được cố định và các cột còn lại sẽ được chuyển sang một hàng mới.
- Hệ thống lưới trong bootstrap sẽ được xác định bằng các kích thước màn hình khác nhau. Ví dụ chúng ta dùng class “.col-md-“, nếu màn hình lớn hơn thì sẽ không hiển thị số cột, nếu dùng “.col-lg-“, Không áp dụng khi xem màn hình cỡ trung bình.
Cũng bao gồm cột và hàng:
Cách hệ thống lưới hoạt động trong bootstrap
Dưới đây là cách sử dụng nó trong tệp html5:
;
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>
<!- html5 shim và answer.js để hỗ trợ eg8 cho các phần tử html5 và truy vấn phương tiện-> <!- cảnh báo:Response.js\t không hoạt động nếu bạn xem trang qua tệp:// – – > <script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”>; <script src=” https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>
<div class=”container”>
<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>
<!- jquery (bắt buộc đối với plugin javascript của bootstrap)-> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min. js” ></script> <!- Bao gồm tất cả các plugin đã biên dịch (bên dưới) hoặc một tệp duy nhất nếu muốn-> <script src=”js/bootstrap.min.js”></script> ; </html>
Cẩm nang 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 lớp: .col-xs-* và col-md-*
Sử dụng các lớp: .col-sm-*
Cách sử dụng phần bù
Trong quá trình làm giao diện website, bạn muốn một phần tử hiển thị cách phần tử khác một khoảng nhất định, bạn làm như sau:
Nếu thông thường, bạn sẽ xử lý nó bằng cách khai báo lại giá trị lề của col, điều này sẽ khiến giao diện không chuẩn. Sau đó, bạn nên khai báo các lớp bổ sung như sau: “[email protected]@[email protected]” và
- @@: 4 giá trị xs, sm, md hoặc lg
- @: giá trị từ 1 đến 12
Ví dụ: Sử dụng col-md-offset-4 có nghĩa là cột sẽ được thụt vào 4 col md.
Mã 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>
Sổ tay điều tra truyền thông
truy vấn phương tiện cho phép nhà phát triển tùy chỉnh mã css để tương ứng với các kích thước trình duyệt cụ thể.
Ví dụ bạn cần dùng div để chia trang web thành 2 cột, nhưng khi bạn muốn xem trang web trên di động thì 1 cột sẽ bị ẩn và chỉ còn 1 cột, lúc này bạn có thể dùng media query để làm điều đó.
Tuy nhiên, bạn cũng nên biết, bởi vì truy vấn phương tiện chỉ khả dụng nếu bạn sử dụng ít hơn để viết css.
Truy vấn phương tiện được mã hóa
/* thiết bị cực nhỏ (điện thoại, nhỏ hơn 768px) */ /* không có truy vấn phương tiện vì đây là mặc định trong bootstrap */
/* thiết bị nhỏ (máy tính bảng, 768px trở lên) */ @media (min-width: @screen-sm-min) { … }
/* Thiết bị trung bình (máy tính để bàn, 992px trở lên)*/ @media (độ rộng tối thiểu: @screen-md-min) { … }
/* Thiết bị lớn (máy tính để bàn lớn, 1200px trở lên)*/ @media (min-width: @screen-lg-min) { … }
Bạn có thể sử dụng max-width để giới hạn chiều rộng
@media (độ rộng tối đa: @screen-xs-max) { … } @media (độ rộng tối thiểu: @screen-sm-min) và (độ rộng tối đa: @screen-sm-max) { … } @media (độ rộng tối thiểu: @screen-md-min) và (độ rộng tối đa: @screen-md-max) { … } @media (độ rộng tối thiểu: @screen-lg-min) {…}
Hy vọng bài viết trên có thể giúp bạn hiểu cơ bản về grid system trong bootstrap là gì. Nếu còn thắc mắc về cách sử dụng hệ thống lưới, bạn có thể để lại lời nhắn bên dưới bài viết, chúng tôi sẽ hỗ trợ bạn giải đáp trong thời gian sớm nhất. chúc may mắn!