Chương 4 : Bootstrap 5

118.4 Bootstrap5 - Navbar Dark Mode và Offcanvas Navbar - Bootstrap 5 Tutorial Chi Tiết

Trong video này, chúng ta sẽ tìm hiểu cách tạo thanh điều hướng (navbar) sử dụng Bootstrap 5 với nhiều tùy chọn khác nhau như màu sắc tối (dark mode), menu thả xuống (dropdown menu), và tính năng tìm kiếm. Video sẽ giới thiệu cách sử dụng `navbar-expand-lg` để điều chỉnh hiển thị của thanh điều hướng trên các kích thước màn hình khác nhau, cùng với việc tạo các đường viền nổi bật bằng `border-danger`. Chúng ta cũng sẽ khám phá cách sử dụng các thuộc tính và class quan trọng như `navbar-toggler`, `data-bs-toggle`, và `data-bs-target` để tạo hiệu ứng thu gọn hoặc mở rộng thanh điều hướng khi cần thiết. Ngoài ra, video sẽ giải thích chi tiết cách tạo menu thả xuống (dropdown menu) trong thanh điều hướng, giúp tổ chức các liên kết điều hướng một cách rõ ràng và dễ sử dụng. Chúng ta sẽ sử dụng class `dropdown-toggle` và `dropdown-menu` để tạo các menu con với các lựa chọn khác nhau. Một điểm nổi bật khác trong video là tính năng offcanvas, giúp hiển thị thanh điều hướng dưới dạng một ngăn kéo (menu drawer) khi người dùng nhấp vào biểu tượng menu. Chúng ta sẽ học cách sử dụng class `offcanvas-start` để tạo hiệu ứng hiển thị từ trái qua phải, hoặc ngược lại. Video sẽ cung cấp các ví dụ về việc sử dụng offcanvas kết hợp với chế độ nền tối (dark mode) để tạo ra giao diện hiện đại, bắt mắt, đồng thời tối ưu hóa trải nghiệm người dùng trên thiết bị di động. Ngoài ra, chúng ta sẽ học cách tích hợp form tìm kiếm vào thanh điều hướng, giúp người dùng dễ dàng tìm kiếm thông tin trên trang web. Video sẽ giải thích cách tạo form với các thành phần `input` và `button` để tạo ra giao diện tìm kiếm gọn gàng và thẩm mỹ. Cuối cùng, video sẽ giới thiệu cách tích hợp các tệp JavaScript của Bootstrap để đảm bảo rằng các tính năng của thanh điều hướng hoạt động mượt mà và tương thích trên các trình duyệt và thiết bị khác nhau.