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

Bootstrap Bileşenler Nav Tab

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

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

  1. Sekme Görünümü: İçerikleri sekmeler şeklinde düzenler, böylece her bir sekme farklı bir içerik alanını temsil eder.
  2. Duyarlı Tasarım: Mobil ve masaüstü cihazlarda uygun bir görünüm sunar.
  3. 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. nav ve nav-tabs sı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. fade sınıfı, içerik değişimini yumuşak bir geçişle gerçekleştirir. show active sı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.

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 Nav Tab 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 2 Sonraki Ders Bootstrap Bileşenler Offcanvas

Topluluk Yorumları (0)

Ders Hakkında Yorum Yap veya Soru Sor

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