in English

kartice

Bootstrapove kartice zagotavljajo prilagodljiv in razširljiv vsebnik vsebine z več različicami in možnostmi.

O tem

Kartica je prilagodljiv in razširljiv vsebnik vsebine. Vključuje možnosti za glave in noge, široko paleto vsebine, kontekstualne barve ozadja in zmogljive možnosti prikaza. Če poznate Bootstrap 3, kartice nadomeščajo naše stare plošče, vrtine in sličice. Funkcionalnost, podobna tem komponentam, je na voljo kot modifikatorski razred za kartice.

Primer

Kartice so izdelane s čim manj označbami in slogi, vendar še vedno zagotavljajo ogromno nadzora in prilagajanja. Zgrajeni s flexboxom nudijo enostavno poravnavo in se dobro mešajo z drugimi komponentami Bootstrap. marginPrivzeto nimajo , zato po potrebi uporabite pripomočke za razmik .

Spodaj je primer osnovne kartice z mešano vsebino in fiksno širino. Kartice nimajo fiksne začetne širine, zato bodo naravno zapolnile celotno širino nadrejenega elementa. To je enostavno prilagoditi z našimi različnimi možnostmi velikosti .

Placeholder Image cap
Naslov kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Pojdi nekam 
<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 vsebine

Kartice podpirajo široko paleto vsebin, vključno s slikami, besedilom, skupinami seznamov, povezavami in drugim. Spodaj so primeri podprtega.

Telo

Gradnik kartice je .card-body. Uporabite ga, kadar koli potrebujete oblazinjen del kartice.

To je nekaj besedila v telesu kartice. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Naslovi, besedilo in povezave

Naslovi kartic se uporabljajo z dodajanjem .card-titlev <h*>oznako. Na enak način se povezave dodajajo in postavljajo ena poleg druge z dodajanjem .card-linkv <a>oznako.

Podnapisi se uporabljajo tako, .card-subtitleda se <h*>oznaki doda znak. Če sta .card-titleelementa .card-subtitlein postavljena v .card-bodyelement, sta naslov kartice in podnaslov lepo poravnana.

Naslov kartice
Podnaslov kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Povezava do kartice Še ena povezava 
<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-toppostavi sliko na vrh kartice. Z .card-textlahko kartico dodate besedilo. Besedilo znotraj .card-textje mogoče oblikovati tudi s standardnimi oznakami HTML.

Placeholder Image cap

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine 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>

Seznam skupin

Ustvarite sezname vsebine na kartici s skupino splakovalnih seznamov.

  • Stvar
  • Drugi predmet
  • Tretji predmet
<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>
Predstavljeno
  • Stvar
  • Drugi predmet
  • Tretji predmet
<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
  • Drugi predmet
  • Tretji predmet
Noga kartice 
<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>

Kuhinjsko korito

Zmešajte in povežite več vrst vsebine, da ustvarite kartico, ki jo potrebujete, ali pa dodajte vse. Spodaj so prikazani slikovni slogi, bloki, besedilni slogi in skupina seznamov – vse zavito v kartico s fiksno širino.

Placeholder Image cap
Naslov kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

  • Stvar
  • Drugi predmet
  • Tretji predmet
Povezava do kartice Še ena povezava 
<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>

Na kartico dodajte neobvezno glavo in/ali nogo.

Predstavljeno
Posebna obravnava naslova

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Pojdi nekam 
<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>

Glave kartic lahko oblikujete z dodajanjem .card-headerelementom <h*>.

Predstavljeno
Posebna obravnava naslova

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Pojdi nekam 
<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>
Kvota

Dobro znani citat, vsebovan v elementu blockquote.

Nekdo znan v naslovu vira 
<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>
Predstavljeno
Posebna obravnava naslova

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Pojdi nekam
2 dni nazaj 
<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 predvidevajo posebnega widthzačetka, zato bodo 100 % široke, razen če ni navedeno drugače. To lahko po potrebi spremenite s CSS po meri, razredi mreže, miksini mreže Sass ali pripomočki.

