Bootstrap Grid là gì? Cách sử dụng của bootstrap grid

Hệ thống lưới (grid system) trong Bootstrap là một công cụ vô cùng hữu ích cho việc xây dựng giao diện website. Với Bootstrap Grid, bạn có thể dễ dàng tạo ra các cột và hàng để sắp xếp nội dung theo ý muốn. Hãy cùng tìm hiểu chi tiết về Bootstrap Grid và cách sử dụng nó.

Grid System là gì?

Grid System là một hệ thống bao gồm nhiều hàng và cột, với số lượng cột luôn là 12. Hệ thống lưới này cho phép bạn xác định tỷ lệ phần trăm chiếm dụng của từng cột trong một hàng. Thay vì phải tính toán kích thước rõ ràng cho từng phần tử, bạn chỉ cần sử dụng đơn vị cột đã được xác định trong Bootstrap. Điều này giúp bạn tiết kiệm thời gian và công sức trong quá trình xây dựng giao diện.

Hệ thống lưới của Bootstrap được chia thành 4 lớp, 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áy tính để bàn (≥992px)
• lg: dành cho màn hình lớn (≥ 1200px)

Mỗi cột trong Bootstrap Grid sẽ được đặt trong một hàng và có thể chứa 12 cột con. Nếu bạn muốn sử dụng nhiều hơn 12 cột, những cột thừa sẽ được chuyển sang hàng mới.

Cách sử dụng Grid System trong Bootstrap

Để sử dụng Grid System trong Bootstrap, bạn cần tuân thủ một số quy tắc sau:

• Mỗi hàng phải được bao bọc bởi class .container hoặc .container-fluid để đảm bảo căn giữa và 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.
• Có khoảng đệm giữa các cột. Khoảng đệm của cột đầu tiên và cột cuối cùng sẽ được chỉ định bởi class .rows.
• 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ụ, bạn có thể sử dụng class .col-md- cho màn hình trung bình và .col-lg- cho màn hình lớn.

Dưới đây là một ví dụ về cách sử dụng Grid System trong tệp HTML5:

<div class="container">
  <div class="row">
    <div class="col-md-8">Nội dung cột 1</div>
    <div class="col-md-4">Nội dung cột 2</div>
  </div>
  <div class="row">
    <div class="col-md-4">Nội dung cột 3</div>
    <div class="col-md-4">Nội dung cột 4</div>
    <div class="col-md-4">Nội dung cột 5</div>
  </div>
</div>

Như vậy, bạn đã hiểu cơ bản về Grid System trong Bootstrap và cách sử dụng nó. Nếu có bất kỳ thắc mắc nào về cách sử dụng hệ thống lưới này, đừng ngần ngại để lại bình luận bên dưới. Chúng tôi sẽ sẵn lòng hỗ trợ bạn. Chúc bạn thành công!

iedv