Bootstrap’ta Card bileşeni, içeriklerinizi düzenlemek ve şık bir şekilde sunmak için kullanılan çok yönlü bir yapıdır. Kartlar, başlıklar, metin, görseller, butonlar ve diğer içerik türlerini içerebilen kutulardır. Bootstrap kartları, genellikle kullanıcı arayüzlerinde bilgi gruplamak için kullanılır ve özelleştirme imkanları ile dikkat çeker.
1. Temel Yapı
Bootstrap kartı oluşturmak için, card sınıfını kullanmanız yeterlidir. İşte temel bir kart yapısı:
<div class="card">
<img src="image.jpg" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Kart Başlığı</h5>
<p class="card-text">Bu kartın içeriği burada yer alır.</p>
<a href="#" class="btn btn-primary">Butona Tıkla</a>
</div>
</div>
2. Kart Bileşenleri
Kartlar genellikle aşağıdaki bileşenlerden oluşur:
-
card-img-top: Kartın üst kısmında bir resim görüntülemek için kullanılır. -
card-body: Kartın içeriğini (başlık, metin, buton) tutan alan. -
card-title: Kart başlığı. -
card-text: Kart içeriği. -
btn: Kartta bulunan buton.
3. Kart Örnekleri
Basit Kart
Aşağıda basit bir kart örneği bulunmaktadır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Kart Örneği</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Kart resmi">
<div class="card-body">
<h5 class="card-title">Başlık</h5>
<p class="card-text">Bu, kartın içeriğidir. Burada kısa bir açıklama yer alır.</p>
<a href="#" class="btn btn-primary">Butona Tıkla</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.min.js">
</script>
</body>
</html>
4. Kart Grupları
Birden fazla kartı bir arada kullanarak bir kart grubu oluşturabilirsiniz. Bu, aynı türdeki içerikleri gruplamak için yararlıdır:
<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Kart resmi">
<div class="card-body">
<h5 class="card-title">Kart 1</h5>
<p class="card-text">Kart 1 içeriği burada yer alır.</p>
<a href="#" class="btn btn-primary">Buton</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Kart resmi">
<div class="card-body">
<h5 class="card-title">Kart 2</h5>
<p class="card-text">Kart 2 içeriği burada yer alır.</p>
<a href="#" class="btn btn-primary">Buton</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Kart resmi">
<div class="card-body">
<h5 class="card-title">Kart 3</h5>
<p class="card-text">Kart 3 içeriği burada yer alır.</p>
<a href="#" class="btn btn-primary">Buton</a>
</div>
</div>
</div>
</div>
</div>
5. Kartların Özelleştirilmesi
Bootstrap kartları, CSS ile özelleştirilebilir. Örneğin, arka plan rengi, kenar boşlukları veya gölgeler gibi stiller ekleyebilirsiniz:
.card {
margin-bottom: 20px;
border-radius: 10px;
}
6. Kart Üst Bilgisi ve Alt Bilgisi
Kartların üst ve alt bilgileri eklemek için card-header ve card-footer sınıflarını kullanabilirsiniz:
<div class="card">
<div class="card-header">
Üst Bilgi
</div>
<div class="card-body">
<h5 class="card-title">Başlık</h5>
<p class="card-text">Bu, kartın içeriğidir.</p>
</div>
<div class="card-footer">
Alt Bilgi
</div>
</div>
7. Örnek: Kart Üst Bilgisi ve Alt Bilgisi ile
Aşağıda, üst ve alt bilgileri olan bir kart örneği verilmiştir:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Kart Üst ve Alt Bilgisi Örneği</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="card" style="width: 18rem;">
<div class="card-header">
Üst Bilgi
</div>
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Kart resmi">
<div class="card-body">
<h5 class="card-title">Başlık</h5>
<p class="card-text">Kartın içeriği burada yer alır.</p>
<a href="#" class="btn btn-primary">Butona Tıkla</a>
</div>
<div class="card-footer">
Alt Bilgi
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.min.js">
</script>
</body>
</html>
8. Özet
Bootstrap kart bileşeni, içeriklerinizi düzenlemek ve şık bir şekilde sunmak için etkili bir araçtır. Kartlar, başlıklar, metinler, görseller ve butonlarla birlikte özelleştirilebilir. Kartları gruplama, üst ve alt bilgileri ekleme gibi özellikler sayesinde kullanıcı arayüzünüzü daha düzenli ve kullanıcı dostu hale getirebilirsiniz. Daha fazla bilgi ve detaylar için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.