Uporaba oznak mreže

Z uporabo mreže zavijte kartice v stolpce in vrstice, kot je potrebno.

Posebna obravnava naslova

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Pojdi nekam
Posebna obravnava naslova

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Pojdi nekam 
<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>

Uporaba pripomočkov

Za hitro nastavitev širine kartice uporabite peščico razpoložljivih pripomočkov za določanje velikosti .

Naslov kartice

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Gumb
Naslov kartice

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Gumb 
<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>

Uporaba CSS po meri

Za nastavitev širine uporabite CSS po meri v svojih listah slogov ali kot vgrajene sloge.

Posebna obravnava naslova

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Pojdi nekam 
<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>

Poravnava besedila

Hitro lahko spremenite poravnavo besedila katere koli kartice – v celoti ali določenih delov – z našimi razredi za poravnavo besedila .

Posebna obravnava naslova

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Pojdi nekam
Posebna obravnava naslova

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Pojdi nekam
Posebna obravnava naslova

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Pojdi nekam 
<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>

Dodajte nekaj navigacije v glavo (ali blok) kartice z navigacijskimi komponentami Bootstrapa .

Posebna obravnava naslova

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Pojdi nekam 
<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>
Posebna obravnava naslova

S podpornim besedilom spodaj kot naravnim uvodom v dodatno vsebino.

Pojdi nekam 
<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>

Slike

Kartice vključujejo nekaj možnosti za delo s slikami. Izbirate lahko med dodajanjem "slikovnih kapic" na obeh koncih kartice, prekrivanjem slik z vsebino kartice ali preprosto vdelavo slike v kartico.

Kapice za slike

Podobno kot glave in noge lahko kartice vključujejo zgornjo in spodnjo »slikovno kapo« – slike na vrhu ali dnu kartice.

Placeholder Image cap
Naslov kartice

To je širša kartica s spodnjim podpornim besedilom kot naravnim uvodom v dodatno vsebino. Ta vsebina je malo daljša.

Nazadnje posodobljeno pred 3 minutami

Naslov kartice

To je širša kartica s spodnjim podpornim besedilom kot naravnim uvodom v dodatno vsebino. Ta vsebina je malo daljša.

Nazadnje posodobljeno pred 3 minutami

Placeholder Image cap 
<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>

Prekrivne slike

Spremenite sliko v ozadje kartice in prekrijte besedilo kartice. Odvisno od slike boste morda potrebovali dodatne sloge ali pripomočke ali pa tudi ne.

Placeholder Card image
Naslov kartice

To je širša kartica s spodnjim podpornim besedilom kot naravnim uvodom v dodatno vsebino. Ta vsebina je malo daljša.

Nazadnje posodobljeno pred 3 minutami

<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>
Upoštevajte, da vsebina ne sme biti večja od višine slike. Če je vsebina večja od slike, bo vsebina prikazana zunaj slike.

Vodoravno

S kombinacijo omrežnih in uporabnih razredov je mogoče kartice narediti vodoravne na mobilnih napravah prijazen in odziven način. V spodnjem primeru odstranimo mrežne žlebove z razredi .no-guttersin jih uporabimo .col-md-*, da naredimo kartico vodoravno na mdprelomni točki. Morda bodo potrebne dodatne prilagoditve, odvisno od vsebine kartice.

Placeholder Image
Naslov kartice

To je širša kartica s spodnjim podpornim besedilom kot naravnim uvodom v dodatno vsebino. Ta vsebina je malo daljša.

Nazadnje posodobljeno pred 3 minutami

<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>

Slogi kartic

Kartice vključujejo različne možnosti za prilagajanje ozadja, obrob in barve.

Ozadje in barva

Uporabite pripomočke za besedilo in ozadje , da spremenite videz kartice.

