Source

Kártyák

A Bootstrap kártyái rugalmas és bővíthető tartalomtárolót biztosítanak többféle változattal és lehetőséggel.

Ról ről

A kártya rugalmas és bővíthető tartalomtároló. Tartalmazza a fejlécek és láblécek opcióit, a tartalom széles skáláját, a környezetfüggő háttérszíneket és a hatékony megjelenítési lehetőségeket. Ha ismeri a Bootstrap 3-at, a kártyák felváltják a régi paneleket, lyukakat és bélyegképeinket. Ezekhez az összetevőkhöz hasonló funkcionalitás érhető el a kártyák módosító osztályaiként.

Példa

A kártyák a lehető legkevesebb jelöléssel és stílussal készülnek, de még mindig rengeteg vezérlést és testreszabást biztosítanak. Flexbox-szal készültek, könnyű igazítást tesznek lehetővé, és jól keverhetők más Bootstrap-komponensekkel. marginAlapértelmezés szerint nincs bennük , ezért használjon térköz segédprogramokat .

Az alábbiakban egy példa látható egy vegyes tartalmú és fix szélességű alapkártyára. A kártyáknak nincs rögzített szélessége az indításhoz, így természetesen kitöltik a szülőelem teljes szélességét. Ez könnyen testreszabható különféle méretezési lehetőségeinkkel .

Placeholder Image cap
Kártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Elmenni valahova
<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>

Tartalomtípusok

A kártyák sokféle tartalmat támogatnak, beleértve a képeket, szövegeket, listacsoportokat, hivatkozásokat és egyebeket. Az alábbiakban példák láthatók a támogatott dolgokra.

Test

A kártya építőeleme a .card-body. Használja, amikor szüksége van párnázott részre a kártyán belül.

Ez egy szöveg egy kártyatörzsben.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

A kártyacímek címkéhez való hozzáadással .card-titlehasználhatók <h*>. Ugyanígy a hivatkozások is hozzáadódnak és egymás mellé kerülnek .card-linkaz an<a> címkéhez való hozzáadással.

A feliratok akkor használhatók, ha .card-subtitleegy <h*>címkéhez adnak egyet. Ha a .card-titleés az .card-subtitleelemeket egy elembe helyezzük .card-body, akkor a kártya címe és alcíme szépen igazodik.

Kártya címe
Kártya felirata

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Kártya link Egy másik link
<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>

Képek

.card-img-topképet helyez el a kártya tetejére. A .card-textsegítségével szöveget lehet hozzáadni a kártyához. A szöveg .card-texta szabványos HTML címkékkel is formázható.

Placeholder Image cap

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

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

Csoportok listázása

Hozzon létre tartalomlistákat egy ürítési listacsoporttal rendelkező kártyán.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum és eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Kiemelt
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum és eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Mosogató

Keverje össze és párosítsa több tartalomtípust a szükséges kártya létrehozásához, vagy dobjon be mindent. Az alábbiakban képstílusok, blokkok, szövegstílusok és listacsoport láthatók – mindezt egy fix szélességű kártyába csomagolva.

Placeholder Image cap
Kártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum és eros
<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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Adjon hozzá opcionális fejlécet és/vagy láblécet a kártyán belül.

Kiemelt
Különleges címkezelés

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Elmenni valahova
<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>

A kártyafejlécek stílusozhatók elemek .card-headerhozzáadásával <h*>.

Kiemelt
Különleges címkezelés

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Elmenni valahova
<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>
Idézet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Valaki híres a Forrás címében
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Kiemelt
Különleges címkezelés

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Elmenni valahova
<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>

Méretezés

A kártyák nem feltételeznek konkrétumotwidth kezdés, ezért 100%-ban szélesek lesznek, hacsak másképp nem jelezzük. Ezt szükség szerint módosíthatja egyéni CSS-sel, grid osztályokkal, grid Sass mixinekkel vagy segédprogramokkal.

Rács jelölés használata

A rács segítségével csomagolja a kártyákat oszlopokba és sorokba, ha szükséges.

Különleges címkezelés

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Elmenni valahova
Különleges címkezelés

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Elmenni valahova
<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>

Segédprogramok használata

Használja maroknyi méretező segédprogramunkat a kártya szélességének gyors beállításához.

Kártya címe

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Gomb
Kártya címe

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

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

Egyéni CSS használata

Használjon egyéni CSS-t stíluslapjaiban vagy soron belüli stílusként a szélesség beállításához.

Különleges címkezelés

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Elmenni valahova
<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>

Szöveg igazítása

Bármely kártya szövegigazítását gyorsan megváltoztathatja – egészében vagy egyes részein – szövegigazítási osztályainkkal .

