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 .

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>

Címek, szövegek és linkek

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

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.

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

Kártya link Egy másik link

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

Fejléc és lábléc

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

2 napja

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

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

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

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.

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.

Lábléc

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

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

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

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.

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

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

Kártya címe

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

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

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

Kártya címe

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.

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

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

Kártya címe

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

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.

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.

Kártya címe

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

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.

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.

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.

Kártya címe

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

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.

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.

Kártya címe

Ez egy rövid kártya.

Kártya címe

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

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.

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

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

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

Kártyák

Ról ről

Példa

Kártya címe

Tartalomtípusok

Test

Címek, szövegek és linkek

Kártya címe

Kártya felirata

Képek

Csoportok listázása

Mosogató

Kártya címe

Fejléc és lábléc

Különleges címkezelés

Kiemelt

Különleges címkezelés

Különleges címkezelés

Méretezés

Rács jelölés használata

Különleges címkezelés

Különleges címkezelés

Segédprogramok használata

Kártya címe

Kártya címe

Egyéni CSS használata

Különleges címkezelés

Szöveg igazítása

Különleges címkezelés

Különleges címkezelés

Különleges címkezelés

Navigáció

Különleges címkezelés

Különleges címkezelés

Képek

Képsapkák

Kártya címe

Kártya címe

Képlefedések

Kártya címe

Vízszintes

Kártya címe

Kártya stílusok

Háttér és szín

Elsődleges kártyacím

Másodlagos kártya címe

Sikerkártya címe

Veszélykártya címe

Figyelmeztető kártya címe

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

Fénykártya címe

Sötét kártya címe

Jelentést adni a kisegítő technológiáknak

Határ

Elsődleges kártyacím

Másodlagos kártya címe

Sikerkártya címe

Veszélykártya címe

Figyelmeztető kártya címe

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

Fénykártya címe

Sötét kártya címe

Mixins segédprogramok

Sikerkártya címe

Kártya elrendezés

Kártyacsoportok

Kártya címe

Kártya címe

Kártya címe

Kártya címe

Kártya címe

Kártya címe

Kártya paklik

Kártya címe

Kártya címe

Kártya címe

Kártya címe

Kártya címe

Kártya címe

Rács kártyák