Chương 4 : Bootstrap 5

119.10 Bootstrap5 - Project làm phần Main footer - Cách Tạo Footer Responsive Với Bootstrap 5

Trong video này, bạn sẽ học cách tạo một phần Footer hiện đại và responsive cho trang web bằng Bootstrap 5. Footer là phần không thể thiếu trên bất kỳ trang web nào, giúp cung cấp thông tin liên hệ, liên kết đến các trang khác, và kết nối với người dùng qua mạng xã hội. Với Bootstrap 5, việc xây dựng một footer vừa thẩm mỹ, vừa tối ưu hóa cho các thiết bị di động trở nên dễ dàng và nhanh chóng. 1. Bố cục tổng quan: Phần Footer này được chia thành bốn cột chính. Cột đầu tiên chứa logo và địa chỉ liên hệ, cột thứ hai và thứ ba liệt kê các liên kết đến các trang quan trọng trên trang web, và cột cuối cùng là phần liên kết mạng xã hội. Thiết kế này không chỉ giúp tổ chức thông tin rõ ràng mà còn tạo ra một giao diện hiện đại, thân thiện với người dùng. 2. Thiết kế phần liên hệ và logo: Cột đầu tiên của Footer chứa logo của trang web và địa chỉ liên hệ chi tiết. Logo được đặt trong một div riêng, giúp tăng tính nhận diện thương hiệu. Địa chỉ và thông tin liên hệ được trình bày bằng font chữ nhỏ, màu sắc nhạt (text-secondary) nhằm giảm thiểu sự nổi bật nhưng vẫn dễ đọc. Cách trình bày này giúp người dùng dễ dàng tìm thấy thông tin liên hệ mà không làm mất sự cân đối của toàn bộ footer. 3. Phần liên kết chính: Cột thứ hai và thứ ba chứa các liên kết chính của trang web, được liệt kê dưới dạng danh sách không có dấu chấm đầu dòng (list-unstyled). Các liên kết này giúp người dùng dễ dàng điều hướng đến các trang quan trọng khác trên trang web. Mỗi liên kết được định dạng với màu chữ nhẹ (text-secondary), khi người dùng di chuột vào, liên kết sẽ hiển thị đậm hơn, giúp tăng cường trải nghiệm người dùng. 4. Phần liên kết mạng xã hội: Cột cuối cùng là nơi kết nối với các nền tảng mạng xã hội phổ biến như Facebook, Twitter, và YouTube. Mỗi liên kết được định dạng bằng nút Bootstrap, có kèm theo biểu tượng SVG tương ứng với mạng xã hội đó. Các nút này được thiết kế với các màu sắc đặc trưng của từng nền tảng, giúp người dùng dễ dàng nhận biết và kết nối nhanh chóng với trang mạng xã hội của bạn. 5. Tính năng responsive: Phần Footer này được thiết kế hoàn toàn responsive, đảm bảo hiển thị tốt trên mọi kích thước màn hình. Khi trang web được xem trên các thiết bị di động, các cột trong Footer sẽ tự động xếp chồng lên nhau thay vì hiển thị song song, giúp tối ưu hóa không gian và đảm bảo tính thẩm mỹ. 6. Ứng dụng thực tế: Footer này phù hợp cho nhiều loại trang web, từ blog cá nhân đến các trang thương mại điện tử. Việc kết hợp thông tin liên hệ, liên kết quan trọng, và liên kết mạng xã hội giúp Footer trở thành một phần không thể thiếu, mang lại giá trị không chỉ về mặt thiết kế mà còn về khả năng tương tác với người dùng. Video này sẽ hướng dẫn bạn từng bước chi tiết để tạo ra một Footer hiện đại và responsive với Bootstrap 5. Bạn sẽ học cách tổ chức thông tin, sử dụng các thành phần của Bootstrap, và tạo ra một giao diện tối ưu cho mọi thiết bị.