PHPHocası Yazılım Akademisi
Bootstrap 5 Components 2026 Güncel

Bootstrap Bileşenler Navbar 2

5 dk okuma süresi • 502 görüntülenme • 2024-10-06 • 4.9 (14 değerlendirme)

Bootstrap Navbar bileşeninin ikinci örneği olarak, daha karmaşık bir yapı oluşturalım. Bu örnekte, kullanıcıların daha fazla içeriğe erişebilmesi için açılır menü (dropdown) öğeleri ekleyeceğiz. Ayrıca, arama çubuğu ve düğmeler gibi ek bileşenler de kullanacağız. Bu tür bir navbar, genellikle daha fazla sayfa veya alt içerik bağlantıları sunmak için kullanılır.

Gelişmiş Bootstrap Navbar Özellikleri

  1. Dropdown Menüsü: Alt bağlantıları gruplamak için dropdown menüleri ekleyebilirsiniz.
  2. Arama Çubuğu: Kullanıcılara sitenizdeki içerikleri hızlıca arama imkanı sunar.
  3. Düğmeler: Önemli eylemleri vurgulamak için düğme ekleyebilirsiniz.

Kullanım Örneği

Aşağıda, Bootstrap kullanarak dropdown menüsü ve arama çubuğu içeren bir navbar örneği verilmiştir.

HTML Kodu

 
  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"> <title>Gelişmiş Bootstrap Navbar Örneği</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Logo</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"> </span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Anasayfa</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Hakkında</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Hizmetler </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li> <a class="dropdown-item" href="#">Hizmet 1</a> </li> <li> <a class="dropdown-item" href="#">Hizmet 2</a> </li> <li> <a class="dropdown-item" href="#">Hizmet 3</a> </li> <li> <hr class="dropdown-divider"> </li> <li> <a class="dropdown-item" href="#">Diğer Hizmetler</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">İletişim</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Ara" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Ara</button> </form> <button class="btn btn-primary ms-2">Kayıt Ol</button> </div> </div> </nav> <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"> </script> </body> </html>

Açıklama

  • Navbar Yapısı:
    • navbar-expand-lg: Navbar, büyük ekranlarda genişleyecek şekilde tasarlanmıştır.
    • bg-light: Açık bir arka plan rengi kullanılır.
  • Dropdown Menüsü:
    • <li class="nav-item dropdown"> : Dropdown menüsü içeren bir liste öğesidir.
    • <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> : Dropdown menüsünü açmak için kullanılan bağlantıdır. data-bs-toggle özelliği, tıklandığında dropdown'ın açılmasını sağlar.
    • <ul class="dropdown-menu"> : Dropdown menüsü içeriklerini kapsayan liste. Her bir öğe, dropdown-item sınıfı ile belirtilmiştir.
  • Arama Çubuğu:
    • <form class="d-flex"> : Duyarlı bir arama çubuğu içerir. d-flex sınıfı, form elemanlarını yatay olarak hizalar.
    • <input class="form-control"> : Arama kutusunu tanımlar.
    • <button class="btn btn-outline-success"> : Arama butonunu tanımlar.
  • Kayıt Ol Düğmesi:
    • <button class="btn btn-primary ms-2"> : Navbar’ın sağ tarafında yer alan bir düğme.

Önemli Notlar

  • Bootstrap'ın JavaScript bileşenleri, dropdown menüsü ve diğer etkileşimli özellikler için gereklidir.
  • Navbar, mobil cihazlarda kullanıcı deneyimini artırmak için otomatik olarak uyum sağlar.

Bu tür bir Bootstrap Navbar, daha karmaşık bir içerik yapısı sunarak kullanıcıların site içinde daha etkili bir şekilde gezinmesine olanak tanır. Dropdown menüleri ve arama çubuğu gibi özellikler, sitenizin daha etkileşimli ve kullanıcı dostu olmasına katkı sağlar.

Bu Dersi Değerlendirin

Bu ders size yardımcı oldu mu? Puan verin!

Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.

4.9 / 5 (Toplam 14 oy kullanıldı)

Sıkça Sorulan Sorular (SSS)

Bu ders ve konuyla ilgili en çok merak edilenler

Bootstrap Bileşenler Navbar 2 dersini öğrenmek için ön koşul var mı?

Bu eğitim temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.

Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?

Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.

Takıldığım bir yerde nereden soru sorabilirim?

Dersin altındaki topluluk yorumları bölümünden sorunuzu sorabilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.

Paylaş:
PHP Hocası Akademi
Önceki Ders Bootstrap Bileşenler Navbar Sonraki Ders Bootstrap Bileşenler Nav Tab

Topluluk Yorumları (0)

Ders Hakkında Yorum Yap veya Soru Sor

Henüz yorum yapılmamış. İlk yorumu siz yazın!