Twitter Bootstrap đã là một cái tên quá quen thuộc với các Web Designer những năm gần đây trong việc tạo ra các Website có tính thích nghi cao với các loại màn hình lớn nhỏ khác nhau, mà nói ngắn gọn là Web Responsive. Trong bài viết này, MyLớp.edu.vn không đi vào giới thiệu toàn bộ tính năng của Bootstrap mà chỉ nói về hệ lưới của nó. Việc nắm vững hệ lưới của Bootstrap 3 sẽ giúp bạn thiết kế giao diện các trang web chuẩn và đẹp hơn.
1. Grid System, hệ lưới trong Bootstrap 3
Grid System, hệ lưới trong Bootstrap 3
Bootstrap 3 chia các thiết bị ra thành 4 loại như sau. Đây cũng là cách chia rất sát với thực tế và được sử dụng rất rộng rãi.
- Extra small devices Phones: Các thiết bị có kích thước rất nhỏ, bề rộng màn hình dưới 768px
- Small devices Tablets: Các thiết bị có kích thước nhỏ, bề rộng màn hình lớn hơn hoặc bằng 768px. Đây là trường hợp chủ yếu của các máy tính bảng và điện thoại thông minh bây giờ
- Medium devices: Các thiết bị có kích thước trung bình, bề rộng màn hình lớn hơn hoặc bằng 992px. Đây là trường hợp của các máy tính xách tay hoặc máy tính để bàn nhỏ
- Large devices Desktops: Các thiết bị có kích thước lớn, bề rộng màn hình lớn hơn hoặc bằng 1200px. Đây là trường hợp chủ yếu của các máy tính để bàn hoặc máy tính xách tay cỡ lớn phổ biến ngày nay
Bootstrap 3 sử dụng hệ lưới 12 cột, khoảng cách giữa các cột là 15px căn đều hai bên mỗi cột. Kích thước của từng cột phụ thuộc vào từng loại màn hình lớn nhỏ khác nhau, tương ứng từ bé đến lớn là: Auto, 62px, 81px và 97px. Vùng chứa nội dung (Container width) của các loại màn hình này cũng lần lượt là: Auto, 750px, 970px và 1170px.
Bạn có thể xem thêm về Grid System, hệ lưới trong Bootstrap 3 tại link này: http://getbootstrap.com/css/#grid-options.
2. Photoshop Template hỗ trợ thiết kế
Bootstrap 3 Responsive Grid Photoshop Templates (PSD)
Để việc thiết kế giao diện cho các loại màn hình khác nhau sử dụng Twitter Bootstrap 3 được dễ dàng và chính xác, chúng ta nên sử dụng các file thiết kế đã dựng sẵn. Trong bài viết này, MyLớp.edu.vn giới thiệu với các bạn một Template như vậy được thiết kế bằng Photoshop của tác giả Ben Stewart, bạn có thể tải về sử dụng trong link này.
Giống như 960 Framework, việc sử dụng các file này rất tiện lợi, vì bạn đã được chia lưới chia guide sẵn rồi. Template này có đầy đủ 3 file .PSD tương ứng với các kích thước 750px, 970px và 1170px phía trên.
Bạn có thể tham khảo các template khác trên mạng hoặc tại link này, Bootstrap Grid System PSD Templates.
Một vài từ khóa để tìm hiểu thêm:
– bootstrap 3 template, bootstrap 3 photoshop template
– grid system bootstrap 3
– responsive grid system
Twitter Bootstrap 3 là một CSS Framework rất phổ biến và mạnh thời gian gần đây, đang được sử dụng rất rộng rãi để tạo ra các trang web có tính responsive cao. Hi vọng qua bài viết này, bạn sẽ hiểu hơn về grid system, hệ lưới trong Bootstrap 3 cũng như biết cách sử dụng những template có sẵn để việc thiết kế giao diện các trang web được dễ dàng và chuẩn xác hơn. Chúc bạn thành công!
Cheers,
Lục Đức Thành
Latest posts by Lục Đức Thành (see all)
- Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
- Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
- WordPress 5 có gì mới? - 23/12/2018
- Sublime Text 3 Portable Windows 64 bit - 11/12/2017
- Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017