Source

kartlar

Bootstrap kartları, birden çok değişken ve seçenek içeren esnek ve genişletilebilir bir içerik kapsayıcısı sağlar.

Hakkında

Kart , esnek ve genişletilebilir bir içerik kabıdır . Üstbilgi ve altbilgi seçenekleri, çok çeşitli içerik, bağlamsal arka plan renkleri ve güçlü görüntüleme seçenekleri içerir. Bootstrap 3'e aşinaysanız, kartlar eski panellerimizin, kuyuların ve küçük resimlerin yerini alır. Bu bileşenlere benzer işlevler, kartlar için değiştirici sınıflar olarak mevcuttur.

Örnek

Kartlar mümkün olduğunca az biçimlendirme ve stiller ile oluşturulur, ancak yine de bir ton kontrol ve özelleştirme sağlamayı başarır. Flexbox ile oluşturulmuş, kolay hizalama sunar ve diğer Bootstrap bileşenleriyle iyi bir şekilde karışır. marginVarsayılan olarak hayırları yoktur , bu nedenle gerektiğinde boşluk yardımcı programlarını kullanın .

Aşağıda, karma içerikli ve sabit genişlikte bir temel kart örneği verilmiştir. Kartların başlangıç ​​için sabit bir genişliği yoktur, bu nedenle doğal olarak ana öğesinin tüm genişliğini doldururlar. Bu, çeşitli boyutlandırma seçeneklerimizle kolayca özelleştirilebilir .

%100x180
Kart başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

Bir yere git
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

İçerik türleri

Kartlar, resimler, metinler, liste grupları, bağlantılar ve daha fazlası dahil olmak üzere çok çeşitli içeriği destekler. Aşağıda nelerin desteklendiğine dair örnekler verilmiştir.

Gövde

Bir kartın yapı taşı, .card-body. Bir kart içinde yastıklı bir bölüme ihtiyacınız olduğunda kullanın.

Bu, bir kart gövdesi içindeki bir metindir.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

.card-titleKart başlıkları bir <h*>etikete eklenerek kullanılır . Aynı şekilde linkler de .card-linkbir <a>etikete eklenerek yan yana eklenir ve yerleştirilir.

.card-subtitleAltyazılar bir <h*>etikete a eklenerek kullanılır . Öğeler ve öğeler bir öğeye yerleştirilirse .card-title, kart başlığı ve alt başlığı güzel bir şekilde hizalanır..card-subtitle.card-body

Kart başlığı
Kart altyazısı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

Kart bağlantısı Başka bir bağlantı
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Görüntüler

.card-img-topkartın üstüne bir resim yerleştirir. ile .card-textkarta metin eklenebilir. İçindeki metin .card-textayrıca standart HTML etiketleri ile biçimlendirilebilir.

Resim başlığı [100%x180]

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Liste grupları

Gömme liste grubuyla bir kartta içerik listeleri oluşturun.

  • cras justo odio
  • Dapibus ac tesisi
  • Vestibulum ve eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Öne çıkan
  • cras justo odio
  • Dapibus ac tesisi
  • Vestibulum ve eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Mutfak lavabosu

İhtiyacınız olan kartı oluşturmak için birden fazla içerik türünü karıştırıp eşleştirin veya her şeyi oraya atın. Aşağıda, tümü sabit genişlikli bir karta sarılmış görüntü stilleri, bloklar, metin stilleri ve bir liste grubu gösterilmiştir.

Resim başlığı [100%x180]
Kart başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

  • cras justo odio
  • Dapibus ac tesisi
  • Vestibulum ve eros
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Bir karta isteğe bağlı bir üst bilgi ve/veya alt bilgi ekleyin.

Öne çıkan
Özel başlık tedavisi

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Bir yere git
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

.card-headerKart başlıkları , <h*>öğelere eklenerek biçimlendirilebilir .

Öne çıkan
Özel başlık tedavisi

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Bir yere git
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Alıntı

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

Kaynak Başlığında ünlü biri
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Öne çıkan
Özel başlık tedavisi

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Bir yere git
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

