Trong hướng dẫn này, bạn sẽ học cách tạo menu điều hướng bằng thành phần Bootstrap Nav.
Bootstrap cung cấp một cách dễ dàng và nhanh chóng để tạo menu điều hướng cơ bản cũng như các thành phần như tab và pill rất linh hoạt và đẹp mắt. Tất cả các thành phần điều hướng của Bootstrap, bao gồm các tab và pill, chia sẻ cùng một kiểu mã cơ sở và kiểu thông qua lớp cơ sở .nav.
Bạn có thể sử dụng lớp Bootstrap .nav để tạo một menu điều hướng cơ bản, như sau:
<nav class="nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Lưu ý: Bạn có thể sử dụng lớp.disabledđể làm cho một liên kết giống như bị vô hiệu hóa. Tuy nhiên, lớp.disablednày chỉ thay đổi giao diện trực quan của liên kết bằng cách làm cho nó có màu xám và xóa hiệu ứng di chuột, tuy nhiên, liên kết sẽ vẫn có thể nhấp được trừ khi bạn xóa thuộc tính"href".
Theo mặc định, các nav được căn trái, nhưng bạn có thể dễ dàng căn chúng vào giữa hoặc phải bằng các tiện ích flexbox.
Ví dụ sau sử dụng lớp .justify-content-center để căn chỉnh các phần tử của menu điều hướng vào giữa.
<nav class="nav justify-content-center">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn có thể căn chỉnh các phần tử của menu điều hướng sang phải bằng cách sử dụng lớp .justify-content-end, như thế này:
<nav class="nav justify-content-end">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Hơn nữa, bạn thậm chí có thể xếp chồng các phần tử của menu điều hướng của mình theo chiều dọc bằng lớp .flex-column. Ngoài ra, nếu bạn muốn xếp menu điều hướng của mình theo chiều dọc trên các khung nhìn nhỏ hơn nhưng không phải trên các khung nhìn khác, hãy sử dụng nó với điểm ngắt đáp ứng (ví dụ .flex-sm-column:).
<nav class="nav flex-column">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Đơn giản, thêm lớp .nav-tabs vào menu điều hướng cơ bản để tạo điều hướng dạng tab, như sau:
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Xem hướng dẫn về tab của Bootstrap để tìm hiểu cách tạo tab động để chuyển đổi giữa các nội dung.
Bạn cũng có thể thêm các icon vào các thẻ tab của mình để làm cho nó hấp dẫn hơn, như được hiển thị ở đây:
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active">
<i class="bi-house-door"></i> Home
</a>
<a href="#" class="nav-item nav-link">
<i class="bi-person"></i> Profile
</a>
<a href="#" class="nav-item nav-link">
<i class="bi-envelope"></i> Messages
</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">
<i class="bi-bar-chart"></i> Reports
</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Xem hướng dẫn về các icon Bootstrap để biết cách sử dụng các icon trong Bootstrap. Ngoài ra, hãy xem các lớp icon Bootstrap để khám phá các icon được cung cấp bởi Bootstrap.
Tương tự, bạn có thể tạo điều hướng dựa trên pill bằng cách thêm lớp .nav-pills trên menu điều hướng cơ bản thay vì lớp .nav-tabs, như được hiển thị trong ví dụ sau:
<nav class="nav nav-pills">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, giống như các tab điều hướng, bạn cũng có thể thêm các icon vào menu điều hướng pill để làm cho nó hấp dẫn hơn:
<nav class="nav nav-pills">
<a href="#" class="nav-item nav-link active">
<i class="bi-house-door"></i> Home
</a>
<a href="#" class="nav-item nav-link">
<i class="bi-person"></i> Profile
</a>
<a href="#" class="nav-item nav-link">
<i class="bi-envelope"></i> Messages
</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">
<i class="bi-bar-chart"></i> Reports
</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Ngoài ra, bạn có thể áp dụng lớp .flex-column trên phần tử .nav để làm cho các pill xuất hiện xếp chồng lên nhau theo chiều dọc. Ngoài ra, bạn có thể sử dụng các phiên bản responsive (ví dụ .flex-sm-column) nếu bạn cần xếp chúng trên các khung nhìn cụ thể nhưng không phải trên các khung nhìn khác.
<nav class="nav nav-pills flex-column">
<a href="#" class="nav-item nav-link active">
<i class="bi-house-door"></i> Home
</a>
<a href="#" class="nav-item nav-link">
<i class="bi-person"></i> Profile
</a>
<a href="#" class="nav-item nav-link">
<i class="bi-envelope"></i> Messages
</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">
<i class="bi-bar-chart"></i> Reports
</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Bạn có thể thêm menu thả xuống vào liên kết bên trong tab điều hướng và menu điều hướng pill với một chút mã bổ sung.
Bốn lớp CSS .dropdown, .dropdown-toggle, .dropdown-menu và .dropdown-item được yêu cầu bổ sung cho .dropdown-menu hoặc các lớp để tạo menu thả xuống đơn giản bên trong tab và menu điều hướng pill mà không cần sử dụng bất kỳ mã JavaScript nào.
Ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống đơn giản vào một tab.
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Sent</a>
<a href="#" class="dropdown-item">Drafts</a>
</div>
</div>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống đơn giản vào menu điều hướng pill.
<nav class="nav nav-pills">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Sent</a>
<a href="#" class="dropdown-item">Drafts</a>
</div>
</div>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Bạn sẽ tìm hiểu thêm về menu thả xuống ở phần sau trong chương menu thả xuống Bootstrap .
Bạn có thể buộc các phần tử .nav-item của mình mở rộng và lấp đầy một cách tương ứng tất cả các chiều rộng có sẵn bằng cách sử dụng lớp .nav-fill trên phần tử .nav. Trong ví dụ sau, tất cả không gian ngang bị chiếm bởi các phần tử của menu điều hướng, nhưng mọi phần tử của menu điều hướng không có cùng chiều rộng.
<nav class="nav nav-pills nav-fill">
<a href="#" class="nav-item nav-link">Home</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link active">Explore Products</a>
<a href="#" class="nav-item nav-link">Contact Us</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Ngoài ra, bạn có thể sử dụng lớp .nav-justified thay vì .nav-fill, nếu bạn muốn menu điều hướng lấp đầy tất cả không gian ngang cũng như mọi phần tử của menu điều hướng có cùng chiều rộng.
<nav class="nav nav-pills nav-justified">
<a href="#" class="nav-item nav-link">Home</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link active">Explore Products</a>
<a href="#" class="nav-item nav-link">Contact Us</a>
</nav>Kết quả của ví dụ trên sẽ giống như sau:
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.