Trong bài viết này chúng ta sẽ học thêm 1 cách tạo danh sách điều hướng hay menu đơn giản với Nav trong Bootstrap 4.
Nav Menus
Nếu bạn muốn tạo một menu ngang đơn giản, hãy thêm lớp .nav vào phần tử <ul>, tiếp theo là .nav-item cho mỗi <li> và thêm lớp .nav-link vào các liên kết của chúng:
Ví dụ:
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Căn chỉnh điều hướng:
Mặc định danh sách điều hướng được căn trái tuy nhiên chúng ta có thể thêm lớp .justify-content-center để căn giữa điều hướng và lớp .justify-content-end để căn phải điều hướng.
Ví dụ :
<!-- Căn giữa nav --> <ul class="nav justify-content-center"> <!-- Căn phải nav --> <ul class="nav justify-content-end">
Danh sách điều hướng nằm dọc:
Thêm lớp .flex-column để tạo danh sách điều hướng dọc:
Ví dụ:
<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
Tab và Pill
Các tab
Trong Bootstrap 4 chúng ta có thể biến menu điều hướng thành các tab điều hướng với lớp .nav-tabs. Thêm lớp .active vào liên kết hoạt động hiện tại. Nếu bạn muốn các tab có thể chuyển đổi được, hãy xem ví dụ cuối cùng trên trang này.
Ví dụ:
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
Pills (Viên Thuốc)
Pills là dạng nút hình viên thuốc. Chúng ta cũng có thể biến menu điều hướng thành các viên thuốc điều hướng với lớp .nav-Drugs
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
Căn đều Tabs/pills
Căn đều các tab / pill bằng lớp .nav-justify (chiều rộng bằng nhau):
Ví dụ:
<div class="container"> <h2>Căn đều Tabs/Pills</h2> <p>Căn đều Pill:</p> <ul class="nav nav-pills nav-justified"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul><br> <p>Justified tab:</p> <ul class="nav nav-tabs nav-justified"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div>
Pills với menu xổ xuống Dropdown
Ví dụ:
<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-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
Tabs với menu xổ xuống Dropdown
<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-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
Tab có thể chuyển đổi/Tab động
Để làm cho các tab có thể chuyển đổi, hãy thêm thuộc tính data-toggle = "tab" vào mỗi liên kết. Sau đó, thêm một lớp .tab-pane với một ID duy nhất cho mọi tab và bọc chúng bên trong phần tử <div> với lớp .tab-content.
Nếu bạn muốn các tab mờ dần khi nhấp vào chúng, hãy thêm lớp .fade vào .tab-pane:
Ví dụ:
<!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Trang chủ</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Bóng Đá</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Cầu lông</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane container active" id="home">Nội dung trang chủ</div> <div class="tab-pane container fade" id="menu1">Bóng đá hàng đầu châu lục</div> <div class="tab-pane container fade" id="menu2">Cầu lông hàng đầu châu lục</div> </div>
Toggleable / Dynamic Pills
Cách tạo nút Pill động tương tự như tab chỉ thay đổi thuộc tính data-toggle thành data-toggle = "pill":
Ví dụ:
<div class="container"> <!-- Nav tabs --> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">Trang chủ</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu1">Bóng Đá</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu2">Cầu lông</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane container active" id="home">Nội dung trang chủ</div> <div class="tab-pane container fade" id="menu1">Bóng đá hàng đầu châu lục</div> <div class="tab-pane container fade" id="menu2">Cầu lông hàng đầu châu lục</div> </div> </div>
Lời kết:
Trên đây là cách sử dụng Nav trong Bootstrap 4 để tạo các danh sách điều hướng tùy chỉnh. Chúng ta có thể áp dụng các danh sách này để tạo các khối hiển thị bài viết hoặc thậm chí là menu điều hướng trang web cũng được. Chúc các bạn thành công !
