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 .

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.

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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum in eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Predstavljeno

Cras justo odio
Dapibus ac facilisis in
Vestibulum in eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</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.

Naslov kartice

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum in eros

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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Glava in noga

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Nekdo znan v naslovu vira

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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" 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>

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

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

<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-top" 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.

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.

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="..." class="card-img" 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 uporabljajo display: flex;za doseganje enotne velikosti.

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

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

Nazadnje posodobljeno pred 3 minutami

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.

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

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

Nazadnje posodobljeno pred 3 minutami

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.

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

Naslov kartice

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

Nazadnje posodobljeno pred 3 minutami

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.

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

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

Nazadnje posodobljeno pred 3 minutami

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.

Naslov kartice

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

Naslov kartice

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

Naslov kartice

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

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.

Naslov kartice

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

Naslov kartice

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

Naslov kartice

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

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.

Naslov kartice

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

Naslov kartice

To je kratka kartica.

Naslov kartice

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

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.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Nekdo znan v naslovu vira

Naslov kartice

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

Nazadnje posodobljeno pred 3 minutami

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Nekdo znan v naslovu vira

Naslov kartice

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

Nazadnje posodobljeno pred 3 minutami

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</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-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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;
  }
}

kartice

O tem

Primer

Naslov kartice

Vrste vsebine

Telo

Naslovi, besedilo in povezave

Naslov kartice

Podnaslov kartice

Slike

Seznam skupin

Kuhinjsko korito

Naslov kartice

Glava in noga

Posebna obravnava naslova

Predstavljeno

Posebna obravnava naslova

Posebna obravnava naslova

Dimenzioniranje

Uporaba oznak mreže

Posebna obravnava naslova

Posebna obravnava naslova

Uporaba pripomočkov

Naslov kartice

Naslov kartice

Uporaba CSS po meri

Posebna obravnava naslova

Poravnava besedila

Posebna obravnava naslova

Posebna obravnava naslova

Posebna obravnava naslova

Navigacija

Posebna obravnava naslova

Posebna obravnava naslova

Slike

Kapice za slike

Naslov kartice

Naslov kartice

Prekrivne slike

Naslov kartice

Vodoravno

Naslov kartice

Slogi kartic

Ozadje in barva

Naslov primarne kartice

Naslov sekundarne kartice

Naslov kartice uspeha

Naslov kartice nevarnosti

Naslov opozorilne kartice

Naslov informacijske kartice

Naslov lahke karte

Naslov temne kartice

Prenos pomena za podporne tehnologije

Meja

Naslov primarne kartice

Naslov sekundarne kartice

Naslov kartice uspeha

Naslov kartice nevarnosti

Naslov opozorilne kartice

Naslov informacijske kartice

Naslov lahke karte

Naslov temne kartice

Pripomočki Mixins

Naslov kartice uspeha

Postavitev kartice

Skupine kart

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Kompleti kart

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Mrežne kartice