Trong bài học Bootstrap dưới đây Taimienphi.vn sẽ hướng dẫn bạn cách tạo giao diện Responsive cho website với Bootstrap. Ngoài ra bạn đọc có thể tham khảo thêm một số bài viết khác đã có trên Taimienphi.vn để tìm hiểu cách tạo Fluid Layout với Bootstrap.
1. Responsive Web Design là gì?
Responsive Web Design (tạm dịch là thiết kế web đáp ứng) là quá trình thiết kế và xây dựng các trang web cung cấp khả năng truy cập tốt hơn, tối ưu hóa trải nghiệm xem cho người dùng bằng cách tối ưu hóa trang web phù hợp trên các thiết bị khác nhau.
Khi các thiết bị di động ngày càng trở lên phổ biến và lượng người dùng lớn, các doanh nghiệp không thể bỏ qua việc tối ưu hóa các trang web cho các thiết bị di động. Responsive Web Design được xem là lựa chọn hoàn hảo để tối ưu hóa trang web ho các thiết bị di động.
Bố cục có tính đáp ứng (Responsive) tự động điều chỉnh và tương thích với kích thước màn hình thiết bị bất kỳ, kể cả là máy tính, laptop, điện thoại di động hay máy tính bảng.
Trên Bootstrap 4 được bổ sung hệ thống lưới mobile-first, vì vậy việc tạo giao diện trang web Responsive và các ứng dụng thân thiện với các thiết bị di động trở nên dễ dàng hơn nhiều.
Các lớp lưới trong Bootstrap 4 cung cấp khả năng kiểm soát bố cục cũng như cách hiển thị bố cục trang web trên các thiết bị có màn hình khác nhau tốt hơn, chẳng hạn như điện thoại di động, máy tính bảng, laptop, máy tính, ... .
Ví dụ: trong ví dụ dưới đây chúng ta sẽ tạo bố cục có tính đáp ứng dưới dạng bố cục 4 cột trên màn hình thiết bị cực lớn (viewport ≥ 1200px) và 3 cột trên các thiết bị màn hình lớn (lớn hơn hoặc bằng 992px và nhỏ hơn 1200px), 2 cột trên các thiết bị màn hình kích thước trung bình (lớn hơn hoặc bằng 768px và nhỏ hơn 992px) và bố cục 1 cột trên các thiết bị màn hình kích thước nhỏ và cực nhỏ (viewport nhỏ hơn 768px).
Kết quả trả về có dạng như dưới đây:
Bài học trên đây Taimienphi.vn vừa hướng dẫn bạn cách tạo giao diện Responsive cho website với Bootstrap. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Typography trong Bootstrap.