Bootstrap Navbar, bir web uygulamasının veya sitenin üst kısmında bulunan, gezinmeyi kolaylaştıran ve genellikle logo, bağlantılar ve menü düğmeleri içeren bir bileşendir. Kullanıcıların site içinde hızlı bir şekilde gezinmesine olanak tanır ve responsive (duyarlı) yapısıyla farklı ekran boyutlarına uyum sağlar.
Bootstrap Navbar Özellikleri
- Duyarlı Tasarım: Navbar, ekran boyutuna göre otomatik olarak ayarlanır ve mobil cihazlarda daha kompakt bir görünüm alır.
- Hiyerarşik Yapı: Ana bağlantılar ve alt menüler oluşturarak kullanıcıların içerik arasında kolayca geçiş yapmasını sağlar.
- Logo ve Markalama: Markanızı temsil eden bir logo ekleyebilir, böylece kullanıcılar sitenizi daha kolay tanıyabilir.
- Çeşitli Tasarım Seçenekleri: Farklı renk ve stil seçenekleri ile özelleştirebilir, arka plan rengi ve yazı stillerini değiştirebilirsiniz.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak basit bir navbar örneği verilmiştir. Bu örnekte, bir logo ve bazı bağlantılar içeren bir navbar oluşturulmuştur.
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>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">
<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">
<a class="nav-link" href="#">Hizmetler</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
</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
-
<nav class="navbar navbar-expand-lg navbar-light bg-light">: Navbar bileşeninin başlangıcıdır.navbar-expand-lgsınıfı, navbar’ın büyük ekranlarda genişlemesini sağlar.navbar-lightvebg-light, açık bir renk temasını belirtir. -
<a class="navbar-brand" href="#">Logo</a>: Navbar'ın sol tarafında yer alan marka veya logo bağlantısıdır. -
<button class="navbar-toggler">: Mobil cihazlarda navbar'ı açıp kapatmak için kullanılan bir butondur. Tıklandığında menüyü gösterir. -
<div class="collapse navbar-collapse" id="navbarNav">: Navbar bağlantılarını kapsayan bir bölüm. Bu bölüm, mobil görünümde kapalı olarak başlar ve butona tıklandığında açılır. -
<ul class="navbar-nav">: Navbar bağlantılarının listesini tanımlar.nav-itemsınıfı, her bir bağlantı öğesini tanımlar.
Önemli Notlar
- Bootstrap, navbar’ın görünümünü otomatik olarak yönetir. Ancak, özel tasarım ihtiyaçları için CSS ile daha fazla özelleştirme yapabilirsiniz.
- Navbar'ı kullanırken, sayfanın üst kısmına sabit bir konumda yerleştirmek isterseniz,
fixed-topveyasticky-topsınıflarını kullanabilirsiniz.
Bootstrap Navbar, web sitenizin gezinme yapısını oluşturmak için kullanışlı bir araçtır. Duyarlı yapısı sayesinde, tüm cihazlarda etkili bir kullanıcı deneyimi sunar ve sayfanızın profesyonel bir görünüm kazanmasına yardımcı olur.