Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

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 .

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

Placeholder Image cap

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

Placeholder Image cap
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
<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>

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ı

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

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

Placeholder Image cap
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

Placeholder Image cap
<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.

Placeholder Card image
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 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">Last updated 3 mins ago</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

Placeholder Image
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 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

Bir kartın görünümünü değiştirmek için metin rengi 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-dark 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-dark 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-dark 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 .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.

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

<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

Placeholder Image cap
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

Placeholder Image cap
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

Placeholder Image cap
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 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.

Placeholder Image cap
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.

Placeholder Image cap
Kart başlığı

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

Placeholder Image cap
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 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.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

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

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

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

Placeholder Image cap
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.

Placeholder Image cap
Kart başlığı

Bu kısa bir kart.

Placeholder Image cap
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.

Placeholder Image cap
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.

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

Placeholder Image cap
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.

Placeholder Image cap
Kart başlığı

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

Placeholder Image cap
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="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

küstah

Değişkenler

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$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;