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. margin
Alapé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-title
használhatók <h*>
. Ugyanígy a linkek hozzáadása és egymás mellé kerülése .card-link
egy <a>
címkéhez való hozzáadással.
A feliratok akkor használhatók, ha .card-subtitle
egy <h*>
címkéhez adnak egyet. Ha a .card-title
és az .card-subtitle
elemeket 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-top
elhelyez egy képet a kártya tetejére. A .card-text
segítségével szöveget lehet hozzáadni a kártyához. A szöveg .card-text
a 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.
- 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>
- 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
<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.
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
<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>
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-header
hozzá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>
Egy jól ismert idézet, blokk idézőjelben található.
<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>
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 width
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 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">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">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-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.
<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>
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 md
tö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, 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 no-gutters">
<div class="col-md-4">
<img src="..." alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
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-only
osztályba rejtett kiegészítő szöveggel szerepel.
Határ
Használja a border segédprogramokat a border-color
kártya megváltoztatásához. Vegye figyelembe, hogy osztályokat helyezhet .text-{color}
a szülőre .card
vagy 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-color
gombbal .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 halmozottan indulnak, és a törésponttól display: flex;
kezdve egységes méretekkel kapcsolódnak egymáshoz .sm
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>
Rács kártyák
Használja a Bootstrap rácsrendszert és annak .row-cols
osztá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-1
helyezzük el a kártyákat egy oszlopban, és .row-cols-md-2
osztunk 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-100
a kártyákhoz. Ha alapértelmezés szerint egyenlő magasságot szeretne, akkor $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- column
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! 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-block
mivel column-break-inside: avoid
ez 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.
Egy jól ismert idézet, blokk idézőjelben található.
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
Egy jól ismert idézet, blokk idézőjelben található.
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
Egy jól ismert idézet, blokk idézőjelben található.
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>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
A kártyaoszlopok további kóddal is bővíthetők és testreszabhatók. Az alábbiakban látható az .card-columns
osztá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;
}
}