Bootstrap 4 Dersleri



Kartlar

Kartlar (Cards)

Bootstrap 4'teki bir kart, esnek ve genişletilebilir kenarlıklı bir kutudur. Üstbilgiler, altbilgiler, içerik, renkler vb. için seçenekler içerir.

Basit Kart

Bir taşıyıcı ile ( Örnek: <div> ... </div> ) .card sınıfı ile temel bir kart oluşturulur. Kartın içeriğini kapsayan taşıyıcının .card-body sınıfı vardır.


Basit Kart örneği
<div class="card">
  <div class="card-body">Basit kart örneği</div>
</div>

Bir Kartın Yapısı

.card - Bir kart oluşturur. <div> başlık etiketleri kullanılabilir.
.card-header - Bir kart başlığı oluşturur. <div> başlık etiketleri kullanılabilir.
.card-body - Bir kart gövdesi oluşturur. <div> başlık etiketleri kullanılabilir.
.card-footer - Bir kart altlığı oluşturur. <div> başlık etiketleri kullanılabilir.
.card-title - Kart içinde bir başlık oluşturur. <h*> başlık etiketleri kullanılabilir.
.card-subtitle - Kart içinde bir alt başlık oluşturur. <h*> başlık etiketleri kullanılabilir.
.card-text - Kart içine metin eklemek için kullanılır. <p> etiketi kullanılabilir.
.card-link - Kart içine bağlantı eklemek için kullanılır. <a> etiketi kullanılabilir.

Kart Başlığı.card-header
.card-body
Kart Gövdesi Başlığı .card-title
Kart Alt Başlığı.card-subtitle

Kart içeriği metni .card-text

Kart Linki 1 Kart Linki 2 .card-link
<div class="card">
  <div class="card-header">Kart Başlığı</div>
  <div class="card-body">
    <h6 class="card-title">Kart Gövdesi Başlığı</h6>
    <h6 class="card-subtitle">Kart Alt Başlığı</h6>
    <p class="card-text">Kart içeriği metni</p>
    <a href="#" class="card-link">Kart Linki 1</a>
    <a href="#" class="card-link">Kart Linki 2</a>
  </div>
  <div class="card-footer">Kart Altlığı</div>
</div>

Kartlarda Resim

Kartlarda resimlerle çalışmak için birkaç seçenek bulunur. Resim kartın üst veya alt tarafına yerleştirilebildiği gibi üst üste bindirmede yapılabilir.

Resmi kartın üst tarafına yerleştirmek için bir <img> etiketinde .card-img-top sınıfı, resmi kartın alt tarafına yerleştirmek için .card-img-bottom sınıfı kullanılabilir.

<img> etiketi .card sınıflı etiketi içinde fakat .card-body sınıfı olan etiketi içine yerleştirilmelidir. Kısaca <img> etiketi .card-body sınıfı olan etiketi içine yerleştirilmelidir


Resim ögesi kartın üst tarafında gösterilebilir.
Nasıl Yapılır?
<img> etiketi .card sınıflı kapsayıcı etiketi içinde, .card-body sınıfı olan etiketin dışına yerleştirilmelidir.
<img> etiketinde .card-img-top sınıfı kullanılır.
Profil Resmi

Bebişko

Ayrıntılar için aşağıdaki düğmeyi tıklayın.

Profili Gör
<div class="card">
  <img src="resim/avatare.svg" alt="Profil Resmi" class="card-img-top">
  <div class="card-body">
   <h4 class="card-title">Şükrü Kaya</h4>
   <p class="card-text">Bilgileri görmek için aşağıdaki düğmeyi tıklayın.</p>
   <a href="#" class="btn btn-success">Profili Gör</a>
  </div>
</div>
Resim ögesi kartın alt tarafında da gösterilebilir.
Nasıl Yapılır?
<img> etiketi .card sınıflı kapsayıcı etiketi içinde, .card-body sınıfı olan etiketin dışına yerleştirilmelidir.
<img> etiketinde .card-img-bottom sınıfı kullanılır.

Bebiş

Ayrıntılar için aşağıdaki düğmeyi tıklayın.

Profili Gör
Profil Resmi
<div class="card">
  <div class="card-body">
   <h4 class="card-title">Şükrü Kaya</h4>
   <p class="card-text">Bilgileri görmek için aşağıdaki düğmeyi tıklayın.</p>
   <a href="#" class="btn btn-success">Profili Gör</a>
  </div>
  <img src="resim/avatark.svg" alt="Profil Resmi" class="card-img-bottom">
</div>
Kart içeriği ile resim üst üste bindirilebilir.
Nasıl Yapılır?
.card-body sınıfı yerine içerik taşıyıcı etikette .card-img-overlay sınıfı kullanılır.
<img> etiketine .card-img-top sınıfı kullanılır.

Şükrü Kaya

Bilgileri görmek için aşağıdaki düğmeyi tıklayın.

