Bài viết trước chúng ta đã tìm hiểu về những điều cơ bản về Bootstrap và cũng hiểu được tầm quan trọng của Bootstrap trong việc phát triển Website hiện đại ngày nay. Ở bài viết này CNET sẽ tiếp tục tìm hiểu về Bootstrap cụ thể là hệ thống lưới Bootstrap. Với hệ thống lưới linh hoạt và dễ sử dụng, việc thiết kế bố cục trang Web trở nên hoàn toàn đơn giản với các nhà phát triển Website. Bây giờ bạn đọc học cùng CNET tìm hiểu chi tiết về nó nhé.
1.Hệ thống lưới cơ bản của Bootstrap.
Hệ thống lưới cơ bản của Bootstrap là một phần quan trọng của framework CSS. Nó chia không gian trên trang web thành một hệ thống lưới bao gồm các hàng và cột, giúp điều chỉnh tỷ lệ và bố cục của nội dung trên các thiết bị và kích thước màn hình khác nhau.
Hệ thống lưới của Bootstrap cho phép tối đa 12 cột trên trang. Nếu không muốn sử dụng riêng lẻ cả 12 cột, ta có thể nhóm các cột lại với nhau để tạo cột rộng hơn:
Hệ thống lưới của Bootstrap được mô tả qua hình ảnh bằng hình sau:
Ngoài ra Bootstrap Grid phản hồi nhanh và các 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 sao cho phù hợp với màn hình tương thích. Điều đó giúp những nhà phát triển Web vận dụng để làm và thiết kế các bố cục từ đơn giản đến phức tạp.
2.Grid Classes - Các lớp trong Bootstrap Grids.
Trong hệ thống lưới của Bootstrap có tích hợp sẵn một loạt các lớp grid được sử dụng để xây dựng cơ sở lưới của trang web. Các lớp này giúp bạn định cấu trúc cách nội dung của bạn sẽ hiển thị trên các thiết bị khác nhau và kích thước màn hình. Hệ thống lưới Bootstrap có bốn lớp chính sau:
- 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 bằng hoặc lớn hơn 768px)
- md (đối với máy tính xách tay nhỏ - màn hình rộng bằng hoặc lớn hơn 992px)
- lg (đối với máy tính xách tay và máy tính để bàn - màn hình rộng bằng hoặc lớn hơn 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, giúp tạo ra các layout đẹp và responsive một cách đơn giản trên các thiết bị khác nhau.
3. Cấu trúc cơ bản của Bootstrap Grids và một số ví dụ về sử dụng Bootstrap Grids
Cấu trúc cơ bản của Bootstrap Grids bao gồm container, hàng (rows), và các cột (columns).Sau đây là cấu trúc cơ bản của lưới Bootstrap:
Đầu tiên, tạo 1 thẻ div chứa (<div class="container">), sau đó tiếp tục tạo một hàng ( <div class="row">). Tiếp tục, thêm số cột mong muốn (thẻ có .col-*-*lớp thích hợp). Lưu ý rằng các số trong .col-*-*mỗi hàng phải luôn có tổng bằng 12.
Để bạn đọc đọc có thể hiểu rõ thêm về sử dung Bootstrap Grids, CNET sẽ trình bình một số ví dụ về cách sử dụng và vận dụng để giải thích cho bạn đọc, bạn hãy theo dõi bên dưới đây:
Bắt đầu với ví dụ đầu tiên với bố cục 3 cột có chiều rộng bằng nhau:
Ở ví dụ trên cho thấy cách lấy ba cột có chiều rộng bằng nhau class="col-sm-4" bắt đầu từ máy tính bảng và chia tỷ lệ cho máy tính để bàn lớ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, Kết quả hiển thị trên màn hình sẽ là:
Hoặc ở 1 ví dụ khác, chúng ta sẽ tạo 2 cột có kích thước không bằng nhau với class="col-sm-4" và class="col-sm-8":
Khi đó trên bố cục giao diện sẽ hiển thị 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 máy tính để bàn lớn:
Sử dụng Bootstrap Grids làm tăng tính đồng nhất và tiết kiệm thời gian trong quá trình phát triển web. Hãy vận dụng và thực hành nó nhiều hơn để giúp bạn sớm trở thành một nhà lập trình Web chuyên nghiệp, lý thuyết luôn đi đôi với thực hành. CNET sẽ cùng đồng hành với bạn đọc và chia sẻ với bạn đọc các kiến thức chuyên môn và học thuật để tìm lên giá trị của bạn, hãy cùng tiếp tục với CNET qua các bài viết tiếp theo nhé
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
