Gửi tới bạn đọc bài thực hành lập trình web 3b: Responsive trang web.
1. Yêu cầu
b. Sử dụng HTML và CSS để xây dựng trang web sau, đảm bảo tương thích đa thiết bị:
Yêu cầu:
- Tổ chức trang web dưới dạng grid view (12 cột), sidebar bên trái độ rộng 3 cột, sidebar bên phải độ rộng 3 cột, nội dung chính độ rộng 6 cột.
- Khi co giãn kích thước độ rộng cửa sổ về kích thước <= 768px (giao diện dành cho các thiết bị di động), các thành phần trên trang web được thay đổi như hình dưới đây:
Source code: https://github.com/ttnguyenblog/bai-thuc-hanh-3b
2. Phân tích
Giới thiệu về bootstrap
Bootstrap là một framework phổ biến dùng cho việc phát triển giao diện trang web đáp ứng và tương thích với điện thoại di động. Nó cung cấp một bộ sưu tập các thành phần CSS và JavaScript, như hệ thống lưới, kiểu chữ, biểu mẫu, nút bấm, thanh điều hướng và nhiều hơn nữa, giúp tối ưu quá trình phát triển web và đảm bảo phong cách và chức năng nhất quán trên các thiết bị và kích thước màn hình khác nhau.
1. Hệ thống lưới trong Bootstrap
Hệ thống lưới trong Bootstrap là hệ thống lưới gồm 12 cột, được xây dựng với flexbox. Việc chia nhỏ ra làm nhiều cột giúp dễ dàng thay đổi việc bố trí thành phần trên giao diện website, sao cho phù hợp và tương thích với các màn hình hiển thị trên nhiều thiết bị khác nhau.
2. Các class của hệ thống lưới trong Bootstrap
Hệ thống lưới trong của Bootstrap 4 bao gồm có 5 class:
- .col- : dành cho các thiết bị cực nhỏ (Extra small) – có độ rộng màn hình nhỏ hơn 576px.
- .col-sm-: dành cho các thiết bị nhỏ (Small) – có độ rộng màn hình bằng hoặc lớn hơn 576px.
- .col-md-: dành cho các thiết bị trung bình (Medium) – có độ rộng màn hình bằng hoặc lớn hơn 768px.
- .col-lg-: dành cho các thiết bị lớn (Large) – có độ rộng màn hình bằng hoặc lớn hơn 992px.
- .col-xl-: dành cho các thiết bị cực lớn (Extra Large)- độ rộng màn hình bằng hoặc lớn hơn 1200px.
Trên đây là hướng dẫn làm bài tập thực hành môn lập trình web 3a. Cảm ơn các bạn đã tham khảo trên ttnguyen.net.
