Bootstrap 5 Kart

Seçmeli ders

Kurs önerileri:

kart

Bootstrap 5'teki kart, etrafındaki içerikle bazı iç kenar boşluklarına sahip kenarlı bir çerçeve. Bu, üstbilgi, altbilgi, içerik, renkler gibi seçenekleri içerir. bir temel kart .card .card-body sınıflarıyla oluşturulmuş, karttaki içerikte bir

Örnek

Herhangi bir bağlantıya mavi ve fırlama etkisi eklemek için sınıf
  <div class="card-body">Temel kart</div>
</div>

Kişisel Deneyim

Üstbilgi ve altbilgi

.card-header başlık eklemek için sınıfı kullanın:.card-footer Altbilgi eklemek için sınıfı kullanın:

Örnek

Herhangi bir bağlantıya mavi ve fırlama etkisi eklemek için sınıf
  <div class="card-header">Üstbilgi</div>
  <div class="card-body">İçerik</div>
  <div class="card-footer">Altbilgi</div>
</div>

Kişisel Deneyim

Bağlam kartı

Kartın arka plan rengini eklemek için, bağlam sınıflarını kullanın:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Örnek

Kişisel Deneyim

başlık, metin ve bağlantı

lütfen .card-title kart başlığını herhangi bir başlık elementine ekleyin. Eğer Sınıfı kaldırmak için kullanılır elementi .card-body Son alt element (veya tek element) ise .card-text .card-text Sınıfı kaldırmak için kullanılır <p>öğesinin alt kenar marjı. .card-link

Örnek

Herhangi bir bağlantıya mavi ve fırlama etkisi eklemek için sınıf
  <div class="card-body">
    <div class="card">
    <h4 class="card-title">Kart Başlığı</h4>
    <p class="card-text">Bazı örnek metin. Bazı örnek metin.</p>
    <a href="#" class="card-link">Kart bağlantısı</a>
  </div>
</div>

Kişisel Deneyim

<a href="#" class="card-link">Başka bir bağlantı</a>

Kart görseli .card-img-top veya .card-img-bottom Eklenecek <img>Görseli kartın üstüne veya altına yerleştirebilirsiniz.

Dikkat edin, .card-body dışında görseli tam genişliğe geçirmek için ekledik:

Örnek

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Kart resmi">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates bir programcı ve mühendistir. Bazı örnek metin. Bazı örnek metin.</p>
    <a href="#" class="btn btn-primary">Kişisel Profili Görüntüle</a>
  </div>
</div>

Kişisel Deneyim

Kart görsel katmanı

Görseli kart arka planına dönüştürmek ve kullanmak için .card-img-overlay Metni görsel üzerine ekleyin:

Örnek

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Kart resmi">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bazı örnek metin. Bazı örnek metin.</p>
    <a href="#" class="btn btn-primary">Kişisel Profili Görüntüle</a>
  </div>
</div>

Kişisel Deneyim