Bootstrap 5 hướng dẫn

menu điều hướng

Nếu muốn tạo menu ngang đơn giản, hãy thêm .nav class thêm vào <ul> thêm yếu tố, sau đó cho mỗi <li> thêm các yếu tố .nav-item và thêm .nav-link lớp thêm vào các liên kết của chúng:

Mô hình

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Liên kết</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Liên kết</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Liên kết</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Tắt</a>
  </li>
</ul>

Thử ngay

đặt điều hướng thẳng.

thêm .justify-content-center lớp để điều hướng giữa, thêm .justify-content-end lớp để điều hướng phải.

Mô hình

<!-- Đặt điều hướng giữa -->
<ul class="nav justify-content-center">
<!-- Đặt điều hướng phải -->
<ul class="nav justify-content-end">

Thử ngay

danh sách điều hướng dọc

thêm .flex-column class có thể tạo hướng dẫn dọc:

Mô hình

<ul class="nav flex-column">

Thử ngay

tab

Hãy sử dụng .nav-tabs class chuyển đổi menu hướng dẫn thành tab hướng dẫn. Và .active class thêm vào liên kết hoạt động/hiện tại. Nếu bạn muốn tab có thể chuyển đổi, hãy xem ví dụ cuối cùng trên trang này.

Mô hình

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Hoạt động</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Liên kết</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Liên kết</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Tắt</a>
  </li>
</ul>

Thử ngay

capsule

Sử dụng .nav-pills class để thiết lập menu hướng dẫn thành menu胶囊. Nếu bạn muốn胶囊 có thể chuyển đổi, hãy xem ví dụ cuối cùng trên trang này.

Mô hình

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Hoạt động</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Liên kết</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Liên kết</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Tắt</a>
  </li>
</ul>

Thử ngay

thẻ/capsule tab cân bằng

Hãy sử dụng .nav-justified Class (cân bằng) cho thẻ/capsule:

Mô hình

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

Thử ngay

Mở rộng胶囊

Mô hình

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Hoạt động</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Mở rộng</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Liên kết 1</a></li>
      <li><a class="dropdown-item" href="#">Liên kết 2</a></li>
      <li><a class="dropdown-item" href="#">Liên kết 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Liên kết</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Tắt</a>
  </li>
</ul>

Thử ngay

Mở rộng tab

Mô hình

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Hoạt động</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Mở rộng</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Liên kết 1</a></li>
      <li><a class="dropdown-item" href="#">Liên kết 2</a></li>
      <li><a class="dropdown-item" href="#">Liên kết 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Liên kết</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Tắt</a>
  </li>
</ul>

Thử ngay

tab chuyển đổi / tab động

Nếu bạn muốn tab có thể chuyển đổi, hãy thêm data-toggle="tab" thêm thuộc tính vào mỗi liên kết. Sau đó thêm mỗi tab có ID duy nhất .tab-pane class và đặt chúng trong thẻ có .tab-content class của <div> thành phần.

Nếu bạn muốn tab có thể mờ vào mờ ra khi nhấp, hãy thêm .fade class thêm vào .tab-pane：

Mô hình

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Trang chủ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

Thử ngay

Cập nhật / Hướng dẫn胶囊 động

Mã nguồn tương tự áp dụng cho hướng dẫn; chỉ cần thay đổi thuộc tính data-toggle data-toggle="pill" Chỉ cần:

Mô hình

<!-- Đầu胶囊 hướng dẫn -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">Mùa xuân</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">Mùa xuân đầu tiên</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">Trên đường núi</a>
  </li>
</ul>
<!-- Thẻ tab -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

Thử ngay