Kartat
Kartat e Bootstrap ofrojnë një kontejnerë përmbajtjeje fleksibël dhe të zgjerueshëm me variante dhe opsione të shumta.
Rreth
Një kartë është një kontejner përmbajtje fleksibël dhe i zgjerueshëm. Ai përfshin opsione për titujt dhe fundet, një shumëllojshmëri të gjerë të përmbajtjes, ngjyrat kontekstuale të sfondit dhe opsionet e fuqishme të ekranit. Nëse jeni njohur me Bootstrap 3, kartat zëvendësojnë panelet, pusetat dhe miniaturat tona të vjetra. Funksionalitet i ngjashëm me këta komponentë është i disponueshëm si klasa modifikuese për kartat.
Shembull
Kartat janë ndërtuar me sa më pak shënime dhe stile të jetë e mundur, por megjithatë arrijnë të ofrojnë një ton kontrolli dhe personalizimi. Të ndërtuara me flexbox, ato ofrojnë shtrirje të lehtë dhe përzihen mirë me komponentët e tjerë të Bootstrap. Ata nuk kanë margin
si parazgjedhje, kështu që përdorni shërbimet e ndarjes sipas nevojës.
Më poshtë është një shembull i një karte bazë me përmbajtje të përzier dhe një gjerësi fikse. Kartat nuk kanë gjerësi fikse për të filluar, kështu që ato do të mbushin natyrshëm gjerësinë e plotë të elementit të tyre prind. Kjo përshtatet lehtësisht me opsionet tona të ndryshme të përmasave .
Titulli i kartës
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Shko diku<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>
Llojet e përmbajtjes
Kartat mbështesin një shumëllojshmëri të gjerë të përmbajtjes, duke përfshirë imazhet, tekstin, grupet e listave, lidhjet dhe më shumë. Më poshtë janë shembuj të asaj që mbështetet.
Trupi
Blloku i ndërtimit të një karte është .card-body
. Përdoreni sa herë që keni nevojë për një seksion të mbushur brenda një karte.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Titujt, teksti dhe lidhjet
Titujt e kartave përdoren duke shtuar .card-title
në një <h*>
etiketë. Në të njëjtën mënyrë, lidhjet shtohen dhe vendosen pranë njëra-tjetrës duke shtuar .card-link
në një <a>
etiketë.
Titrat përdoren duke shtuar një .card-subtitle
në një <h*>
etiketë. Nëse .card-title
dhe .card-subtitle
artikujt vendosen në një .card-body
artikull, titulli dhe titrat e kartës janë të rreshtuara mirë.
Titulli i kartës
Titrat e kartës
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Lidhja e kartës Një lidhje tjetër<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>
Imazhet
.card-img-top
vendos një imazh në krye të kartës. Me .card-text
, teksti mund të shtohet në kartë. Teksti brenda .card-text
mund të stilohet edhe me etiketat standarde HTML.
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
<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>
Listoni grupet
Krijoni lista të përmbajtjes në një kartë me një grup listesh.
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
<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>
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
<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>
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
<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>
Lavaman kuzhine
Përzieni dhe përputhni shumë lloje të përmbajtjes për të krijuar kartën që ju nevojitet, ose hidhni gjithçka aty. Më poshtë tregohen stilet e imazhit, blloqet, stilet e tekstit dhe një grup liste—të gjitha të mbështjella në një kartë me gjerësi fikse.
Titulli i kartës
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
<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>
Koka dhe fundi
Shtoni një kokë dhe/ose fund të faqes opsionale brenda një karte.
Trajtim special i titullit
Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.
Shko diku<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>
Titujt e kartave mund të stilohen duke i shtuar .card-header
elementeve <h*>
.
Të paraqitura
Trajtim special i titullit
Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.
Shko diku<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>
Një citat i njohur, i përfshirë në një element blloku.
<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>
Trajtim special i titullit
Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.
Shko diku<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>
Përmasat
Kartat nuk supozojnë se nuk janë të veçanta width
për të filluar, kështu që ato do të jenë 100% të gjera nëse nuk përcaktohet ndryshe. Ju mund ta ndryshoni këtë sipas nevojës me CSS të personalizuar, klasat e rrjetit, përzierjet e rrjetit Sass ose shërbimet.
Përdorimi i shënjimit në rrjet
Duke përdorur rrjetën, mbështillni kartat në kolona dhe rreshta sipas nevojës.
<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>
Përdorimi i shërbimeve
Përdorni një pjesë të vogël të shërbimeve tona të disponueshme për madhësinë për të vendosur shpejt gjerësinë e një karte.
Titulli i kartës
Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.
ButoniTitulli i kartës
Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.
Butoni<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>
Duke përdorur CSS të personalizuar
Përdorni CSS të personalizuar në fletët e stilit tuaj ose si stile të brendshme për të vendosur një gjerësi.
Trajtim special i titullit
Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.
Shko diku<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>
Rreshtimi i tekstit
Mund të ndryshoni shpejt shtrirjen e tekstit të çdo karte—në tërësinë e saj ose pjesë të veçanta—me klasat tona të rreshtimit të tekstit .
Trajtim special i titullit
Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.
Shko dikuTrajtim special i titullit
Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.
Shko dikuTrajtim special i titullit
Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.
Shko diku<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>
Navigimi
Shtoni pak navigim në kokën (ose bllokun) e një karte me komponentët navigues të Bootstrap .
Trajtim special i titullit
Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.
Shko diku<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>
Trajtim special i titullit
Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.
Shko diku<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>
Imazhet
Kartat përfshijnë disa opsione për të punuar me imazhe. Zgjidhni nga shtimi i "tapave të imazhit" në të dy skajet e një karte, duke mbivendosur imazhet me përmbajtjen e kartës ose thjesht duke futur imazhin në një kartë.
Kapelet e imazhit
Ngjashëm me titujt dhe fundet, kartat mund të përfshijnë "kapakët e imazhit" të sipërm dhe të poshtëm - imazhe në krye ose në fund të një karte.
Titulli i kartës
Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Përditësimi i fundit 3 minuta më parë
Titulli i kartës
Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Përditësimi i fundit 3 minuta më parë
<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>
Mbivendosjet e imazhit
Kthejeni një imazh në një sfond karte dhe mbivendosni tekstin e kartës suaj. Në varësi të imazhit, mund ose nuk mund të keni nevojë për stile ose shërbime shtesë.
<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>
Horizontale
Duke përdorur një kombinim të klasave të rrjetit dhe shërbimeve, kartat mund të bëhen horizontale në një mënyrë miqësore dhe të përgjegjshme për celularin. Në shembullin e mëposhtëm, ne heqim ulluqet e rrjetës me .no-gutters
dhe përdorim .col-md-*
klasat për ta bërë kartën horizontale në pikën e md
ndërprerjes. Mund të nevojiten rregullime të mëtejshme në varësi të përmbajtjes së kartës suaj.
Titulli i kartës
Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Përditësimi i fundit 3 minuta më parë
<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>
Stilet e kartave
Kartat përfshijnë opsione të ndryshme për personalizimin e sfondeve, kufijve dhe ngjyrës së tyre.
Sfondi dhe ngjyra
Përdorni programet e tekstit dhe sfondit për të ndryshuar pamjen e një karte.
Titulli kryesor i kartës
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës dytësore
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës së suksesit
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës së rrezikut
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës paralajmëruese
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës së informacionit
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës së lehtë
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës së errët
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
<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>
Përcjellja e kuptimit tek teknologjitë ndihmëse
Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .sr-only
klasën.
Kufiri
Përdorni shërbimet kufitare për të ndryshuar vetëm border-color
kartën. Vini re se mund të vendosni .text-{color}
klasa në prind .card
ose një nëngrup të përmbajtjes së kartës siç tregohet më poshtë.
Titulli kryesor i kartës
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës dytësore
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës së suksesit
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës së rrezikut
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës paralajmëruese
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës së informacionit
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës së lehtë
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Titulli i kartës së errët
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
<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>
Përzien shërbimet komunale
Ju gjithashtu mund të ndryshoni kufijtë në kokën dhe fundin e kartës sipas nevojës dhe madje t'i hiqni ato background-color
me .bg-transparent
.
Titulli i kartës së suksesit
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
<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>
Paraqitja e kartës
Përveç stilimit të përmbajtjes brenda kartave, Bootstrap përfshin disa opsione për vendosjen e serive të kartave. Për momentin, këto opsione të paraqitjes nuk janë ende të përgjegjshme .
Grupet e kartave
Përdorni grupet e kartave për t'i paraqitur kartat si një element të vetëm, të bashkangjitur me kolona të barabarta gjerësi dhe lartësi. Grupet e kartave fillojnë të grumbullohen dhe përdoren display: flex;
për t'u bashkuar me dimensione uniforme duke filluar nga pika e sm
ndërprerjes.
Titulli i kartës
Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Përditësimi i fundit 3 minuta më parë
Titulli i kartës
Kjo kartë ka tekstin mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.
Përditësimi i fundit 3 minuta më parë
Titulli i kartës
Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo kartë ka përmbajtje edhe më të gjatë se e para që tregon atë veprim me lartësi të barabartë.
Përditësimi i fundit 3 minuta më parë
<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>
Kur përdorni grupet e kartave me funde, përmbajtja e tyre do të rreshtohet automatikisht.
Titulli i kartës
Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Titulli i kartës
Kjo kartë ka tekstin mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.
Titulli i kartës
Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo kartë ka përmbajtje edhe më të gjatë se e para që tregon atë veprim me lartësi të barabartë.
<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>
Kuvertë kartash
Keni nevojë për një grup letrash me gjerësi dhe lartësi të barabartë që nuk janë ngjitur me njëra-tjetrën? Përdorni kuvertën e kartave.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Përditësimi i fundit 3 minuta më parë
Titulli i kartës
Kjo kartë ka tekstin mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.
Përditësimi i fundit 3 minuta më parë
Titulli i kartës
Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo kartë ka përmbajtje edhe më të gjatë se e para që tregon atë veprim me lartësi të barabartë.
Përditësimi i fundit 3 minuta më parë
<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>
Ashtu si me grupet e kartave, fundet e letrave në kuvertë do të rreshtohen automatikisht.
Titulli i kartës
Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Titulli i kartës
Kjo kartë ka tekstin mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.
Titulli i kartës
Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo kartë ka përmbajtje edhe më të gjatë se e para që tregon atë veprim me lartësi të barabartë.
<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>
Kartat e rrjetit
Përdorni sistemin e rrjetit Bootstrap dhe .row-cols
klasat e tij për të kontrolluar numrin e kolonave të rrjetit (të mbështjellura rreth kartave tuaja) për rresht. Për shembull, këtu është .row-cols-1
shtrimi i kartave në një kolonë dhe .row-cols-md-2
ndarja e katër kartave në gjerësi të barabartë nëpër rreshta të shumtë, nga pika e ndarjes mesatare lart.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
<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>
Ndryshojeni në .row-cols-3
dhe do të shihni mbështjelljen e kartës së katërt.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
<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>
Kur keni nevojë për lartësi të barabartë, shtoni .h-100
në letra. Nëse dëshironi lartësi të barabarta si parazgjedhje, mund të vendosni $card-height: 100%
në Sass.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Titulli i kartës
Kjo është një kartë e shkurtër.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.
Titulli i kartës
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
<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>
Kolonat e kartave
Kartat mund të organizohen në kolona të ngjashme me Masonerinë.card-columns
vetëm me CSS duke i mbështjellë në . Kartat janë ndërtuar me column
vetitë CSS në vend të flexbox për shtrirje më të lehtë. Kartat renditen nga lart poshtë dhe nga e majta në të djathtë.
Kokat lart! kilometrazhi juaj me kolonat e kartës mund të ndryshojë. Për të parandaluar thyerjen e kartave nëpër kolona, ne duhet t'i vendosim ato display: inline-block
si column-break-inside: avoid
nuk është ende një zgjidhje antiplumb.
Titulli i kartës që përfundon në një rresht të ri
Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.
Një citat i njohur, i përfshirë në një element blloku.
Titulli i kartës
Kjo kartë ka tekstin mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.
Përditësimi i fundit 3 minuta më parë
Një citat i njohur, i përfshirë në një element blloku.
Titulli i kartës
Kjo kartë ka një titull të rregullt dhe një paragraf të shkurtër të tekstit poshtë saj.
Përditësimi i fundit 3 minuta më parë
Një citat i njohur, i përfshirë në një element blloku.
Titulli i kartës
Kjo është një kartë tjetër me titull dhe tekst mbështetës më poshtë. Kjo kartë ka disa përmbajtje shtesë për ta bërë atë pak më të gjatë në përgjithësi.
Përditësimi i fundit 3 minuta më parë
<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>
Kolonat e kartës gjithashtu mund të zgjerohen dhe personalizohen me disa kode shtesë. Më poshtë është një shtrirje e .card-columns
klasës duke përdorur të njëjtën CSS që ne përdorim - kolonat CSS - për të gjeneruar një grup nivelesh të përgjegjshme për ndryshimin e numrit të kolonave.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}