boyutlandırma

Kartlar width, başlamak için belirli olmadığını varsayar, bu nedenle aksi belirtilmedikçe %100 geniş olacaklardır. Bunu özel CSS, ızgara sınıfları, ızgara Sass karışımları veya yardımcı programlarla gerektiği gibi değiştirebilirsiniz.

Izgara işaretlemesini kullanma

Izgarayı kullanarak kartları gerektiği gibi sütunlara ve satırlara sarın.

Özel başlık tedavisi

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Bir yere git
Özel başlık tedavisi

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Bir yere git
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

yardımcı programları kullanma

Bir kartın genişliğini hızlı bir şekilde ayarlamak için bir dizi mevcut boyutlandırma yardımcı programımızı kullanın .

Kart başlığı

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Buton
Kart başlığı

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Buton
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Özel CSS kullanma

Genişlik ayarlamak için stil sayfalarınızda veya satır içi stiller olarak özel CSS kullanın.

Özel başlık tedavisi

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Bir yere git
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Metin hizalama

Metin hizalama sınıflarımızla , herhangi bir kartın metin hizalamasını - bütününde veya belirli bölümlerinde - hızla değiştirebilirsiniz .

Özel başlık tedavisi

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Bir yere git
Özel başlık tedavisi

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Bir yere git
Özel başlık tedavisi

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Bir yere git
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bootstrap'in gezinme bileşenleriyle bir kartın başlığına (veya bloğuna) biraz gezinme ekleyin .

Özel başlık tedavisi

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Bir yere git
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Özel başlık tedavisi

Ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metin ile.

Bir yere git
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Görüntüler

Kartlar, resimlerle çalışmak için birkaç seçenek içerir. Bir kartın her iki ucuna da "görüntü kapakları" eklemek, görüntüleri kart içeriğiyle kaplamak veya görüntüyü bir karta gömmek arasından seçim yapın.

Resim büyük harf

Üstbilgi ve altbilgilere benzer şekilde, kartlarda üst ve alt "görüntü kapakları", yani bir kartın üstünde veya altında bulunan resimler bulunabilir.

%100x180
Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha geniş bir karttır. Bu içerik biraz daha uzun.

Son güncelleme 3 dakika önce

Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha geniş bir karttır. Bu içerik biraz daha uzun.

Son güncelleme 3 dakika önce

%100x180
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

Görüntü bindirmeleri

Bir resmi kart arka planına dönüştürün ve kartınızın metnini kaplayın. Resme bağlı olarak, ek stillere veya yardımcı programlara ihtiyacınız olabilir veya olmayabilir.

%100x270
Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha geniş bir karttır. Bu içerik biraz daha uzun.

Son güncelleme 3 dakika önce

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Kart stilleri

Kartlar, arka planlarını, kenarlıklarını ve rengini özelleştirmek için çeşitli seçenekler içerir.

Arka plan ve renk

Bir kartın görünümünü değiştirmek için metin ve arka plan yardımcı programlarını kullanın .

başlık
Birincil kart başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
İkincil kart başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Başarı kartı başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Tehlike kartı başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Uyarı kartı başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Bilgi kartı başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Hafif kart başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Karanlık kart başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Yardımcı teknolojilere anlam taşıma

Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .sr-onlysınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

Sınır

Yalnızca bir kartın rengini değiştirmek için kenarlık yardımcı programlarını kullanın . Aşağıda gösterildiği gibi, kart içeriğinin ana veya alt kümesine sınıflar border-colorkoyabileceğinizi unutmayın ..text-{color}.card

başlık
Birincil kart başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
İkincil kart başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Başarı kartı başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Tehlike kartı başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Uyarı kartı başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Bilgi kartı başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Hafif kart başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık
Karanlık kart başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins yardımcı programları

Ayrıca kart üstbilgisi ve altbilgisindeki kenarlıkları gerektiği gibi değiştirebilir ve hatta bunlarla background-colorkaldırabilirsiniz .bg-transparent.

başlık
Başarı kartı başlığı

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Kart düzeni

