Chương 4 : Bootstrap 5

119.8 Bootstrap5 - Project làm phần other content - Hướng Dẫn Từng Bước Thiết Kế với Bootstrap 5

Trong video này, bạn sẽ học cách tạo phần Other Content của trang web bằng cách sử dụng Bootstrap 5. Đây là một phần quan trọng trong việc bổ sung nội dung đa dạng cho trang web, nhằm mang lại trải nghiệm phong phú và thu hút người dùng. Phần Other Content thường được sử dụng để hiển thị thông tin phụ, hỗ trợ các nội dung chính trên trang và có thể bao gồm các bài viết, tin tức, thông tin sản phẩm, hoặc các thông báo đặc biệt. Phần Other Content này được thiết kế với cấu trúc hai khối chính, mỗi khối thể hiện nội dung và hình ảnh song song nhau, tạo ra một bố cục hài hòa và cân đối. Khối bên trái bao gồm các tiêu đề và đoạn văn mô tả, trong khi khối bên phải hiển thị hình ảnh minh họa liên quan đến nội dung. Điều này không chỉ giúp người dùng dễ dàng theo dõi nội dung mà còn làm cho trang web trở nên sống động hơn. 1. Bố cục tổng quan: Bố cục của phần Other Content sử dụng hệ thống lưới grid của Bootstrap 5 để chia trang thành hai cột chính. Cột bên trái chứa các đoạn văn bản với các tiêu đề và mô tả chi tiết, trong khi cột bên phải chứa hình ảnh minh họa. Cấu trúc này tạo nên sự cân bằng giữa văn bản và hình ảnh, giúp người dùng dễ dàng tiếp thu thông tin mà không bị quá tải. 2. Thiết kế khối bên trái: Khối bên trái chủ yếu tập trung vào việc trình bày nội dung với các tiêu đề được định dạng theo kích thước fs-5 và các đoạn văn mô tả chi tiết được trình bày dưới dạng text-secondary. Những đoạn văn này cung cấp thông tin bổ sung, giúp người dùng hiểu rõ hơn về nội dung trang hoặc sản phẩm được giới thiệu. Ngoài ra, còn có một nút call-to-action Sign-up to get more info, khuyến khích người dùng đăng ký để biết thêm thông tin chi tiết. 3. Thiết kế khối bên phải: Khối bên phải hiển thị hình ảnh minh họa có kích thước lớn, giúp tạo sự thu hút ngay từ cái nhìn đầu tiên. Hình ảnh được bo góc (rounded) và có kích thước rộng (w-100), giúp tối ưu hóa không gian hiển thị mà vẫn giữ được tính thẩm mỹ. Sự kết hợp giữa hình ảnh và nội dung tạo ra một bố cục cân đối, dễ nhìn và tạo cảm giác chuyên nghiệp cho trang web. 4. Tính năng responsive: Phần Other Content được thiết kế hoàn toàn responsive, nhờ vào hệ thống lưới mạnh mẽ của Bootstrap 5. Khi hiển thị trên các thiết bị nhỏ như điện thoại di động hoặc máy tính bảng, các khối nội dung sẽ tự động sắp xếp lại để phù hợp với kích thước màn hình. Cụ thể, hình ảnh sẽ hiển thị dưới văn bản trên màn hình nhỏ, trong khi trên màn hình lớn, các khối vẫn giữ nguyên bố cục song song, giúp đảm bảo trải nghiệm người dùng luôn được tối ưu. 5. Ứng dụng thực tế: Phần Other Content này có thể được áp dụng trong nhiều loại trang web khác nhau, từ trang blog cá nhân đến các trang web thương mại điện tử. Bạn có thể sử dụng nó để giới thiệu sản phẩm mới, thông báo chương trình khuyến mãi, hoặc chia sẻ các bài viết hữu ích với người dùng. Bằng cách kết hợp văn bản và hình ảnh một cách hợp lý, bạn có thể tạo ra một giao diện trang web hấp dẫn và chuyên nghiệp hơn. Việc thực hành với phần Other Content này không chỉ giúp bạn nắm vững cách sử dụng Bootstrap 5 mà còn giúp bạn biết cách thiết kế giao diện cân bằng giữa nội dung và hình ảnh, từ đó mang lại trải nghiệm tốt hơn cho người dùng.