Bootstrap'ta Card 2 bileşeni, temel kart yapısının daha gelişmiş ve özelleştirilmiş bir örneğidir. Bu versiyon, kart içeriğini daha çekici hale getirmek için çeşitli stil ve yapılandırma seçenekleri sunar. İşte Card bileşeninin gelişmiş özellikleri ve nasıl kullanılacağına dair bilgiler.
1. Kart Özellikleri
Bootstrap kartları aşağıdaki gibi çeşitli bileşenleri içerebilir:
- Görsel (Image): Kartın üst kısmında veya içinde kullanılacak görsel.
- Başlık (Title): Kartın başlığı.
- Metin (Text): Kartın açıklama veya içerik kısmı.
- Butonlar (Buttons): Kullanıcı etkileşimi için butonlar.
- Liste veya Diğer İçerikler: Kartın içeriğini zenginleştirmek için listeler, tablolara veya diğer öğelere yer verebilirsiniz.
2. Gelişmiş Kart Yapısı
Aşağıdaki örnekte, kartın daha kapsamlı bir yapı ile nasıl oluşturulabileceğini görebilirsiniz:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Gelişmiş 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">Kart Başlığı</h5>
<p class="card-text">Bu kartın içeriği, kullanıcılara bilgi vermek amacıyla düzenlenmiştir.</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">Öğe 1</li>
<li class="list-group-item">Öğe 2</li>
<li class="list-group-item">Öğe 3</li>
</ul>
<a href="#" class="btn btn-primary mt-2">Devamını Oku</a>
</div>
<div class="card-footer text-muted">
Son Güncelleme: 3 gün önce
</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>
3. Kartın Bileşenleri
Yukarıdaki örnekte yer alan bileşenler:
-
Görsel:
card-img-topsınıfı ile kartın üst kısmında yer alır. -
Başlık ve Metin:
card-titlevecard-textsınıfları ile kartın içeriğinde kullanılır. -
Liste:
list-groupvelist-group-itemsınıfları ile kartın içeriğini zenginleştirmek için bir liste oluşturulur. -
Buton: Kullanıcı etkileşimi için
btnsınıfı ile bir buton eklenir. -
Alt Bilgi:
card-footersınıfı ile kartın altında yer alan bilgi.
4. Kartların Düzenlenmesi
Kartların düzenlenmesi için Bootstrap’ın grid sistemi kullanılabilir. Kartları yan yana yerleştirerek bir düzen oluşturabilirsiniz:
<div class="row">
<div class="col-md-4">
<!-- Kart 1 -->
</div>
<div class="col-md-4">
<!-- Kart 2 -->
</div>
<div class="col-md-4">
<!-- Kart 3 -->
</div>
</div>
5. Kart Grupları ile Örnek
Aşağıda, birden fazla kartın yan yana yerleştirildiği bir örnek bulunmaktadı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 1">
<div class="card-body">
<h5 class="card-title">Kart 1</h5>
<p class="card-text">Bu, ilk kartın içeriğidir.</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 2">
<div class="card-body">
<h5 class="card-title">Kart 2</h5>
<p class="card-text">Bu, ikinci kartın içeriğidir.</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 3">
<div class="card-body">
<h5 class="card-title">Kart 3</h5>
<p class="card-text">Bu, üçüncü kartın içeriğidir.</p>
<a href="#" class="btn btn-primary">Buton</a>
</div>
</div>
</div>
</div>
</div>
6. Kartların Özelleştirilmesi
Kartların stillerini CSS ile değiştirebilirsiniz. Örneğin, arka plan rengi, kenar boşlukları, gölgeler veya yazı tiplerini özelleştirmek için özel stiller ekleyebilirsiniz.
.card {
margin-bottom: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
7. Kart Grubunda Çeşitli İkonlar ve İçerikler
Kartlarınızı daha etkileşimli hale getirmek için ikonlar veya diğer içerik türleri ekleyebilirsiniz. Örneğin, Font Awesome kullanarak kart içindeki butonlara ikon eklemek:
<a href="#" class="btn btn-primary">
<i class="fas fa-info-circle">
</i> Bilgi Al
</a>
8. Özet
Bootstrap Card 2 bileşeni, içeriklerinizi düzenlemek ve sunmak için etkili bir yapı sağlar. Kartlar, başlıklar, metinler, görseller ve butonlar ile zenginleştirilebilir. Ayrıca kart grupları ve liste yapıları ile kullanıcı arayüzünüzü daha kullanıcı dostu hale getirebilirsiniz. Daha fazla bilgi ve detaylar için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.