Bar Navigasi Bootstrap 5

navigasi

Navigasi adalah tajuk navigasi yang berada di puncak halaman:

navigasi dasar

Dengan menggunakan Bootstrap, navigasi dapat dijalankan atau terbuka, tergantung ukuran layar.

Gunakan .navbar kelas untuk membuat navigasi standar, lalu kelas pengepakan responsif:.navbar-expand-xxl|xl|lg|md|sm（di perangkat besar, super besar, besar, sedang, dan kecil diarsir baris horizontal, atau di layar kecil diarsir berbaris vertikal）。

untuk menambahkan tautan ke navigasi, gunakan "navbar-nav" kelas <ul> elemen（atau <div>）。Lalu tambahkan elemen .nav-item kelas <li> elemen, diikuti dengan elemen .nav-link kelas <a> elemen:

Contoh

<!-- navigasi horisontal berwarna abu-abu yang berubah menjadi vertikal di layar kecil -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- tautan -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">tautan 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">tautan 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">tautan 3</a>
      </li>
    </ul>
  </div>
</nav>

Coba Sendiri

navigasi vertikal

hapus .navbar-expand-* kelas dapat membuat navigasi selalu vertikal:

Contoh

<!-- navigasi vertikal berwarna abu-abu -->
<nav class="navbar bg-light">
  ...
</nav>

Coba Sendiri

navigasi yang ditengahkan

tambahkan .justify-content-center kelas dapat menengahkan navigasi:

Contoh

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

Coba Sendiri

navigasi berwarna

gunakan warna apapun .bg-color kelas untuk mengubah warna latar navigasi:

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

Petunjuk:Gunakan .navbar-dark kelas menambahkan warna teks putih ke semua tautan di navigasi, atau gunakan .navbar-light tambahkan warna teks hitam.

Contoh

<!-- warna latar abu-abu, teks putih -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">活动</a>
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">Tautan</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tautan</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>
<!-- 黑色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 蓝色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

Coba Sendiri

活动/禁用状态：将 .active 类添加到 <a> 元素可突出显示当前链接，或添加 .disabled 类来指示链接不可点击。

品牌 / 标志

.navbar-brand 类用于突出显示页面的品牌/标志/项目名称：

Contoh

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

Coba Sendiri

如果将 .navbar-brand 类与图像一起使用时，Bootstrap 5 将自动设置图像样式，在垂直方向适应导航栏。

Contoh

<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>

Coba Sendiri

导航栏文本

Gunakan .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的内边距和文本颜色）。

Contoh

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">导航栏文本</span>
  </div>
</nav>

Coba Sendiri

很多时候，尤其是在小屏幕上，您希望隐藏导航链接并用一个按钮替代它们，并在单击该按钮时显示它们。

如需创建可折叠导航栏，请使用已设置 class="navbar-toggler"、data-bs-toggle="collapse" 和 data-bs-target="#thetarget" 的按钮。然后将导航栏内容（链接等）包裹在 class="collapse navbar-collapse" 的 <div> 元素中，后跟与按钮的 data-bs-target 匹配的 id："thetarget"。

Contoh

<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="#">Tautan</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tautan</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tautan</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Coba Sendiri

Petunjuk:Anda juga dapat menghapus .navbar-expand-md Kelas untuk selalu menyembunyikan tautan baring navigasi dan menampilkan tombol tukar.

Baring navigasi menu turun

Baring navigasi dapat menampung menu turun:

Contoh

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Menu turun</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Tautan</a></li>
    <li><a class="dropdown-item" href="#">Tautan lainnya</a></li>
    <li><a class="dropdown-item" href="#">Tautan ketiga</a></li>
  </ul>
</li>

Coba Sendiri

Menu dan tombol baring navigasi

Anda juga dapat menambahkan formulir di dalam baring navigasi:

Contoh

<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)">Tautan</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Tautan</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Tautan</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Cari">
        <button class="btn btn-primary" type="button">Cari</button>
      </form>
    </div>
  </div>
</nav>

Coba Sendiri

Navigasi yang tetap di posisi

Navigasi juga dapat tetap di atas atau dasar halaman.

Navigasi tetap akan tetap terlihat di posisi tetap (atas atau dasar) yang tidak tergantung pada rolling halaman.

.fixed-top Kelas ini membuat navigasi tetap di halamanAtas：

Contoh

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

Coba Sendiri

Gunakan kelas .fixed-bottom untuk mempertahankan navigasi di dasar halaman:

Contoh

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

Coba Sendiri

Gunakan .sticky-top Kelas ini membuat navigasi tetap/diam di halaman saat dirolling melaluiAtas。

Keterangan:Tipe ini tidak berfungsi di IE11 dan versi sebelumnya (dianggap seperti position:relative）。

Contoh

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

Coba Sendiri