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.