Carduri
Cardurile Bootstrap oferă un container de conținut flexibil și extensibil, cu mai multe variante și opțiuni.
Despre
Un card este un container de conținut flexibil și extensibil. Include opțiuni pentru anteturi și subsoluri, o mare varietate de conținut, culori de fundal contextuale și opțiuni de afișare puternice. Dacă sunteți familiarizat cu Bootstrap 3, cardurile înlocuiesc vechile noastre panouri, puțuri și miniaturi. Funcționalități similare acelor componente sunt disponibile ca clase de modificatori pentru cărți.
Exemplu
Cardurile sunt construite cu cât mai puține marcaje și stiluri posibil, dar reușesc totuși să ofere o mulțime de control și personalizare. Construite cu flexbox, oferă o aliniere ușoară și se amestecă bine cu alte componente Bootstrap. Nu au marginîn mod implicit, așa că utilizați utilitare de spațiere după cum este necesar.
Mai jos este un exemplu de card de bază cu conținut mixt și o lățime fixă. Cardurile nu au o lățime fixă pentru a începe, așa că vor umple în mod natural toată lățimea elementului părinte. Acesta este ușor de personalizat cu diferitele noastre opțiuni de dimensionare .
Titlul cardului
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Mergi undeva<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>Tipuri de conținut
Cardurile acceptă o mare varietate de conținut, inclusiv imagini, text, grupuri de liste, linkuri și multe altele. Mai jos sunt exemple de ceea ce este acceptat.
Corp
Elementul de bază al unei cărți este .card-body. Utilizați-l oricând aveți nevoie de o secțiune căptușită într-un card.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Titluri, text și link-uri
Titlurile cardurilor sunt folosite prin adăugarea .card-titlela o <h*>etichetă. În același mod, linkurile sunt adăugate și plasate unul lângă celălalt prin adăugarea .card-linkla o <a>etichetă.
Subtitrările sunt folosite prin adăugarea unui .card-subtitlela o <h*>etichetă. Dacă elementele .card-titleși .card-subtitlesunt plasate într-un .card-bodyarticol, titlul cardului și subtitlul sunt aliniate frumos.
Titlul cardului
Subtitrare card
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Link card Un alt 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>Imagini
.card-img-topplasează o imagine în partea de sus a cardului. Cu .card-text, textul poate fi adăugat pe card. Textul din interior .card-textpoate fi, de asemenea, stilat cu etichetele HTML standard.
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
<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>Listează grupuri
Creați liste de conținut într-un card cu un grup de liste de culoare.
- Un obiect
- Un al doilea articol
- Un al treilea articol
<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>- Un obiect
- Un al doilea articol
- Un al treilea articol
<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>- Un obiect
- Un al doilea articol
- Un al treilea articol
<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>Chiuveta de bucatarie
Combinați și potriviți mai multe tipuri de conținut pentru a crea cardul de care aveți nevoie sau aruncați totul acolo. Mai jos sunt afișate stiluri de imagine, blocuri, stiluri de text și un grup de liste, toate împachetate într-un card cu lățime fixă.
Titlul cardului
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
- Un obiect
- Un al doilea articol
- Un al treilea articol
<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>Antet și subsol
Adăugați un antet și/sau un subsol opțional într-un card.
Tratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Mergi undeva<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>Antetele cardurilor pot fi stilate prin adăugarea .card-headerelementelor <h*>.
Recomandate
Tratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Mergi undeva<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>Un citat binecunoscut, conținut într-un element blockquote.
<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>Tratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Mergi undeva<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>Dimensiunea
Cărțile presupun că nu este specific widthpentru a începe, așa că vor fi 100% lățime, dacă nu este specificat altfel. Puteți modifica acest lucru după cum este necesar cu CSS personalizat, clase de grilă, mixuri de grilă Sass sau utilitare.
Folosind marcarea grilei
Folosind grila, înfășurați cardurile în coloane și rânduri, după cum este necesar.
Tratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Mergi undevaTratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Mergi undeva<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>Folosind utilitare
Utilizați câteva utilitare de dimensionare disponibile pentru a seta rapid lățimea unui card.
<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>Folosind CSS personalizat
Utilizați CSS personalizat în foile de stil sau ca stiluri inline pentru a seta o lățime.
Tratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Mergi undeva<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>Alinierea textului
Puteți modifica rapid alinierea textului oricărui card - în întregime sau în anumite părți - cu clasele noastre de aliniere a textului .
Tratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Mergi undevaTratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Mergi undevaTratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Mergi undeva<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>Navigare
Adăugați un pic de navigare la antetul (sau blocul) unui card cu componentele de navigare din Bootstrap .
Tratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Mergi undeva<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>Tratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Mergi undeva<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>Imagini
Cardurile includ câteva opțiuni pentru lucrul cu imagini. Alegeți dintre adăugarea „capselor de imagine” la fiecare capăt al unui card, suprapunerea imaginilor cu conținutul cardului sau pur și simplu încorporarea imaginii într-un card.
Capsele imaginii
Similar antetelor și subsolurilor, cardurile pot include „capsule de imagine” de sus și de jos - imagini în partea de sus sau de jos a unui card.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Ultima actualizare acum 3 minute
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Ultima actualizare acum 3 minute
<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>Suprapuneri de imagini
Transformați o imagine într-un fundal de card și suprapuneți textul cardului. În funcție de imagine, este posibil să aveți sau nu nevoie de stiluri sau utilități suplimentare.
<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>Orizontală
Folosind o combinație de clase de rețea și utilități, cardurile pot fi făcute orizontale într-un mod prietenos și receptiv pentru dispozitive mobile. În exemplul de mai jos, eliminăm jgheaburile cu grilă .no-guttersși folosim .col-md-*clase pentru a face cardul orizontal la punctul de mdîntrerupere. Pot fi necesare ajustări suplimentare, în funcție de conținutul cardului dvs.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Ultima actualizare acum 3 minute
<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>Stiluri de carduri
Cardurile includ diverse opțiuni pentru personalizarea fundalurilor, marginilor și culorii.
Fundal și culoare
Utilizați utilități de text și fundal pentru a schimba aspectul unui card.
Titlul cardului principal
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului secundar
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului de succes
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului de pericol
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului de avertizare
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului de informații
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului luminos
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului întunecat
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
<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>Transmiterea sensului tehnologiilor de asistență
Folosirea culorii pentru a adăuga semnificație oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile indicate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .sr-onlyclasa.
Frontieră
Utilizați utilitățile de bord pentru a schimba doar border-colorcardul. Rețineți că puteți pune .text-{color}cursuri pe părinte .cardsau pe un subset al conținutului cardului, așa cum se arată mai jos.
Titlul cardului principal
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului secundar
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului de succes
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului de pericol
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului de avertizare
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului de informații
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului luminos
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Titlul cardului întunecat
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
<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>Utilități Mixins
De asemenea, puteți modifica marginile de pe antetul și subsolul cardului după cum este necesar și chiar să le eliminați background-colorcu .bg-transparent.
Titlul cardului de succes
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
<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>Dispunerea cardului
Pe lângă stilarea conținutului din carduri, Bootstrap include câteva opțiuni pentru aranjarea serii de carduri. Deocamdată, aceste opțiuni de aspect nu sunt încă receptive .
Grupuri de carduri
Utilizați grupuri de carduri pentru a reda cardurile ca un singur element atașat, cu coloane de lățime și înălțime egale. Grupurile de carduri încep stivuite și display: flex;se atașează cu dimensiuni uniforme începând de la punctul de smîntrerupere.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Ultima actualizare acum 3 minute
Titlul cardului
Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.
Ultima actualizare acum 3 minute
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.
Ultima actualizare acum 3 minute
<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>Când utilizați grupuri de carduri cu subsol, conținutul acestora se va alinia automat.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Titlul cardului
Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.
<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>Pachete de cărți
Aveți nevoie de un set de carduri de lățime și înălțime egale, care nu sunt atașate una de alta? Folosește pachete de cărți.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Ultima actualizare acum 3 minute
Titlul cardului
Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.
Ultima actualizare acum 3 minute
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.
Ultima actualizare acum 3 minute
<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>La fel ca în cazul grupurilor de cărți, subsolurile cărților din pachete se vor alinia automat.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Titlul cardului
Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.
<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>Carduri grilă
Utilizați sistemul de grilă Bootstrap și .row-colsclasele sale pentru a controla câte coloane de grilă (înfășurate în jurul cărților dvs.) afișați pe rând. De exemplu, aici este .row-cols-1așezarea cărților pe o coloană și .row-cols-md-2împărțirea a patru cărți la lățime egală pe mai multe rânduri, de la punctul de întrerupere mediu în sus.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
<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>Schimbați-l în .row-cols-3și veți vedea a patra carte înfășurată.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
<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>Când aveți nevoie de înălțime egală, adăugați .h-100la cărți. Dacă doriți înălțimi egale în mod implicit, puteți seta $card-height: 100%în Sass.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Titlul cardului
Acesta este un card scurt.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
<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>Coloane de carduri
Cardurile pot fi organizate în coloane asemănătoare masoneriei cu doar CSS prin împachetarea lor în .card-columns. Cardurile sunt construite cu columnproprietăți CSS în loc de flexbox pentru o aliniere mai ușoară. Cărțile sunt ordonate de sus în jos și de la stânga la dreapta.
Atenție! Kilometrajul dvs. cu coloanele cardurilor poate varia. Pentru a preveni spargerea cardurilor peste coloane, trebuie să le setăm, display: inline-blockdeoarece column-break-inside: avoidnu este încă o soluție antiglonț.
Titlul cardului care se înfășoară într-o nouă linie
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Un citat binecunoscut, conținut într-un element blockquote.
Titlul cardului
Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.
Ultima actualizare acum 3 minute
Un citat binecunoscut, conținut într-un element blockquote.
Titlul cardului
Acest card are un titlu obișnuit și un scurt paragraf de text sub el.
Ultima actualizare acum 3 minute
Un citat binecunoscut, conținut într-un element blockquote.
Titlul cardului
Acesta este un alt card cu titlu și text de sprijin mai jos. Acest card are un conținut suplimentar pentru a-l face puțin mai înalt în general.
Ultima actualizare acum 3 minute
<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>Coloanele cardurilor pot fi, de asemenea, extinse și personalizate cu un cod suplimentar. Mai jos este prezentată o extensie a .card-columnsclasei care utilizează același CSS pe care îl folosim – coloane CSS – pentru a genera un set de niveluri receptive pentru modificarea numărului de coloane.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}