Glava
Naslov primarne kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov sekundarne kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov kartice uspeha

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov kartice nevarnosti

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov opozorilne kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov informacijske kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov lahke karte

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov temne kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine 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-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>
Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .sr-onlyrazredom.

Meja

Uporabite mejne pripomočke , da spremenite samo border-colorkartico. Upoštevajte, da lahko nadrejeni ali podmnožici vsebine kartice postavite .text-{color}razrede , kot je prikazano spodaj..card

Glava
Naslov primarne kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov sekundarne kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov kartice uspeha

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov kartice nevarnosti

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov opozorilne kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov informacijske kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov lahke karte

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava
Naslov temne kartice

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine 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 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>

Pripomočki Mixins

Prav tako lahko po potrebi spremenite robove glave in noge kartice in jih celo odstranite background-colorz .bg-transparent.

Glava
Naslov kartice uspeha

Nekaj ​​hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Noga 
<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>

Postavitev kartice

Poleg oblikovanja vsebine znotraj kartic Bootstrap vključuje nekaj možnosti za postavitev serije kartic. Zaenkrat te možnosti postavitve še niso odzivne .

Skupine kart

Uporabite skupine kartic za upodobitev kartic kot enega samega pritrjenega elementa s stolpci enake širine in višine. Skupine kartic so na začetku zložene in se uporabljajo display: flex;za pritrditev z enotnimi dimenzijami, ki se začnejo na smprelomni točki.

Placeholder Image cap
Naslov kartice

To je širša kartica s spodnjim podpornim besedilom kot naravnim uvodom v dodatno vsebino. Ta vsebina je malo daljša.

Nazadnje posodobljeno pred 3 minutami

Placeholder Image cap
Naslov kartice

Ta kartica ima spodaj spremno besedilo kot naravni uvod v dodatno vsebino.

Nazadnje posodobljeno pred 3 minutami

Placeholder Image cap
Naslov kartice

To je širša kartica s spodnjim podpornim besedilom kot naravnim uvodom v dodatno vsebino. Ta kartica ima celo daljšo vsebino kot prva, ki prikazuje dejanje enake višine.

Nazadnje posodobljeno pred 3 minutami

<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>

Pri uporabi skupin kartic z nogami se bo njihova vsebina samodejno poravnala.

Placeholder Image cap
Naslov kartice

To je širša kartica s spodnjim podpornim besedilom kot naravnim uvodom v dodatno vsebino. Ta vsebina je malo daljša.

Nazadnje posodobljeno pred 3 minutami
Placeholder Image cap
Naslov kartice

Ta kartica ima spodaj spremno besedilo kot naravni uvod v dodatno vsebino.

Nazadnje posodobljeno pred 3 minutami
Placeholder Image cap
Naslov kartice

To je širša kartica s spodnjim podpornim besedilom kot naravnim uvodom v dodatno vsebino. Ta kartica ima celo daljšo vsebino kot prva, ki prikazuje dejanje enake višine.

Nazadnje posodobljeno pred 3 minutami 
<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>

Kompleti kart

Potrebujete niz kartic enake širine in višine, ki niso pritrjene ena na drugo? Uporabite komplete kart.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino. Ta vsebina je malo daljša.

Nazadnje posodobljeno pred 3 minutami

Placeholder Image cap
Naslov kartice

Ta kartica ima spodaj spremno besedilo kot naravni uvod v dodatno vsebino.

Nazadnje posodobljeno pred 3 minutami

Placeholder Image cap
Naslov kartice

To je širša kartica s spodnjim podpornim besedilom kot naravnim uvodom v dodatno vsebino. Ta kartica ima celo daljšo vsebino kot prva, ki prikazuje dejanje enake višine.

Nazadnje posodobljeno pred 3 minutami

<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>

Tako kot pri skupinah kart se bodo noge kart v kompletih samodejno poravnale.

Placeholder Image cap
Naslov kartice