Profili Gör
Profil Resmi
<div class="card img-fluid">
  <div class="card-img-overlay">
   <h4 class="card-title">Şükrü Kaya</h4>
   <p class="card-text">Bilgileri görmek için aşağıdaki düğmeyi tıklayın.</p>
   <a href="#" class="btn btn-success">Profili Gör</a>
  </div>
  <img src="resim/avatar.png" alt="Profil Resmi" class="card-img-top">
</div>
Bir kart tamamen tıklanabilir bağlantı (link) haline getirilebilir.
Nasıl Yapılır?
Tıklanabilir bir bağlantıda ek olarak .stretched-link sınıfı kullanılır.
Profil Resmi

İhtiyar

Ayrıntılar için aşağıdaki düğmeyi tıklayın.

Profili Gör
<div class="card bg-light">
  <img src="resim/avatar-icon.jpg" alt="Profil Resmi" class="card-img-top">
  <div class="card-body">
   <h4 class="card-title">Şükrü Kaya</h4>
   <p class="card-text">Bilgileri görmek için aşağıdaki düğmeyi tıklayın.</p>
   <a href="#" class="btn btn-success stretched-link">Profili Gör</a>
  </div>
</div>

Kartlarda Sütun Düzeni Yapma (.card-columns) ve Renklendirme (.bg-*)


Kartlarda Sütun Düzeni Yapma

.card-column sınıfı, kartların otomatik düzenlendiği bir kart sütunu düzeni oluşturmak için kullanılır. Daha fazla kart ekledikçe, düzen otomatik olarak ayarlanır. Kartların sıralaması yukarıdan aşağıya olacak şekilde sütunlar otomatik düzenlenir.

Nasıl Yapılır?
Tüm kartlar bir taşıyıcı içine alınır ve bu taşıyıcıda .card-column sınıfı kullanılır.


Kart Renklendirme

Kartlarda arka plan rengini eklemek için Bootstrap 4 arkaplan renk sınıfları kullanılır. Bu sınıflar .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark ve .bg-light 'dır.

Nasıl Yapılır?
.card sınıfı tanımlanmış olan taşıyıcıya .card sınıfı yanında .bg-* sınıflarından herhangi biri ile renk verilebilir. Böylece kartın tamamına bu renk uygulanır.
Eğer sadece kart başlığına yani .card-header sınıfı kullanlmış taşıyıcıya .bg-* renklerinden verilebilir.
Eğer sadece kart gövdesine yani .card-body sınıfı kullanlmış taşıyıcıya .bg-* renklerinden verilebilir.
Eğer sadece kart altlığına yani .card-footer sınıfı kullanlmış taşıyıcıya .bg-* renklerinden verilebilir.


Başlık
Standart Renklendirilmemiş Kart

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
.card-header sınıfı kullanılmış taşıyıcıya .bg-primary renk sınıfı kullanıldı.

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
.card-body sınıfı kullanılmış taşıyıcıya .bg-primary renk sınıfı kullanıldı.

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
.card-header sınıfı kullanılmış taşıyıcıya .bg-primary renk sınıfı kullanıldı.

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
Primary Kart - 1. Kart

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
Secondary Kart - 2. Kart

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
Danger Kart - 3. Kart

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
Success Kart - 4. Kart

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
Warning Kart - 5. Kart

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
Light Kart - 6. Kart

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
Info Kart - 7. Kart

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
Dark Kart - 8. Kart

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
White Kart - 9. Kart

.card-columns ile kartlar sütunlara dağıtılır.

Başlık
Transparent Kart - 10. Kart

.card-columns ile kartlar sütunlara dağıtılır.

Kartları Desteleme (.card-deck)

.card-deck sınıfı eşit yükseklikte ve genişlikte bir kart düzeni oluşturur ve kartları desteler. Daha fazla kart eklendikçe, düzen otomatik olarak ayarlanır.

Nasıl Yapılır?

Tüm kartlar bir taşıyıcı içine alınır ve bu taşıyıcıda .card-deck sınıfı kullanıllır.


Başlık
Primary Kart - 1. Kart
.card-deck ile

Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır
Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır
Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır
Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır

Başlık
Secondary Kart - 2. Kart
.card-deck ile

Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır

Başlık
Danger Kart - 3. Kart
.card-deck ile

Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır

Başlık
Danger Kart - 4. Kart
.card-deck ile

Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır

Kartları Gruplama (.card-group)

.card-group sınıfı .card-deck sınıfına benzer şekilde çalışır. eşit yükseklikte ve genişlikte bir kart düzeni oluşturur ve kartları desteler. Daha fazla kart eklendikçe, düzen otomatik olarak ayarlanır.
Tek fark, .card-group sınıfı her kart arasındaki sol ve sağ kenar boşluklarını kaldırır.

Nasıl Yapılır?

Tüm kartlar bir taşıyıcı içine alınır ve bu taşıyıcıda .card-group sınıfı kullanıllır.


Başlık
Primary Kart - 1. Kart
.card-group ile

Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır

Başlık
Secondary Kart - 2. Kart
.card-group ile

Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır
Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır
Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır
Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır

Başlık
Danger Kart - 3. Kart
.card-group ile

Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır

Başlık
Danger Kart - 4. Kart
.card-group ile

Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır