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 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 .
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.
<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ó.
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 be
- 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>- Cras justo odio
- Dapibus ac facilisis be
- 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 be
- 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>Fejléc és lábléc
Adjon hozzá opcionális fejlécet és/vagy láblécet a kártyán belül.
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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<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>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 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 valahovaKü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.
<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 valahovaKülönleges címkezelés
Az alábbi támogató szöveggel, amely természetes bevezető a további tartalomhoz.
Elmenni valahovaKü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>Navigáció
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 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.
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
<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.
<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.
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
Használjon szöveges és háttér segédprogramokat a kártya megjelenésének megváltoztatásához.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
<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, amely természetes bevezető a további tartalomhoz.
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 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.
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.
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.
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.
<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>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- columntulajdonsá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! A futásteljesítmény 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.
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
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.
Kártya címe
Ez egy másik kártya címmel és 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-oszlopokat –, 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;
}
}