Bootstrap'ta Card 3 bileşeni, kullanıcı arayüzü tasarımında esneklik ve estetik sunan daha karmaşık kart yapılarıdır. Kartlar, bilgi sunmak için çok yönlü bir araçtır ve birçok farklı bileşen ile birleştirilebilir. Bu sürümde, kartları daha ilgi çekici hale getirmek için daha fazla özelleştirme ve etkileşim sunulmaktadır.
1. Gelişmiş Kart Yapısı
Bootstrap Card 3, daha fazla stil ve yapılandırma seçeneği ile birlikte gelir. Bu yapıyı kullanarak daha karmaşık içerik düzenleri oluşturabilirsiniz.
Temel Yapı
Aşağıdaki örnekte, daha detaylı bir kart yapısı gösterilmektedir:
<!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 3 Ö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">Gelişmiş Kart Başlığı</h5>
<p class="card-text">Bu kartın içeriği daha karmaşık bilgiler sunar.</p>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Ayrıntılar</button>
</div>
<div class="card-footer text-muted">
Son Güncelleme: 1 gün önce
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Kart Ayrıntıları</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
Burada kartın ayrıntılı bilgileri yer alır.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>
<button type="button" class="btn btn-primary">Kaydet</button>
</div>
</div>
</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>
2. Kartın Bileşenleri
Bu örnekte, kart bileşenleri aşağıdaki gibidir:
-
Görsel: Kartın üst kısmında bulunan bir resim (
card-img-top). -
Başlık ve Metin: Kartın başlığı (
card-title) ve açıklaması (card-text). -
Buton: Modal açmak için kullanılan bir buton (
btn btn-primary). - Modal: Kullanıcıya daha fazla bilgi sağlamak için bir modal içerir.
-
Alt Bilgi: Kartın alt kısmında güncelleme bilgisi bulunur (
card-footer).
3. Modal Kullanımı
Kullanıcı karttaki "Ayrıntılar" butonuna tıkladığında, modal penceresi açılır. Modal, daha fazla bilgi vermek veya kullanıcıdan bilgi almak için kullanılabilir. Modal'ın temel yapısı:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Başlığı</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
Modal içeriği burada yer alır.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>
<button type="button" class="btn btn-primary">Kaydet</button>
</div>
</div>
</div>
</div>
4. Kartı Özelleştirme
Kartlarınızı CSS ile özelleştirmek için ek stiller ekleyebilirsiniz. Örneğin, kartın görünümünü geliştirmek için gölgeler ve kenar yuvarlamaları kullanabilirsiniz:
.card {
margin-bottom: 20px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
5. Kart Grupları ile Kullanım
Kartları birden fazla grupta kullanarak düzen oluşturabilirsiniz. İşte yan yana yerleştirilmiş kartların örneği:
<div class="row mt-5">
<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>
6. Kartta İkonlar ve Diğer İçerikler
Kullanıcı arayüzünü daha etkileşimli hale getirmek için ikonlar eklemek faydalı olabilir. Font Awesome veya benzeri bir kütüphane kullanarak kart içeriğine ikonlar ekleyebilirsiniz:
<i class="fas fa-check-circle">
</i> Onaylı
7. Örnek: Birden Fazla Gelişmiş Kart
Aşağıda birden fazla gelişmiş kart örneği verilmiştir:
<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 kartın içeriği, kullanıcıya bilgi sunar.</p>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">Ayrıntılar</button>
</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 kartın içeriği, daha fazla bilgi verir.</p>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal2">Ayrıntılar</button>
</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 kartın içeriği, kullanıcılara farklı bilgiler sunar.</p>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal3">Ayrıntılar</button>
</div>
</div>
</div>
</div>
</div>
8. Özet
Bootstrap Card 3 bileşeni, kullanıcı arayüzünüzü zenginleştirmek ve bilgi sunumunu etkili hale getirmek için güçlü bir araçtır. Kartlar, başlıklar, metinler, görseller, butonlar ve modallar ile zenginleştirilebilir. Daha fazla özelleştirme ve etkileşim için CSS ve JavaScript kullanarak kartlarınızı geliştirebilirsiniz. Daha fazla bilgi ve detaylar için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.