Bootstrap Nav Tabs, kullanıcıların içerikler arasında geçiş yapmasını sağlayan ve sekme görünümünde düzenlenmiş bir navigasyon bileşenidir. Bu özellik, özellikle birden fazla içerik alanını organize etmek ve kullanıcıların hızlı bir şekilde farklı bölümlere geçiş yapmasını sağlamak için kullanılır.
Bootstrap Nav Tabs Özellikleri
- Sekme Görünümü: İçerikleri sekmeler şeklinde düzenler, böylece her bir sekme farklı bir içerik alanını temsil eder.
- Duyarlı Tasarım: Mobil ve masaüstü cihazlarda uygun bir görünüm sunar.
- Dinamik İçerik: JavaScript ile dinamik içerik yüklemeye veya sekmeler arasında geçiş yapmaya olanak tanır.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak basit bir Nav Tab örneği verilmiştir. Bu örnekte, üç sekme ile kullanıcıdan bilgi almak için kullanılacak bir düzen 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 Nav Tabs Örneği</title>
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap Nav Tabs Örneği</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Anasayfa</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Hakkında</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">İletişim</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p>Anasayfa içeriği burada yer alacak.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p>Hakkında içeriği burada yer alacak.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p>İletişim içeriği burada yer alacak.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Açıklama
-
Nav Tabs Yapısı:
-
<ul class="nav nav-tabs">: Sekmeleri tanımlayan bir liste.navvenav-tabssınıfları, sekmelerin görünümünü ve düzenini ayarlar. -
<li class="nav-item">: Her bir sekmeyi tanımlar.role="presentation"özelliği, erişilebilirliği artırır. -
<a class="nav-link">: Sekme bağlantılarını tanımlar.data-bs-toggle="tab"özelliği, tıklandığında ilgili sekmenin içeriğini açar.
-
-
Tab Content Bölümü:
-
<div class="tab-content">: Sekmelerin içeriklerini kapsayan bölüm. -
<div class="tab-pane fade">: Her bir sekme içeriğini tanımlar.fadesınıfı, içerik değişimini yumuşak bir geçişle gerçekleştirir.show activesınıfı, başlangıçta hangi sekmenin aktif olduğunu belirtir.
-
Önemli Notlar
- Nav Tabs, kullanıcıların farklı içerikler arasında kolayca geçiş yapmalarını sağlar ve sayfa düzenini daha düzenli hale getirir.
- Bootstrap’ın JavaScript bileşenleri, sekmeler arası geçişin sorunsuz bir şekilde gerçekleşmesini sağlar.
- Nav Tabs kullanırken, içerikleri kullanıcıların ihtiyaçlarına göre özelleştirebilirsiniz.
Bu tür bir Bootstrap Nav Tabs bileşeni, web sitenizde kullanıcı deneyimini artırmak ve içeriklerinizi daha düzenli bir şekilde sunmak için etkili bir yoldur. Kullanıcılar, aradıkları bilgilere hızlıca ulaşabilirler.