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. margin
Varsayı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<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.
<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-title
Kart başlıkları bir <h*>
etikete eklenerek kullanılır . Aynı şekilde linkler de .card-link
bir <a>
etikete eklenerek yan yana eklenir ve yerleştirilir.
.card-subtitle
Altyazı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-top
kartın üstüne bir resim yerleştirir. ile .card-text
karta metin eklenebilir. İçindeki metin .card-text
ayrı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.
<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>
- 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österilmiştir.
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>
Başlık ve altbilgi
Bir karta isteğe bağlı bir üst bilgi ve/veya alt bilgi 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">
<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-header
Kart 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>
Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.
<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>
Ö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 .
<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
Bir 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>
Navigasyon
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">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.
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
<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.
<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>
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ını kaldırıyoruz ve kartı kesme noktasında yatay hale getirmek için sınıfları .no-gutters
kullanı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
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." 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 ve arka plan yardımcı programlarını kullanın .
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.
İ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ş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.
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.
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.
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.
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.
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-only
sı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-color
koyabileceğinizi unutmayın ..text-{color}
.card
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.
İ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ş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.
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.
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.
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.
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.
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-color
kaldırabilirsiniz .bg-transparent
.
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
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
<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.
Kart başlığı
Bu kartın, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni vardı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 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>
Kart desteleri
Birbirine bağlı olmayan eşit genişlikte ve yükseklikte kart setine mi ihtiyacınız var? Kart destelerini kullanın.
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
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
<div class="card-deck">
<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>
<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>
Tıpkı kart gruplarında olduğu gibi, destelerdeki kart altbilgileri otomatik olarak sıralanacaktı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.
Kart başlığı
Bu kartın, ek içeriğe doğal bir giriş olarak aşağıdaki destekleyici metni vardı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 kart, eşit yükseklikteki eylemi gösteren ilkinden bile daha uzun içeriğe sahiptir.
<div class="card-deck">
<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-cols
sınıflarını kullanın. Örneğin, .row-cols-1
kartları bir sütuna yerleştirmek ve .row-cols-md-2
dö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.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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-3
ve 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.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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-100
olduğ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.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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>
Kart sütunları
Kartlar, içine sarılarak yalnızca CSS ile Duvar.card-columns
benzeri sütunlar halinde düzenlenebilir . column
Kartlar, 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-block
olarak ayarlamalıyız.column-break-inside: avoid
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.
Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.
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
Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.
Kart başlığı
Bu kartın altında normal bir başlık ve kısa bir metin paragrafı vardır.
Son güncelleme 3 dakika önce
Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.
Kart başlığı
Bu, aşağıda başlığı ve destekleyici metni olan başka bir karttır. Bu kart, genel olarak biraz daha uzun olması için bazı ek içeriğe sahiptir.
Son güncelleme 3 dakika önce
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<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>A well-known quote, contained in a blockquote element.</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 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 bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<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 a regular title and short paragraphy of text below it.</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" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</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-columns
sü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;
}
}