Bootstrap, içeriği kartlar içinde biçimlendirmeye ek olarak, bir dizi kart yerleştirmek için birkaç seçenek içerir. Şu an için bu düzen seçenekleri henüz yanıt vermiyor .

Kart grupları

Kartları eşit genişlik ve yükseklik sütunlarına sahip tek bir ekli öğe olarak oluşturmak için kart gruplarını kullanın. Kart grupları display: flex;, tek tip boyutlarını elde etmek için kullanır.

%100x180
Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha geniş bir karttır. Bu içerik biraz daha uzun.

Son güncelleme 3 dakika önce

%100x180
Kart başlığı

Bu kartın, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni vardır.

Son güncelleme 3 dakika önce

%100x180
Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha geniş bir karttır. Bu kart, eşit yükseklikteki eylemi gösteren ilkinden bile daha uzun içeriğe sahiptir.

Son güncelleme 3 dakika önce

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Altbilgili kart grupları kullanıldığında, içerikleri otomatik olarak sıralanır.

%100x180
Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha geniş bir karttır. Bu içerik biraz daha uzun.

%100x180
Kart başlığı

Bu kartın, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni vardır.

%100x180
Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha geniş bir karttır. Bu kart, eşit yükseklikteki eylemi gösteren ilkinden bile daha uzun içeriğe sahiptir.

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Kart desteleri

Birbirine bağlı olmayan eşit genişlikte ve yükseklikte kart setine mi ihtiyacınız var? Kart destelerini kullanın.

%100x200
Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha uzun bir karttır. Bu içerik biraz daha uzun.

Son güncelleme 3 dakika önce

%100x200
Kart başlığı

Bu kartın, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni vardır.

Son güncelleme 3 dakika önce

%100x200
Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha geniş bir karttır. Bu kart, eşit yükseklikteki eylemi gösteren ilkinden bile daha uzun içeriğe sahiptir.

Son güncelleme 3 dakika önce

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Tıpkı kart gruplarında olduğu gibi, destelerdeki kart altbilgileri otomatik olarak sıralanacaktır.

%100x180
Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha geniş bir karttır. Bu içerik biraz daha uzun.

%100x180
Kart başlığı

Bu kartın, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni vardır.

%100x180
Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha geniş bir karttır. Bu kart, eşit yükseklikteki eylemi gösteren ilkinden bile daha uzun içeriğe sahiptir.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Kart sütunları

Kartlar, içine sarılarak yalnızca CSS ile Duvar.card-columns benzeri sütunlar halinde düzenlenebilir . columnKartlar, daha kolay hizalama için flexbox yerine CSS özellikleriyle oluşturulmuştur. Kartlar yukarıdan aşağıya ve soldan sağa doğru sıralanır.

Önüne bak! Kart sütunları ile kilometreniz değişebilir. Kartların sütunlar arasında kırılmasını önlemek için onları henüz kurşun geçirmez bir çözüm değil display: inline-blockolarak ayarlamalıyız.column-break-inside: avoid

%100x160
Yeni bir satıra saran kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha uzun bir karttır. Bu içerik biraz daha uzun.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

Kaynak Başlığında ünlü biri
%100x160
Kart başlığı

Bu kartın, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni vardır.

Son güncelleme 3 dakika önce

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Tamsayı pozu dönemi.

Kaynak Başlığında ünlü biri
Kart başlığı

Bu kartın, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni vardır.

Son güncelleme 3 dakika önce

%100x260

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

Kaynak Başlığında ünlü biri
Kart başlığı

Bu, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni içeren daha geniş bir karttır. Bu kart, eşit yükseklikteki eylemi gösteren ilkinden bile daha uzun içeriğe sahiptir.

Son güncelleme 3 dakika önce

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Kart sütunları ayrıca bazı ek kodlarla genişletilebilir ve özelleştirilebilir. Aşağıda gösterilen, .card-columnssütun sayısını değiştirmek için bir dizi duyarlı katman oluşturmak için kullandığımız CSS'yi (CSS sütunları) kullanan sınıfın bir uzantısıdır.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}