Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
in English

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.

Ezen az oldalon

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 szükség szerint 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>

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 linkek hozzáadása és egymás mellé kerülése .card-linkegy <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-topelhelyez egy képet 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.

  • Elem
  • Egy második tétel
  • Egy harmadik tétel
<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>
Kiemelt
  • Elem
  • Egy második tétel
  • Egy harmadik tétel
<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>
  • Elem
  • Egy második tétel
  • Egy harmadik tétel
Kártya lábléce 
<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>

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.

  • Elem
  • Egy második tétel
  • Egy harmadik tétel
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">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>

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

Egy jól ismert idézet, blokk idézőjelben található.

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>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>
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 azt feltételezik, hogy nincs konkrét widthkezdé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ás

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-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" 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 néhány lehetőséget tartalmaznak 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 ágyazása közül.

Képsapkák

A fejlécekhez és láblécekhez hasonlóan a kártyák felső és alsó „képsapkát” is tartalmazhatnak – 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, amely alább található alátámasztó szöveggel természetes bevezetőként 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, amely alább található alátámasztó szöveggel természetes bevezetőként 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-bottom" 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, amely alább található alátámasztó szöveggel természetes bevezetőként 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 .g-0é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, amely alább található alátámasztó szöveggel természetes bevezetőként 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 g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Kártya stílusok

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

Háttér és szín

A kártya megjelenésének megváltoztatásához használja a szövegszín és a háttér segédprogramjait .

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-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
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 .visually-hiddenosztá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">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins 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 halmozottan indulnak, és a törésponttól display: flex;kezdve egységes méretekkel kapcsolódnak egymáshoz .sm

Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, amely alább található alátámasztó szöveggel természetes bevezetőként 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, amely természetes bevezető a további tartalomhoz.

Utoljára frissítve 3 perce

Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, amely alább található alátámasztó szöveggel természetes bevezetőként 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, amely alább található alátámasztó szöveggel természetes bevezetőként 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, amely természetes bevezető a további tartalomhoz.

Utoljára frissítve 3 perce
Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, amely alább található alátámasztó szöveggel természetes bevezetőként 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>
    </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 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Ha egyenlő magasságra van szüksége, adja hozzá .h-100a kártyákhoz. Ha alapértelmezés szerint egyenlő magasságot szeretne, akkor $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 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Csakúgy, mint a kártyacsoportok esetében, a kártya láblécei automatikusan sorakoznak.

Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, amely alább található alátámasztó szöveggel természetes bevezetőként 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, amely természetes bevezető a további tartalomhoz.

Utoljára frissítve 3 perce
Placeholder Image cap
Kártya címe

Ez egy szélesebb kártya, amely alább található alátámasztó szöveggel természetes bevezetőként 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="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Kőművesség

Csak CSS-technikát alkalmaztunk a falazott oszlopok v4viselkedésének utánzására , de ez a technika sok kellemetlen mellékhatással járt . Ha ilyen típusú elrendezést szeretne használni a -ban , akkor egyszerűen használja a Masonry beépülő modult. A Bootstrap nem tartalmazza a falazatot , de készítettünk egy bemutatópéldát az induláshoz.v5

Sass

Változók

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