Bootstrap 5 Navigasyon Çubuğu

Kurs önerileri:

Navigasyon çubuğu

Navigasyon çubuğu, sayfanın üstündeki navigasyon başlığıdır:

Temel navigasyon çubuğu

Lütfen Bootstrap kullanılarak, navigasyon çubuğu ekran büyüklüğüne bağlı olarak genişletilebilir veya katlanabilir. .navbarSınıfı kullanarak standart navigasyon çubuğu oluşturun, ardından duyarlı katılma sınıflarını:.navbar-expand-xxl|xl|lg|md|sm

kullanın（devasa, çok büyük, büyük, orta ekipmanlarda yatay olarak sıralanır veya küçük ekranlarda dikey olarak katmanlanır navigasyon çubuğu）。 ekleyin. Navigasyon çubuğuna bağlantı eklemek için class="navbar-nav" <ul> elementi (veya <div>ekleyin. Daha sonra .nav-item Sınıfın <li> elementi, ardından .nav-link Sınıfın <a> Elementi:

Örnek

<!-- Küçük ekranlarda yatay olan gri horizontal navigasyon çubuğu -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- Bağlantılar -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Bağlantı 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Bağlantı 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Bağlantı 3</a>
      </li>
    </ul>
  </div>
</nav>

Kişisel olarak deneyin

dikey navigasyon çubuğu

Sil .navbar-expand-* Sınıf, her zaman dikey olan navigasyon çubuğu oluşturur:

Örnek

<!-- Gri dikey navigasyon çubuğu -->
<nav class="navbar bg-light">
  ...
</nav>

Kişisel olarak deneyin

yerleştirilmiş navigasyon çubuğu

Ortaya ekleyin .justify-content-center Sınıf, navigasyon çubuğunu ortaya yerleştirir:

Örnek

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

Kişisel olarak deneyin

renkli navigasyon çubuğu

Herhangi bir .bg-color Sınıfı kullanarak navigasyon çubuğunun arkaplan rengini değiştirin:

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

İpucu:Lütfen .navbar-dark Sınıf, navigasyon çubuğundaki tüm bağlantılara beyaz metin rengi ekler veya .navbar-light Sınıf ekleyerek siyah metin rengi.

Örnek

<!-- Gri ay arkaplan, beyaz metin -->
<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="#">Bağlantı</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Bağlantı</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">Aktif</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">Devre dışı</a>
<!-- Siyah arka plan, beyaz metin -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Mavi arka plan, beyaz metin -->

Kişisel olarak deneyin

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>aktif/Devre dışı bırakılmış durum: .active sınıfını <a> elementi mevcut bağlantıyı vurgulamak için veya .disabled sınıfı ile bağlantıların tıklanabilirliğini belirtmek için:

Marka / İkona

.navbar-brand sınıfı ile sayfanın marka/ikona/proje adını vurgulamak için:

Örnek

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

Kişisel olarak deneyin

Sınıfı kullanırsanız .navbar-brand Bootstrap 5, sınıfı kullanırken resimle birlikte otomatik olarak resim stili ayarlar, dikey yönde navigasyon çubuğuna uyum sağlar.

Örnek

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

Kişisel olarak deneyin

Navigasyon çubuğu metni

Lütfen .navbar-text Klas, navigasyon çubuğunda bağlantı olmayan herhangi bir elementi dikey olarak hizalar (doğru iç boşluk ve metin rengini sağlayın).

Örnek

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">Navigasyon çubuğu metni</span>
  </div>
</nav>

Kişisel olarak deneyin

Çoğu zaman, özellikle küçük ekranlarda, navigasyon bağlantılarını gizlemek ve bunların yerine bir düğme kullanmak istersiniz ve düğmeye tıkladığınızda bunları göstermek.

Düğümeli navigasyon çubuğu oluşturmak için zaten ayarlanmış class="navbar-toggler"vedata-bs-toggle="collapse" ve data-bs-target="#thetarget" dolayısıyla navigasyon çubuğu içeriğini (bağlantılar vb.) class="collapse navbar-collapse" <div> elemanında, ardından düğmeye data-bs-target uygun id:thetarget"。

Örnek

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

Kişisel olarak deneyin

İpucu:Ayrıca silebilirsiniz: .navbar-expand-md Sınıflar, navigasyon çubuğu bağlantılarını her zaman gizleyip değiştirme düğmesini gösterir.

Açılır menü navigasyon çubuğu

Navigasyon çubuğu, açılır menüleri barındırabilir:

Örnek

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Açılır menü</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Bağlantı</a></li>
    <li><a class="dropdown-item" href="#">Başka bir bağlantı</a></li>
    <li><a class="dropdown-item" href="#">Üçüncü bağlantı</a></li>
  </ul>
</li>

Kişisel olarak deneyin

Navigasyon çubuğu menü ve düğmeler

Navigasyon çubuğuna form ekleyebilirsiniz:

Örnek

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

Kişisel olarak deneyin

Sabit konumlandırılmış navigasyon çubuğu

Navigasyon çubuğu ayrıca sayfanın üst veya altına sabitlenebilir.

Sabit navigasyon çubuğu, sayfanın dışında sabit bir konumda (üst veya alt) görünürlüğünü korur.

.fixed-top sınıf, navigasyon çubuğunu sayfanınÜst:

Örnek

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

Kişisel olarak deneyin

Lütfen navigasyon çubuğunu sayfanın altına sabitlemek için .fixed-bottom sınıfını kullanın:

Örnek

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

Kişisel olarak deneyin

Lütfen .sticky-top Bu sınıf, navigasyon çubuğunun üzerine kayarken sayfanınÜst.

Not:Bu tür IE11 ve daha eski sürümlerde çalışmaz (onu position:relative)

Örnek

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

Kişisel olarak deneyin