Különleges címkezelés

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Elmenni valahova
Különleges címkezelés

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Elmenni valahova
Különleges címkezelés

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Elmenni valahova
<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>

Adjon hozzá némi navigációt a kártya fejlécéhez (vagy blokkjához) a Bootstrap navigációs összetevőivel .

Különleges címkezelés

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Elmenni valahova
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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>
Különleges címkezelés

Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.

Elmenni valahova
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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>

Képek

A kártyák tartalmaznak néhány lehetőséget a képekkel való munkavégzéshez. Választhat a „képsapkák” hozzáfűzése a kártya mindkét végéhez, a képek kártyatartalommal való átfedése vagy a kép kártyába történő beágyazása közül.

Képsapkák

A fejlécekhez és láblécekhez hasonlóan a kártyák is tartalmazhatnak felső és alsó „képsapkát” – a kártya tetején vagy alján található képeket.

Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, az alábbi alátámasztó szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Utoljára frissítve 3 perce

Kártya címe

Ez egy szélesebb kártya, az alábbi alátámasztó szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Utoljára frissítve 3 perce

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-top" alt="...">
</div>

Képlefedések

Váltson egy képet kártya hátterévé, és fedje le a kártya szövegét. A képtől függően szükség lehet további stílusokra vagy segédprogramokra.

Placeholder Card image
Kártya címe

Ez egy szélesebb kártya, az alábbi alátámasztó szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Utoljára frissítve 3 perce

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

Vegye figyelembe, hogy a tartalom nem lehet nagyobb, mint a kép magassága. Ha a tartalom nagyobb, mint a kép, a tartalom a képen kívül jelenik meg.

Vízszintes

A rács és a használati osztályok kombinációjával a kártyák mobilbarát és reszponzív módon vízszintessé tehetők. Az alábbi példában eltávolítjuk a rács ereszcsatornáit .no-guttersés .col-md-*osztályokat használunk a kártya vízszintessé tételéhez a mdtöréspontnál. A kártya tartalmától függően további módosításokra lehet szükség.

Placeholder Image
Kártya címe

Ez egy szélesebb kártya, az alábbi alátámasztó szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Utoljára frissítve 3 perce

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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>

Kártya stílusok

A kártyák különféle lehetőségeket tartalmaznak a hátterük, a keretek és a színek testreszabására.

Háttér és szín

Használjon szöveges és háttér segédprogramokat a kártya megjelenésének megváltoztatásához.

Fejléc
Elsődleges kártyacím

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Másodlagos kártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Sikerkártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Veszélykártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Figyelmeztető kártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Az információs kártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Fénykártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Sötét kártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

<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>
Jelentést adni a kisegítő technológiáknak

A szín használata a jelentés hozzáadására csak vizuális jelzést ad, amelyet nem közvetítenek a kisegítő technológiák – például a képernyőolvasók – felhasználói számára. Győződjön meg arról, hogy a színnel jelölt információ vagy magából a tartalomból (pl. a látható szövegből) nyilvánvaló, vagy alternatív módon, például az .sr-onlyosztályba rejtett kiegészítő szöveggel szerepel.

Határ

Használja a border segédprogramokat a border-colorkártya megváltoztatásához. Vegye figyelembe, hogy osztályokat helyezhet .text-{color}a szülőre .cardvagy a kártya tartalmának egy részhalmazára, az alábbiak szerint.

Fejléc
Elsődleges kártyacím

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Másodlagos kártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Sikerkártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Veszélykártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Figyelmeztető kártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Az információs kártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Fénykártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc
Sötét kártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

<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 segédprogramok

A kártya fejlécében és láblécében szükség szerint módosíthatja a szegélyeket, és akár eltávolíthatja azokat a background-colorgombbal .bg-transparent.

Fejléc
Sikerkártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

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

Kártya elrendezés

A kártyákon belüli tartalom stílusa mellett a Bootstrap néhány lehetőséget is tartalmaz a kártyasorozatok elrendezésére. Egyelőre ezek az elrendezési lehetőségek még nem reagálnak .

Kártyacsoportok

Használjon kártyacsoportokat, hogy a kártyákat egyetlen, csatolt elemként jelenítse meg, azonos szélességű és magasságú oszlopokkal. A kártyacsoportok display: flex;egységes méretük eléréséhez használják.

Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, az alábbi alátámasztó szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Utoljára frissítve 3 perce

Placeholder Image cap
Kártya címe

Ezen a kártyán alább található alátámasztó szöveg természetes bevezetőként a további tartalomhoz.

