Bootstrap Bileşenler Scrollspy
Bootstrap Scrollspy, uzun sayfalarda kullanıcıların hangi bölümde bulunduklarını göstermek için kullanılan bir bileşendir. Bu özellik, sayfa kaydırıldıkça belirli bölümlerin başlıklarını vurgular ve kullanıcıya hangi bölümde olduğunu anlaması için görsel bir geri bildirim sağlar. Genellikle, tek sayfalık uygulamalarda veya uzun içerikli sayfalarda kullanılır.
Bootstrap Scrollspy Özellikleri
- Otomatik Vurgulama: Kullanıcı sayfayı kaydırdıkça, belirli bölüm başlıkları otomatik olarak vurgulanır.
- Duyarlı Tasarım: Mobil ve masaüstü cihazlarda uyumlu bir görünüm sunar.
- Navigasyon Kolaylığı: Kullanıcılara sayfa içinde gezinme kolaylığı sağlar.
- Etkileşimli Kullanım: Kullanıcı, vurgulanan bölümlere tıklayarak o bölüme gidebilir.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak basit bir Scrollspy örneği verilmiştir. Bu örnekte, sayfa kaydırıldıkça belirli bölümlerin başlıkları vurgulanmaktadır.
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 Scrollspy Örneği</title> <style> body { position: relative; /* Scrollspy için gerekli */ } section { height: 600px; /* Bölümler için yükseklik ayarı */ padding: 20px; } </style> </head> <body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="70" tabindex="0"> <nav id="navbar-example" class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Scrollspy Örneği</a> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#section1">Bölüm 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">Bölüm 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Bölüm 3</a> </li> <li class="nav-item"> <a class="nav-link" href="#section4">Bölüm 4</a> </li> </ul> </nav> <div class="container mt-3"> <section id="section1" class="bg-light"> <h2>Bölüm 1</h2> <p>Bu bölümün içeriği burada yer alır.</p> </section> <section id="section2" class="bg-secondary text-white"> <h2>Bölüm 2</h2> <p>Bu bölümün içeriği burada yer alır.</p> </section> <section id="section3" class="bg-light"> <h2>Bölüm 3</h2> <p>Bu bölümün içeriği burada yer alır.</p> </section> <section id="section4" class="bg-secondary text-white"> <h2>Bölüm 4</h2> <p>Bu bölümün içeriği burada yer alır.</p> </section> </div> <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
-
Scrollspy Yapısı:
-
<body data-bs-spy="scroll" data-bs-target="#navbar-example">: Sayfanın kaydırılma olaylarını takip etmek için gerekli ayarlar.data-bs-target, hangi navigasyon çubuğunun takip edileceğini belirtir. -
<nav>: Scrollspy için kullanılacak navigasyon çubuğu. Bu çubuk, kullanıcı sayfayı kaydırdıkça hangi bölümün aktif olduğunu gösterecektir. -
<section>: Her bölüm, Scrollspy'ın hangi bölümlerin vurgulanacağını belirlemesi içinidile tanımlanmıştır.
-
-
CSS Stilleri:
-
section { height: 600px; }: Her bölümün yüksekliği ayarlanmıştır. Bu, sayfada kaydırma yapılmasını sağlar. -
padding: Bölümler için içerik boşluğu ekler.
-
Önemli Notlar
- Scrollspy, kullanıcıların hangi bölümde bulunduklarını anlamalarına yardımcı olur, bu da uzun sayfalarda gezinmeyi kolaylaştırır.
- Offset Ayarı:
data-bs-offsetözelliği, başlıkların ne kadar yukarıda görünmesi gerektiğini belirler. Bu değer, sayfa kaydırıldığında hangi konumda vurgulamanın yapılacağını etkiler. - Erişilebilirlik: Scrollspy, erişilebilirlik açısından faydalıdır, çünkü kullanıcıların hangi bölümde olduklarını anlamalarına yardımcı olur.
Bootstrap Scrollspy, kullanıcı deneyimini artırmak için etkili bir yöntemdir ve uzun içeriklerin daha düzenli ve kullanıcı dostu bir şekilde sunulmasını sağlar.
Bu ders size yardımcı oldu mu? Puan verin!
Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.
Sıkça Sorulan Sorular (SSS)
Bu ders ve konuyla ilgili en çok merak edilenler
Bootstrap Bileşenler Scrollspy 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.
Topluluk Yorumları (0)
Ders Hakkında Yorum Yap veya Soru Sor
Henüz yorum yapılmamış. İlk yorumu siz yazın!