Bootstrap - Navs and Tabs

Giới thiệu

Xin chào các bạn đang học phát triển web! Hôm nay, chúng ta sẽ cùng tìm hiểu về một trong những thành phần được sử dụng phổ biến nhất trong thiết kế web: các menu điều hướng và tab. Những yếu tố này giống như các biển báo trên đường của trang web bạn, hướng dẫn người dùng đến các phần khác nhau và nội dung. Với các thành phần nav và tab của Bootstrap, chúng ta có thể tạo ra các hệ thống điều hướng mượt mà, linh hoạt và hoạt động trên tất cả các thiết bị. Hãy c rolled up our sleeves và bắt đầu mã hóa!

Cơ bản nav

Hãy bắt đầu từ cơ bản. Bootstrap cung cấp một cách đơn giản để tạo menu điều hướng bằng cách sử dụng lớp .nav. Dưới đây là một ví dụ cơ bản:

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Về chúng tôi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dịch vụ</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Liên hệ</a>
</li>
</ul>

Mã này tạo ra một danh sách điều hướng horizontial. Lớp active làm nổi bật trang hiện tại, trong khi lớp disabled làm mờ các liên kết không thể nhấp.

Các phong cách có sẵn

Bootstrap cung cấp nhiều phong cách khác nhau cho nav của bạn. Hãy xem xét hai phong cách phổ biến:

Nav tabs

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hồ sơ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tin nhắn</a>
</li>
</ul>

Điều này tạo ra một menu điều hướng theo tab, rất phù hợp để tổ chức nội dung thành các phần khác nhau.

Nav pills

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hồ sơ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tin nhắn</a>
</li>
</ul>

Phong cách pills cho phép các liên kết điều hướng có的外观 như nút.

Căn chỉnh horizontial

Bạn có thể dễ dàng thay đổi căn chỉnh của các mục nav. Dưới đây là cách thực hiện:

<ul class="nav justify-content-center">
<!-- Các mục nav ở đây -->
</ul>

<ul class="nav justify-content-end">
<!-- Các mục nav ở đây -->
</ul>

Lớp justify-content-center căn giữa các mục nav, trong khi justify-content-end căn phải.

Làm việc với các công cụ flex

Công cụ flex của Bootstrap cho phép bạn kiểm soát nhiều hơn về bố cục nav của bạn:

<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Liên kết</a>
<a class="nav-link" href="#">Liên kết</a>
<a class="nav-link disabled" href="#">Vô hiệu hóa</a>
</nav>

Điều này tạo ra một menu điều hướng vertial bằng cách sử dụng lớp flex-column.

Về khả năng truy cập

Khi xây dựng nav, rất quan trọng là phải xem xét khả năng truy cập. Sử dụng các phần tử <nav> ở nơi phù hợp và thêm aria-current="page" vào mục hoạt động:

<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<!-- Các mục nav khác -->
</nav>

Sử dụng các menu thả xuống

Nav có thể bao gồm các menu thả xuống cho các cấu trúc điều hướng phức tạp hơn:

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Thả xuống</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Hành động</a></li>
<li><a class="dropdown-item" href="#">Hành động khác</a></li>
<li><a class="dropdown-item" href="#">Điều gì khác</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Liên kết tách biệt</a></li>
</ul>
</li>
<!-- Các mục nav khác -->
</ul>

Mã này tạo ra một nav với một menu thả xuống. Thuộc tính data-bs-toggle="dropdown"启用下拉功能。

Tabs với menu thả xuống

Bạn cũng có thể bao gồm các menu thả xuống trong các nav theo phong cách tab:

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Thả xuống</a>
<ul class="dropdown-menu">
<!-- Các mục menu thả xuống -->
</ul>
</li>
<!-- Các mục nav khác -->
</ul>

Pills với menu thả xuống

Cùng nguyên tắc áp dụng cho nav theo phong cách pill:

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Thả xuống</a>
<ul class="dropdown-menu">
<!-- Các mục menu thả xuống -->
</ul>
</li>
<!-- Các mục nav khác -->
</ul>

Behavior JavaScript

Các plugin JavaScript của Bootstrap có thể thêm hành vi động cho nav và tab của bạn. Dưới đây là cách tạo một bộ tab với các khung nội dung:

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Trang chủ</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Hồ sơ</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Nội dung trang chủ...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Nội dung hồ sơ...</div>
</div>

Mã này tạo ra một bộ tab, khi nhấp vào sẽ hiển thị các khung nội dung khác nhau.

Khả năng truy cập

Để làm cho các tab của bạn khả thi, hãy sử dụng các thuộc tính role, aria-controls, aria-selected, và aria-labelledby như trong ví dụ trước.

Sử dụng các thuộc tính dữ liệu

Các thuộc tính dữ liệu cho phép bạn kiểm soát hành vi của tab mà không cần viết JavaScript:

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Trang chủ</button>
</li>
<!-- Các nút tab khác -->
</ul>

Thuộc tính data-bs-toggle="tab" và data-bs-target="#home"启用 tab 功能而不需要额外的 JavaScript。

Qua JavaScript

Bạn cũng có thể kích hoạt các tab qua JavaScript:

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)

triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})

Mã này gắn các listener sự kiện nhấp vào mỗi nút tab, kích hoạt tab tương ứng khi được nhấp.

Hiệu ứng mờ dần

Để thêm hiệu ứng mờ dần cho các tab của bạn, sử dụng lớp fade:

<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>

Điều này tạo ra một hiệu ứng chuyển đổi mượt mà khi chuyển đổi giữa các tab.

Và thế là xong! Bạn đã học cách tạo và tùy chỉnh menu điều hướng và tab bằng Bootstrap. Nhớ rằng, thực hành là chìa khóa của thành công, vì vậy hãy thử nghiệm với các thành phần này trong các dự án của bạn. Chúc bạn may mắn!

Credits: Image by storyset