To je širša kartica s spodnjim podpornim besedilom kot naravnim uvodom v dodatno vsebino. Ta vsebina je malo daljša.

Nazadnje posodobljeno pred 3 minutami
Placeholder Image cap
Naslov kartice

Ta kartica ima spodaj spremno besedilo kot naravni uvod v dodatno vsebino.

Nazadnje posodobljeno pred 3 minutami
Placeholder Image cap
Naslov kartice

To je širša kartica s spodnjim podpornim besedilom kot naravnim uvodom v dodatno vsebino. Ta kartica ima celo daljšo vsebino kot prva, ki prikazuje dejanje enake višine.

Nazadnje posodobljeno pred 3 minutami 
<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>

Mrežne kartice

Uporabite mrežni sistem Bootstrap in njegove .row-colsrazrede , da nadzirate, koliko stolpcev mreže (ovitih okoli vaših kartic) prikažete na vrstico. Na primer, tukaj je .row-cols-1postavitev kartic v en stolpec in .row-cols-md-2razdelitev štirih kartic na enako širino v več vrsticah, od srednje prelomne točke navzgor.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino. Ta vsebina je malo daljša.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino. Ta vsebina je malo daljša.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino. Ta vsebina je malo daljša.

<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>

Spremenite ga v .row-cols-3in videli boste četrti ovoj karte.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino. Ta vsebina je malo daljša.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino. Ta vsebina je malo daljša.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino. Ta vsebina je malo daljša.

<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>

Ko potrebujete enako višino, dodajte .h-100kartam. Če želite privzeto enake višine, jih lahko nastavite $card-height: 100%v Sass.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino. Ta vsebina je malo daljša.

Placeholder Image cap
Naslov kartice

To je kratka kartica.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino.

Placeholder Image cap
Naslov kartice

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino. Ta vsebina je malo daljša.

<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>

Stolpci kartic

Kartice je mogoče organizirati v stolpce, podobne zidarstvu.card-columns , samo s CSS, tako da jih ovijete v . Kartice so izdelane z columnlastnostmi CSS namesto flexboxa za lažjo poravnavo. Karte so razvrščene od zgoraj navzdol in od leve proti desni.

Glavo pokonci! Vaša kilometrina s stolpci kartice se lahko razlikuje. Če želimo preprečiti, da bi se karte zlomile po stolpcih, jih moramo nastaviti na display: inline-blockas , kar column-break-inside: avoidše ni neprebojna rešitev.

Placeholder Image cap
Naslov kartice, ki se previje v novo vrstico

To je daljša kartica s spodnjim podpornim besedilom kot naravni uvod v dodatno vsebino. Ta vsebina je malo daljša.

Dobro znani citat, vsebovan v elementu blockquote.

Nekdo znan v naslovu vira
Placeholder Image cap
Naslov kartice

Ta kartica ima spodaj spremno besedilo kot naravni uvod v dodatno vsebino.

Nazadnje posodobljeno pred 3 minutami

Dobro znani citat, vsebovan v elementu blockquote.

Nekdo znan v naslovu vira
Naslov kartice

Ta kartica ima običajni naslov in kratek odstavek besedila pod njim.

Nazadnje posodobljeno pred 3 minutami

Placeholder Card image

Dobro znani citat, vsebovan v elementu blockquote.

Nekdo znan v naslovu vira
Naslov kartice

To je še ena kartica z naslovom in podpornim besedilom spodaj. Ta kartica ima nekaj dodatne vsebine, da je na splošno nekoliko višja.

Nazadnje posodobljeno pred 3 minutami

<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>

Stolpce kartic je mogoče tudi razširiti in prilagoditi z nekaj dodatne kode. Spodaj je prikazana razširitev .card-columnsrazreda, ki uporablja isti CSS, ki ga uporabljamo – stolpce CSS – za ustvarjanje nabora odzivnih stopenj za spreminjanje števila stolpcev.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}