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.

Bu sayfada

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 .

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

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Başlıklar, metin ve bağlantılar

.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ı

html

<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-text, karta metin eklenebilir. İçindeki metin .card-textayrıca standart HTML etiketleri ile biçimlendirilebilir.

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

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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.

Bir öğe
ikinci bir öğe
Üçüncü bir öğe

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Öne çıkan

Bir öğe
ikinci bir öğe
Üçüncü bir öğe

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Bir öğe
ikinci bir öğe
Üçüncü bir öğe

Kart altbilgisi

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</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österilmektedir.

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 öğe
ikinci bir öğe
Üçüncü bir öğe

Kart bağlantısı Başka bir bağlantı

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Başlık ve altbilgi

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

html

<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

html

<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ı

Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.

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

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</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

2 gün önce

html

<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

html

<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

html

<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

html

<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

html

<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-end" 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

html

<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" aria-current="true" 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">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

html

<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">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, kartlar, bir kartın üst veya alt kısmındaki resimler olan üst ve alt "görüntü kapakları" içerebilir.

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

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <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 src="..." class="card-img-bottom" alt="...">
</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.

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

html

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

İçeriğin resmin yüksekliğinden daha büyük olmaması gerektiğini unutmayın. İçerik görüntüden daha büyükse, içerik görüntünün dışında görüntülenecektir.

Yatay

Izgara ve faydalı sınıfların bir kombinasyonunu kullanarak kartlar, mobil uyumlu ve duyarlı bir şekilde yatay hale getirilebilir. Aşağıdaki örnekte, ızgara olukları ile birlikte kaldırıyoruz ve kartı kesme noktasında yatay hale getirmek için sınıfları .g-0kullanıyoruz . Kart içeriğinize bağlı olarak daha fazla ayarlama gerekebilir..col-md-*md

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

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <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>
</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

v5.2.0'da eklendi

Yardımcılarımızla zıt bir background-colorön plana colorsahip olun . Önceden, tercih ettiğiniz takdirde hala kullanabileceğiniz, stil seçiminizi ve yardımcı programları manuel olarak eşleştirmeniz gerekiyordu..text-bg-{color}.text-{color}.bg-{color}

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.

html

<div class="card text-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-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-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-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-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-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 text-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-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 .visually-hiddensı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.

html

<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">
    <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">
    <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 bunları background-colorile kaldı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.

altbilgi

html

<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ı yığılmış olarak başlar ve kesme noktasından display: flex;başlayarak tek tip boyutlarla iliştirilmek için kullanılır.sm

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 kartın, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni vardır.

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 kart, eşit yükseklikteki eylemi gösteren ilkinden bile daha uzun içeriğe sahiptir.

Son güncelleme 3 dakika önce

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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.

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 kartın, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni vardır.

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 kart, eşit yükseklikteki eylemi gösteren ilkinden bile daha uzun içeriğe sahiptir.

Son güncelleme 3 dakika önce

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

ızgara kartları

Satır başına kaç tane ızgara sütunu (kartlarınızın etrafına sarılmış) göstereceğinizi kontrol etmek için Bootstrap ızgara sistemini ve .row-colssınıflarını kullanın. Örneğin, .row-cols-1kartları bir sütuna yerleştirmek ve .row-cols-md-2dört kartı orta kesme noktasından yukarıya doğru birden çok satırda eşit genişliğe bölmek.

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.

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.

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.

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.

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Olarak değiştirin .row-cols-3ve dördüncü kart sargısını göreceksiniz.

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.

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.

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.

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.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Eşit yüksekliğe ihtiyacınız .h-100olduğunda, kartlara ekleyin. Varsayılan olarak eşit yükseklikler istiyorsanız, $card-height: 100%Sass'ta ayarlayabilirsiniz.

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.

Kart başlığı

Bu kısa bir kart.

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.

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.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

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

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 kartın, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni vardır.

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 kart, eşit yükseklikteki eylemi gösteren ilkinden bile daha uzun içeriğe sahiptir.

Son güncelleme 3 dakika önce

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
</div>

duvarcılık

Biz , Duvarcılık benzeri sütunların v4davranışını taklit etmek için yalnızca CSS tekniğini kullandık , ancak bu teknik pek çok hoş olmayan yan etkiyle geldi . Bu tür bir düzene sahip olmak istiyorsanız, sadece Masonry eklentisini kullanabilirsiniz. Duvarcılık Bootstrap'a dahil değildir , ancak başlamanıza yardımcı olmak için bir demo örneği hazırladık.v5

CSS

Değişkenler

v5.2.0'da eklendi

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, kartlar artık .cardgelişmiş gerçek zamanlı özelleştirme için yerel CSS değişkenlerini kullanıyor. CSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sas değişkenleri

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

kartlar

Hakkında

Örnek

Kart başlığı

İçerik türleri

Gövde

Başlıklar, metin ve bağlantılar

Kart başlığı

Kart altyazısı

Görüntüler

Liste grupları

Mutfak lavabosu

Kart başlığı

Başlık ve altbilgi

Özel başlık tedavisi

Öne çıkan

Özel başlık tedavisi

Özel başlık tedavisi

boyutlandırma

Izgara işaretlemesini kullanma

Özel başlık tedavisi

Özel başlık tedavisi

yardımcı programları kullanma

Kart başlığı

Kart başlığı

Özel CSS kullanma

Özel başlık tedavisi

Metin hizalama

Özel başlık tedavisi

Özel başlık tedavisi

Özel başlık tedavisi

Navigasyon

Özel başlık tedavisi

Özel başlık tedavisi

Görüntüler

Resim büyük harf

Kart başlığı

Kart başlığı

Görüntü bindirmeleri

Kart başlığı

Yatay

Kart başlığı

Kart stilleri

Arka plan ve renk

Birincil kart başlığı

İkincil kart başlığı

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

Tehlike kartı başlığı

Uyarı kartı başlığı

Bilgi kartı başlığı

Hafif kart başlığı

Karanlık kart başlığı

Yardımcı teknolojilere anlam taşıma

Sınır

Birincil kart başlığı

İkincil kart başlığı

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

Tehlike kartı başlığı

Uyarı kartı başlığı

Bilgi kartı başlığı

Hafif kart başlığı

Karanlık kart başlığı

Mixins yardımcı programları

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

Kart düzeni

Kart grupları

Kart başlığı

Kart başlığı

Kart başlığı

Kart başlığı

Kart başlığı

Kart başlığı

ızgara kartları

Kart başlığı

Kart başlığı

Kart başlığı

Kart başlığı

Kart başlığı

Kart başlığı

Kart başlığı