Bootstrap Bileşenler Placeholder
Bootstrap Placeholder, yüklenmekte olan içerikler için yer tutucu metin veya görsel sağlar. Genellikle, bir sayfa veya bileşen içindeki içerik henüz yüklenmediğinde kullanıcıya görsel bir gösterim sunmak için kullanılır. Bu özellik, kullanıcı deneyimini geliştirmek ve sayfa yüklenirken içeriklerin düzenli görünmesini sağlamak için faydalıdır.
Bootstrap Placeholder Özellikleri
- Yükleme Durumunu Gösterme: Kullanıcılara içerik yüklenirken ne bekleyeceklerini gösterir.
- Duyarlı Tasarım: Mobil ve masaüstü cihazlarda uygun bir görünüm sağlar.
- Esnek Kullanım: Metin veya görsel içerik için kullanılabilir.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak bir Placeholder örneği verilmiştir. Bu örnekte, bir yükleme durumu simüle edilmiştir.
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 Placeholder Örneği</title> </head> <body> <div class="container mt-5"> <h2>Bootstrap Placeholder Örneği</h2> <div class="placeholder-glow"> <div class="placeholder col-12"> </div> <div class="placeholder col-8"> </div> <div class="placeholder col-4"> </div> </div> </div> <style> .placeholder { background-color: #e0e0e0; border-radius: 0.25rem; } .placeholder-glow { animation: glow 1.5s infinite alternate; } @keyframes glow { 0% { background-color: #e0e0e0; } 100% { background-color: #f0f0f0; } } </style> <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
-
Placeholder Yapısı:
-
<div class="placeholder-glow">: Placeholder içeriği için bir kapsayıcı. Bu sınıf, placeholder'ların parlamasını sağlamak için kullanılır. -
<div class="placeholder">: Her bir yer tutucu için kullanılır. Bu sınıf, yer tutucu görseller veya metinler oluşturur.
-
-
CSS Stilleri:
-
background-color: #e0e0e0;: Placeholder'ın arka plan rengini ayarlar. -
border-radius: 0.25rem;: Kenarların yuvarlaklığını ayarlar. -
animation: glow 1.5s infinite alternate;: Placeholder'ın parlamasını sağlayan animasyonu tanımlar.
-
Önemli Notlar
- Bootstrap Placeholder, içerik yüklenirken kullanıcıya bekleme süresini daha kabul edilebilir hale getirir.
- Kullanıcı deneyimini artırmak için yer tutucuların nasıl göründüğünü düşünmek önemlidir; görünüm, sayfanın genel estetiği ile uyumlu olmalıdır.
Bootstrap Placeholder, sayfanın içerik yüklenmesi sırasında kullanıcıların deneyimlerini iyileştirmek için etkili bir bileşendir. İçerik yüklenirken sayfanın daha düzenli ve estetik görünmesini 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 Placeholder 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!