Utoljára frissítve 3 perce

Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, az alábbi alátámasztó szöveggel, amely természetes bevezető a további tartalomhoz. Ez a kártya még hosszabb tartalommal rendelkezik, mint az első, amely azt az azonos magasságú akciót mutatja.

Utoljára frissítve 3 perce

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

Láblécekkel ellátott kártyacsoportok használatakor a tartalom automatikusan sorba kerül.

Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, az alábbi alátámasztó szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Placeholder Image cap
Kártya címe

Ezen a kártyán alább található alátámasztó szöveg természetes bevezetőként a további tartalomhoz.

Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, az alábbi alátámasztó szöveggel, amely természetes bevezető a további tartalomhoz. Ez a kártya még hosszabb tartalommal rendelkezik, mint az első, amely azt az azonos magasságú akciót mutatja.

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

Kártya paklik

Egyenlő szélességű és magasságú kártyákra van szüksége, amelyek nincsenek egymáshoz rögzítve? Használj kártyapaklit.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Utoljára frissítve 3 perce

Placeholder Image cap
Kártya címe

Ezen a kártyán alább található alátámasztó szöveg természetes bevezetőként a további tartalomhoz.

Utoljára frissítve 3 perce

Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, az alábbi alátámasztó szöveggel, amely természetes bevezető a további tartalomhoz. Ez a kártya még hosszabb tartalommal rendelkezik, mint az első, amely azt az azonos magasságú akciót mutatja.

Utoljára frissítve 3 perce

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

Csakúgy, mint a kártyacsoportoknál, a paklikban lévő kártyaláblécek automatikusan sorakoznak.

Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, az alábbi alátámasztó szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Placeholder Image cap
Kártya címe

Ezen a kártyán alább található alátámasztó szöveg természetes bevezetőként a további tartalomhoz.

Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, az alábbi alátámasztó szöveggel, amely természetes bevezető a további tartalomhoz. Ez a kártya még hosszabb tartalommal rendelkezik, mint az első, amely azt az azonos magasságú akciót mutatja.

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

Rács kártyák

Használja a Bootstrap rácsrendszert és annak .row-colsosztályait annak szabályozására, hogy hány (a kártyái köré tekert) rácsoszlopot jelenítse meg soronként. Például itt .row-cols-1helyezzük el a kártyákat egy oszlopban, és .row-cols-md-2osztunk fel négy kártyát egyenlő szélességűre több sorban, a közepes törésponttól felfelé.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

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

Módosítsa erre, .row-cols-3és látni fogja a negyedik kártyacsomagolást.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

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

Ha egyenlő magasságra van szüksége, adja hozzá .h-100a kártyákhoz. Ha alapértelmezés szerint egyenlő magasságot szeretne, $card-height: 100%a Sass-ban állíthatja be.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Placeholder Image cap
Kártya címe

Ez egy rövid kártya.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz.

Placeholder Image cap
Kártya címe

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

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

Kártya oszlopai

A kártyákat falazathoz hasonló oszlopokba lehet rendezni CSS segítségével, ha becsomagolja őket .card-columns. A kártyák CSS-sel készülnekcolumn tulajdonságokkal készülnek a flexbox helyett a könnyebb igazítás érdekében. A kártyák sorrendje fentről lefelé és balról jobbra történik.

Fel a fejjel! Az Ön futásteljesítménye a kártyaoszlopokkal változhat. Annak elkerülése érdekében, hogy a kártyák oszlopokon át törjenek, be kell állítani őket, display: inline-blockmivel column-break-inside: avoidez még nem golyóálló megoldás.

Placeholder Image cap
Kártyacím, amely új sorba tör

Ez egy hosszabb kártya, alább alátámasztott szöveggel, amely természetes bevezető a további tartalomhoz. Ez a tartalom egy kicsit hosszabb.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Valaki híres a Forrás címében
Placeholder Image cap
Kártya címe

Ezen a kártyán alább található alátámasztó szöveg természetes bevezetőként a további tartalomhoz.

Utoljára frissítve 3 perce

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Valaki híres a Forrás címében
Kártya címe

Ennek a kártyának rendes címe és rövid szövegrésze van alatta.

Utoljára frissítve 3 perce

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Valaki híres a Forrás címében
Kártya címe

Ez egy másik kártya címmel és alább alátámasztó szöveggel. Ez a kártya további tartalommal rendelkezik, hogy összességében kissé magasabb legyen.

Utoljára frissítve 3 perce

<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</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-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is 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>

A kártyaoszlopok további kóddal is bővíthetők és testreszabhatók. Az alábbiakban látható az .card-columnsosztály egy kiterjesztése, amely ugyanazt a CSS-t használja – CSS-oszlopok –, amelyek segítségével érzékeny rétegeket állíthatunk elő az oszlopok számának megváltoztatásához.

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