Bootstrap Bileşenler Popovers
Bootstrap Popover, kullanıcı etkileşimi sırasında daha fazla bilgi veya içerik sağlamak için kullanılan küçük bilgi baloncuklarıdır. Genellikle, bir öğeye tıklanarak veya üzerine gelindiğinde açılır ve ek bilgiler sunar. Popover'lar, formlar, düğmeler veya bağlantılar gibi çeşitli bileşenlerle kullanılabilir.
Bootstrap Popover Özellikleri
- Bilgi Sunumu: Kullanıcılara belirli bir öğe hakkında ek bilgi verir.
- Duyarlı Tasarım: Mobil ve masaüstü cihazlarda iyi bir kullanıcı deneyimi sunar.
- Farklı Konumlar: Popover'lar, yukarıda, aşağıda, sağda veya solda açılabilir.
- Kullanıcı Etkileşimi: Tıklama, fare ile üzerine gelme gibi kullanıcı etkileşimlerine dayalı olarak açılabilir.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak basit bir Popover örneği verilmiştir. Bu örnek, bir düğmeye tıklanarak bilgi balonunun açılmasını sağlamaktadı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 Popover Örneği</title> </head> <body> <div class="container mt-5"> <h2>Bootstrap Popover Örneği</h2> <button type="button" class="btn btn-secondary" data-bs-toggle="popover" title="Başlık" data-bs-content="Bu, popover içeriktir."> Bilgi Al </button> </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> <script> $(function ( ) { // Popover'ı başlat $('[data-bs-toggle="popover"]').popover(); }); </script> </body> </html> Açıklama
-
Popover Yapısı:
-
<button>: Popover'ın tetikleyicisi olan düğme.data-bs-toggle="popover"özelliği, bu düğmeye tıklandığında popover'ın açılacağını belirtir. -
title: Popover'ın üst kısmında gösterilecek başlık. -
data-bs-content: Popover'ın içinde gösterilecek içerik. Bu, kullanıcıya ek bilgi sağlar.
-
-
JavaScript Kodu:
-
$(function () { ... });: Sayfa yüklendiğinde çalışacak bir jQuery işlevi. Burada, popover'ı başlatmak için kullanılır.
-
Önemli Notlar
- Popover'lar, kullanıcıların belirli bir öğe hakkında daha fazla bilgi almasına olanak tanır, bu da kullanıcı deneyimini artırabilir.
- Popover'ın açılma konumunu ayarlamak için
data-bs-placementözelliğini kullanabilirsiniz. Örneğin,data-bs-placement="right"ile sağda açılmasını sağlayabilirsiniz. - Popover'lar, gerektiğinde kapatılabilir. Kullanıcı popover'a tıkladığında veya sayfanın dışına tıkladığında otomatik olarak kapanabilir.
Bootstrap Popover, kullanıcıların ihtiyaç duyduğu ek bilgileri sağlamanın etkili bir yoludur. Kullanıcı arayüzünü daha etkileşimli hale getirir ve kullanıcı deneyimini geliştirir.
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 Popovers 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!