Kartice
Bootstrapove kartice pružaju fleksibilan i proširiv spremnik sadržaja s više varijanti i opcija.
Oko
Kartica je fleksibilan i proširiv spremnik sadržaja . Uključuje opcije za zaglavlja i podnožja, širok izbor sadržaja, kontekstualne pozadinske boje i moćne opcije prikaza. Ako ste upoznati s Bootstrapom 3, kartice zamjenjuju naše stare ploče, jame i sličice. Funkcionalnost slična tim komponentama dostupna je kao klase modifikatora za kartice.
Primjer
Kartice su izrađene sa što je moguće manje markupa i stilova, ali ipak uspijevaju pružiti tonu kontrole i prilagodbe. Izgrađeni s flexboxom, nude jednostavno usklađivanje i dobro se kombiniraju s drugim Bootstrap komponentama. Prema zadanim postavkama nemaju margin
, pa prema potrebi koristite pomoćne programe za razmake .
Ispod je primjer osnovne kartice s mješovitim sadržajem i fiksne širine. Kartice nemaju fiksnu početnu širinu, pa će prirodno ispuniti punu širinu nadređenog elementa. To se lako prilagođava našim različitim opcijama veličine .
Naslov kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Ici negdje<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>
Vrste sadržaja
Kartice podržavaju širok izbor sadržaja, uključujući slike, tekst, grupe popisa, veze i još mnogo toga. Ispod su primjeri onoga što je podržano.
Tijelo
Gradivni blok kartice je .card-body
. Koristite ga kad god trebate podstavljeni dio unutar kartice.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Naslovi, tekst i veze
Naslovi kartica koriste se dodavanjem .card-title
u <h*>
oznaku. Na isti način poveznice se dodaju i postavljaju jedna pored druge dodavanjem .card-link
u <a>
oznaku.
Podnaslovi se koriste dodavanjem .card-subtitle
a <h*>
oznaci. Ako su .card-title
i .card-subtitle
stavke smještene u .card-body
stavku, naslov kartice i podnaslov su lijepo poravnati.
Naslov kartice
Podnaslov kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Link kartice Još jedan 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>
Slike
.card-img-top
postavlja sliku na vrh kartice. Pomoću .card-text
, na karticu se može dodati tekst. Tekst unutar .card-text
se također može stilizirati standardnim HTML oznakama.
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
<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>
Popis grupa
Stvorite popise sadržaja na kartici s grupom popisa za ispiranje.
- Stvar
- Druga stavka
- Treća stavka
<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>
- Stvar
- Druga stavka
- Treća stavka
<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>
- Stvar
- Druga stavka
- Treća stavka
<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>
Kuhinjski sudoper
Pomiješajte i spojite više vrsta sadržaja kako biste stvorili karticu koja vam je potrebna ili ubacite sve tamo. Dolje su prikazani stilovi slika, blokovi, stilovi teksta i grupa popisa—sve umotano u karticu fiksne širine.
Naslov kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
- Stvar
- Druga stavka
- Treća stavka
<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>
Zaglavlje i podnožje
Dodajte izborno zaglavlje i/ili podnožje unutar kartice.
Poseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdje<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>
.card-header
Zaglavlja kartica mogu se stilizirati dodavanjem <h*>
elemenata.
Istaknuto
Poseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdje<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>
Dobro poznati citat, sadržan u elementu 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>
Poseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdje<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>
Dimenzioniranje
Kartice ne pretpostavljaju specifičan width
početak, tako da će biti 100% široke osim ako nije drugačije navedeno. To možete promijeniti prema potrebi pomoću prilagođenog CSS-a, klasa rešetki, grid Sass miksina ili uslužnih programa.
Korištenje mrežnog označavanja
Koristeći rešetku, zamotajte kartice u stupce i retke prema potrebi.
Poseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdjePoseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdje<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>
Korištenje pomoćnih programa
Koristite našu pregršt dostupnih alata za određivanje veličine za brzo postavljanje širine kartice.
<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>
Korištenje prilagođenog CSS-a
Koristite prilagođeni CSS u svojim listovima stilova ili kao ugrađene stilove za postavljanje širine.
Poseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdje<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>
Poravnanje teksta
Možete brzo promijeniti poravnanje teksta bilo koje kartice—u cijelosti ili u određenim dijelovima—s našim klasama poravnanja teksta .
Poseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdjePoseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdjePoseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdje<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Navigacija
Dodajte malo navigacije u zaglavlje (ili blok) kartice s Bootstrapovim navigacijskim komponentama .
Poseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdje<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Poseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdje<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Slike
Kartice uključuju nekoliko opcija za rad sa slikama. Birajte između dodavanja "kapa slika" na oba kraja kartice, preklapanja slika sa sadržajem kartice ili jednostavnog ugrađivanja slike u karticu.
Kape slike
Slično zaglavljima i podnožjima, kartice mogu sadržavati gornje i donje "površine slika"—slike na vrhu ili dnu kartice.
Naslov kartice
Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Zadnji put ažurirano prije 3 minute
Naslov kartice
Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Zadnji put ažurirano prije 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>
Slikovni slojevi
Pretvorite sliku u pozadinu kartice i prekrijte tekst kartice. Ovisno o slici, možda će vam trebati ili neće trebati dodatni stilovi ili uslužni programi.
<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>
Horizontalno
Koristeći kombinaciju rešetki i uslužnih klasa, kartice se mogu napraviti vodoravno na način koji je prilagođen mobilnim uređajima i responzivan. U donjem primjeru uklanjamo oluke rešetke s klasama .g-0
i koristimo .col-md-*
ih kako bismo karticu učinili vodoravnom na md
prijelomnoj točki. Možda će biti potrebne dodatne prilagodbe ovisno o sadržaju kartice.
Naslov kartice
Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Zadnji put ažurirano prije 3 minute
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Stilovi karata
Kartice uključuju različite opcije za prilagodbu pozadine, obruba i boje.
Pozadina i boja
Koristite alate za boju teksta i pozadinu za promjenu izgleda kartice.
Naslov primarne kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov sekundarne kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice uspjeha
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice opasnosti
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice upozorenja
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov info kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Lagani naslov kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov tamne kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Prenošenje značenja pomoćnim tehnologijama
Korištenje boje za dodavanje značenja daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (npr. vidljivog teksta) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .visually-hidden
klasom.
Granica
Upotrijebite granične pomoćne programe za promjenu samo border-color
kartice. Imajte na umu da možete staviti .text-{color}
klase na roditelj .card
ili podskup sadržaja kartice kao što je prikazano u nastavku.
Naslov primarne kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov sekundarne kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice uspjeha
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice opasnosti
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice upozorenja
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov info kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Lagani naslov kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov tamne kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Mixins pomoćni programi
Također možete po potrebi promijeniti obrube zaglavlja i podnožja kartice, pa ih čak i ukloniti background-color
pomoću .bg-transparent
.
Naslov kartice uspjeha
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
<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>
Izgled kartice
Osim oblikovanja sadržaja unutar kartica, Bootstrap uključuje nekoliko opcija za postavljanje niza kartica. Za sada ove opcije izgleda još nisu responzivne .
Grupe kartica
Upotrijebite grupe kartica za prikaz kartica kao jednog, priloženog elementa sa stupcima jednake širine i visine. Grupe karata počinju složene i koriste display: flex;
se za spajanje s jednakim dimenzijama počevši od sm
točke prijeloma.
Naslov kartice
Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Zadnji put ažurirano prije 3 minute
Naslov kartice
Ova kartica ima popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.
Zadnji put ažurirano prije 3 minute
Naslov kartice
Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ova kartica ima čak i duži sadržaj od prve koja prikazuje radnju jednake visine.
Zadnji put ažurirano prije 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>
Kada koristite grupe kartica s podnožjima, njihov će se sadržaj automatski poredati.
Naslov kartice
Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ova kartica ima popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.
Naslov kartice
Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ova kartica ima čak i duži sadržaj od prve koja prikazuje radnju jednake visine.
<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>
Mrežne kartice
Upotrijebite Bootstrap sustav rešetki i njegove .row-cols
klase za kontrolu broja stupaca mreže (omotanih oko vaših kartica) koje prikazujete po retku. Na primjer, ovdje .row-cols-1
postavljamo karte u jedan stupac i .row-cols-md-2
dijelimo četiri karte na jednaku širinu u više redaka, od srednje prijelomne točke prema gore.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Promijenite ga u .row-cols-3
i vidjet ćete omot četvrte karte.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Kada trebate jednaku visinu, dodajte .h-100
karticama. Ako želite jednake visine prema zadanim postavkama, možete postaviti $card-height: 100%
u Sass-u.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ovo je kratka karta.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Baš kao i kod grupa kartica, podnožja kartica će se automatski poredati.
Naslov kartice
Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ova kartica ima popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.
Naslov kartice
Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ova kartica ima čak i duži sadržaj od prve koja prikazuje radnju jednake visine.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
Zidarstvo
v4
Upotrijebili smo tehniku samo za CSS kako bismo oponašali ponašanje stupova nalik na zidanje , ali ova je tehnika imala mnogo neugodnih nuspojava . Ako želite imati ovu vrstu izgleda u v5
, možete jednostavno upotrijebiti dodatak Masonry. Masonry nije uključen u Bootstrap , ali smo napravili demo primjer da vam pomognemo da počnete.
Sass
Varijable
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;