Bootstrap 5 Thanh đạo航

Thanh導 navigation

Thanh導 navigation là tiêu đề dẫn nằm ở đầu trang:

Thanh導 navigation cơ bản

Bằng cách sử dụng Bootstrap, thanh導 navigation có thể mở rộng hoặc gập lại, tùy thuộc vào kích thước màn hình.

Vui lòng sử dụng .navbar Loại này tạo thanh導 navigation tiêu chuẩn, sau đó là các loại cuộn phản hồi:.navbar-expand-xxl|xl|lg|md|sm（trong các thiết bị lớn, rất lớn, lớn, trung bình, nhỏ, thanh導航 được sắp xếp ngang hoặc dọc堆叠 trên màn hình nhỏ）。

Để thêm liên kết vào thanh導航, hãy sử dụng class="navbar-nav" của <ul> yếu tố (hoặc <div>）。Sau đó thêm yếu tố có .nav-item Loại của <li> yếu tố, sau đó là yếu tố có .nav-link Loại của <a> Các yếu tố:

Mô hình

<!-- Thanh導航 ngang màu xám trên màn hình nhỏ sẽ chuyển thành dọc -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- Liên kết -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Liên kết 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Liên kết 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Liên kết 3</a>
      </li>
    </ul>
  </div>
</nav>

Thử ngay

Thanh導航 dọc

Xóa .navbar-expand-* Loại này có thể tạo thanh導航 luôn dọc:

Mô hình

<!-- Thanh導航 dọc màu xám -->
<nav class="navbar bg-light">
  ...
</nav>

Thử ngay

Thanh導航 giữa

Thêm .justify-content-center Loại này có thể đặt thanh導航 giữa:

Mô hình

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

Thử ngay

Thanh導航 màu

Sử dụng bất kỳ .bg-color Loại này để thay đổi màu nền của thanh導航:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Lưu ý:Vui lòng sử dụng .navbar-dark Loại này thêm màu văn bản trắng cho tất cả các liên kết trong thanh導航, hoặc sử dụng .navbar-light Thêm màu văn bản đen.

Mô hình

<!-- Màu nền xám, văn bản màu trắng -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </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 active" href="#">Hoạt động</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">Tắt</a>
<!-- Màu nền đen, văn bản trắng -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Màu nền xanh, văn bản trắng -->

Thử ngay

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>Trạng thái hoạt động/đã tắt: .active lớp vào <a> phần tử có thể nhấn mạnh liên kết hiện tại, hoặc thêm .disabled lớp để chỉ ra rằng liên kết không thể nhấp.

Thương hiệu / đầu trang

.navbar-brand lớp để nhấn mạnh tên thương hiệu/đầu trang/dự án:

Mô hình

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

Thử ngay

Nếu sử dụng .navbar-brand Khi sử dụng cùng với hình ảnh, Bootstrap 5 sẽ tự động thiết lập樣式 hình ảnh, phù hợp với thanh điều hướng theo hướng thẳng đứng.

Mô hình

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

Thử ngay

Văn bản thanh điều hướng

Vui lòng sử dụng .navbar-text Lớp thẳng đứng canh chỉnh bất kỳ phần tử nào không phải liên kết trong thanh điều hướng (đảm bảo khoảng cách biên và màu văn bản chính xác).

Mô hình

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">Văn bản thanh điều hướng</span>
  </div>
</nav>

Thử ngay

Nhiều khi, đặc biệt là trên màn hình nhỏ, bạn muốn ẩn các liên kết điều hướng và thay thế chúng bằng một nút, và hiển thị chúng khi nhấp vào nút.

Để tạo thanh điều hướng có thể gấp lại, hãy sử dụng các lớp đã được thiết lập class="navbar-toggler"、data-bs-toggle="collapse" và data-bs-target="#thetarget" thuộc về nút. class="collapse navbar-collapse" thuộc về phần tử <div> sau đó theo với nút data-bs-target mã id khớp:"thetarget"。

Mô hình

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-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>
      </ul>
    </div>
  </div>
</nav>

Thử ngay

Lưu ý:Bạn có thể xóa .navbar-expand-md Loại này luôn ẩn liên kết thanh導航 và hiển thị nút chuyển đổi.

Thanh導航 trình đơn thả xuống

Thanh導航 có thể chứa trình đơn thả xuống:

Mô hình

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Trình đơn thả xuống</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Liên kết</a></li>
    <li><a class="dropdown-item" href="#">Liên kết khác</a></li>
    <li><a class="dropdown-item" href="#">Liên kết thứ ba</a></li>
  </ul>
</li>

Thử ngay

Trình đơn và nút thanh導航

Bạn có thể bao gồm biểu mẫu trong thanh導航:

Mô hình

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Liên kết</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Liên kết</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Liên kết</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Tìm kiếm">
        <button class="btn btn-primary" type="button">Tìm kiếm</button>
      </form>
    </div>
  </div>
</nav>

Thử ngay

Thanh điều hướng cố định vị trí

Thanh điều hướng cũng có thể được cố định ở đầu trang hoặc đáy trang của trang.

Thanh điều hướng cố định sẽ duy trì khả năng nhìn thấy ở vị trí cố định (đầu trang hoặc đáy trang) tách biệt với cuộn trang.

.fixed-top Loại này giúp thanh điều hướng cố định trên trangĐầu trang：

Mô hình

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

Thử ngay

Vui lòng sử dụng lớp .fixed-bottom để giữ thanh điều hướng ở đáy trang:

Mô hình

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

Thử ngay

Vui lòng sử dụng .sticky-top Loại này giúp thanh điều hướng cố định/stay trên trang khi cuộn qua nóĐầu trang。

Ghi chú：Loại này không hoạt động trong IE11 và các phiên bản sớm hơn (để xem như position:relative）。

Mô hình

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

Thử ngay