Önyükleme 4 Kart
kartlar
Bootstrap 4'teki bir kart, içeriğinin etrafında bir miktar dolgu bulunan kenarlıklı bir kutudur. Üstbilgiler, altbilgiler, içerik, renkler vb. için seçenekler içerir.
Temel Kart
Sınıfla birlikte temel bir kart oluşturulur .cardve kartın içindeki içeriğin bir .card-bodysınıfı vardır:
Örnek
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Bootstrap 3'e aşinaysanız, kartlar eski panellerin, kuyuların ve küçük resimlerin yerini alır.
Başlık ve altbilgi
Sınıf .card-header, karta bir başlık ekler ve .card-footersınıf, karta bir alt bilgi ekler:
Örnek
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Bağlamsal Kartlar
Karta bir arka plan rengi eklemek için bağlamsal sınıfları ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkve .bg-light.
Örnek
Başlıklar, metin ve bağlantılar
.card-titleHerhangi bir başlık öğesine kart başlıkları eklemek için kullanın . Sınıf .card-text, içindeki son çocuk (veya tek) ise, <p> öğesinin alt kenar boşluklarını kaldırmak için kullanılır .card-body. Sınıf .card-link, herhangi bir bağlantıya mavi bir renk ve üzerine gelme efekti ekler.
Örnek
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Kart Resimleri
Görüntüyü kartın içine veya altına yerleştirmek için veya öğesine .card-img-topekleyin . Tüm genişliğe yayılacak şekilde resmin dışına eklediğimizi unutmayın :.card-img-bottom
<img>.card-body
Örnek
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
gerilmiş bağlantı
Sınıfı kartın içindeki bir bağlantıya ekleyin ve .stretched-linktüm kartı tıklanabilir ve üzerine gelinebilir hale getirecektir (kart bir bağlantı görevi görecektir):
Örnek
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Kart Görüntü Bindirmeleri
Bir resmi kart arka planına çevirin ve resmin .card-img-overlay
üstüne metin eklemek için kullanın:
Örnek
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Kart Sütunları
İlk kartın içindeki bazı metinler
İkinci kartın içindeki bazı metinler
Üçüncü kartın içindeki bazı metinler
Dördüncü kartın içindeki bazı metinler
Beşinci kartın içindeki bazı metinler
Altıncı kartın içindeki bazı metinler
Sınıf .card-columns, duvar benzeri bir kart ızgarası oluşturur (pinterest gibi). Daha fazla kart yerleştirdikçe düzen otomatik olarak ayarlanacaktır.
Not: Kartlar, küçük ekranlarda (576 pikselden küçük) dikey olarak görüntülenir:
Örnek
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
Kağıt destesi
İlk kartın içindeki bazı metinler
Yüksekliği artırmak için biraz daha metin
Yüksekliği artırmak için biraz daha metin
Yüksekliği artırmak için biraz daha metin
İkinci kartın içindeki bazı metinler
Üçüncü kartın içindeki bazı metinler
Dördüncü kartın içindeki bazı metinler
Sınıf , eşit yükseklik ve genişliğe.card-deck sahip bir kart ızgarası oluşturur . Daha fazla kart yerleştirdikçe düzen otomatik olarak ayarlanacaktır.
Not: Kartlar, küçük ekranlarda (576 pikselden küçük) dikey olarak görüntülenir:
Örnek
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
Kart Grubu
İlk kartın içindeki bazı metinler
Yüksekliği artırmak için biraz daha metin
Yüksekliği artırmak için biraz daha metin
Yüksekliği artırmak için biraz daha metin
İkinci kartın içindeki bazı metinler
Üçüncü kartın içindeki bazı metinler
Dördüncü kartın içindeki bazı metinler
Sınıf .card-groupbenzer .card-deck. Tek fark, .card-groupsınıfın her kart arasındaki sol ve sağ kenar boşluklarını kaldırmasıdır.
Not: Kartlar, üst ve alt kenar boşluklarıyla birlikte küçük ekranlarda (576 pikselden az) dikey olarak görüntülenir :
Örnek
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>