Kaardid

Bootstrapi kaardid pakuvad paindlikku ja laiendatavat sisukonteinerit mitme variandi ja valikuga.

Umbes

Kaart on paindlik ja pikendatav sisukonteiner. See sisaldab päiste ja jaluste valikuid, laia valikut sisu, kontekstipõhiseid taustavärve ja võimsaid kuvavalikuid. Kui olete Bootstrap 3-ga tuttav, asendavad kaardid meie vanad paneelid, süvendid ja pisipildid. Nende komponentidega sarnane funktsionaalsus on saadaval kaartide modifikaatoriklassidena.

Näide

Kaardid on ehitatud võimalikult väikese märgistuse ja stiilidega, kuid suudavad siiski pakkuda palju juhtimis- ja kohandamisvõimalusi. Flexboxiga ehitatud need pakuvad lihtsat joondamist ja segunevad hästi teiste Bootstrapi komponentidega. Vaikimisi neil puudub margin, seega kasutage vajadusel vaheutiliite .

Allpool on näide segasisu ja fikseeritud laiusega põhikaardist. Kaartidel ei ole alustamiseks fikseeritud laiust, seega täidavad need loomulikult kogu emaelemendi laiuse. Seda on lihtne kohandada meie erinevate suurusvalikutega .

Kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Mine kuhugi

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

Sisu tüübid

Kaardid toetavad laia valikut sisu, sealhulgas pilte, teksti, loendirühmi, linke ja palju muud. Allpool on näited selle kohta, mida toetatakse.

Keha

Kaardi ehitusplokk on .card-body. Kasutage seda alati, kui vajate kaardil polsterdatud osa.

See on tekst kaardi kehas.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Pealkirjad, tekst ja lingid

Kaartide pealkirju kasutatakse sildi .card-titlelisamisel . <h*>Samamoodi lisatakse lingid ja asetatakse need kõrvuti sildi .card-linklisamisega .<a>

Subtiitreid kasutatakse märgendile .card-subtitlea lisamisel. <h*>Kui üksused .card-titleja .card-subtitleüksused on üksusesse paigutatud .card-body, on kaardi pealkiri ja alapealkiri kenasti joondatud.

Kaardi pealkiri

Kaardi alapealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Kaardi link Teine 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>

Pildid

.card-img-topasetab pildi kaardi ülaossa. Funktsiooniga .card-textsaab kaardile teksti lisada. Teksti .card-textsaab kujundada ka standardsete HTML-märgendite abil.

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

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

Loetlege rühmad

Looge kaardil sisuloendeid loputusloendi rühmaga.

Cras justo odio
Dapibus ac facilisis sisse
Vestibulum ja 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>

Esiletõstetud

Cras justo odio
Dapibus ac facilisis sisse
Vestibulum ja 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>

Köögikraanikauss

Segage ja sobitage mitut tüüpi sisu, et luua vajalik kaart või visake sinna kõik. Allpool on näidatud pildistiilid, plokid, tekstistiilid ja loendirühm – kõik mähitud fikseeritud laiusega kaardile.

Kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Cras justo odio
Dapibus ac facilisis sisse
Vestibulum ja eros

Kaardi link Teine link

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

Päis ja jalus

Lisage kaardile valikuline päis ja/või jalus.

Esiletõstetud

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

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

Kaardi päiseid saab elementidele .card-headerlisades stiilida.<h*>

Esiletõstetud

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

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

Tsiteeri

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

Keegi kuulus allika pealkirjas

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

Esiletõstetud

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

2 päeva tagasi

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

Suuruse määramine

Kaardid eeldavad width, et alustamiseks pole konkreetset, seega on need 100% laiad, kui pole märgitud teisiti. Saate seda vastavalt vajadusele muuta kohandatud CSS-i, ruudustikuklasside, grid Sassi segude või utiliitidega.

Võrgumärgistuse kasutamine

Kasutades ruudustikku, mähkige kaardid vastavalt vajadusele veergudesse ja ridadesse.

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

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

Kommunaalteenuste kasutamine

Kaardi laiuse kiireks määramiseks kasutage meie käputäis saadaolevaid suuruse määramise utiliite .

Kaardi pealkiri

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Nupp

Kaardi pealkiri

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Nupp

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

Kohandatud CSS-i kasutamine

Kasutage kohandatud CSS-i oma stiililehtedel või laiuse määramiseks tekstisiseste stiilidena.

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

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

Teksti joondamine

Meie teksti joondusklasside abil saate kiiresti muuta mis tahes kaardi teksti joondust – tervikuna või teatud osades .

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

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

Lisage Bootstrapi navigeerimiskomponentide abil kaardi päisesse (või plokki) navigeerimisvõimalust .

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

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

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

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

Pildid

Kaardid sisaldavad mõningaid võimalusi piltidega töötamiseks. Saate valida, kas lisada kaardi mõlemale otsale „pildipealsed”, katta pildid kaardi sisuga või manustada pilt lihtsalt kaardile.

Pildikorgid

Sarnaselt päistele ja jalustele võivad kaardid sisaldada ülemist ja alumist "kujutist" – kujutisi kaardi üla- või alaosas.

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

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

Pildi ülekatted

Muutke pilt kaardi taustaks ja katke oma kaardi tekst. Olenevalt pildist võib või ei pruugi te vajada täiendavaid stiile või utiliite.

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

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

Pange tähele, et sisu ei tohiks olla suurem kui pildi kõrgus. Kui sisu on pildist suurem, kuvatakse sisu väljaspool pilti.

Horisontaalne

Kasutades ruudustiku ja kasuliku klasside kombinatsiooni, saab kaardid muuta horisontaalseks mobiilisõbralikul ja reageerimisvõimelisel viisil. Allolevas näites eemaldame ruudustiku vihmaveerennid .no-guttersja kasutame klasse, et muuta kaart murdepunktis .col-md-*horisontaalseks . mdOlenevalt teie kaardi sisust võib vaja minna täiendavaid kohandusi.

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

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

Kaardi stiilid

Kaardid sisaldavad erinevaid võimalusi nende tausta, ääriste ja värvi kohandamiseks.

Taust ja värv

Kasutage kaardi välimuse muutmiseks teksti- ja taustautiliite .

Päis

Peamine kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Teisese kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Edukaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Ohukaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Hoiatuskaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Infokaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Valguskaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Tume kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

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

Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .sr-onlyVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .

Piir

Kasutage piiride utiliite , et muuta ainult border-colorkaardi sisu. Pange tähele, et saate .text-{color}klasse lisada vanemale .cardvõi kaardi sisu alamhulgale, nagu allpool näidatud.

Päis

Peamine kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Teisese kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Edukaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Ohukaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Hoiatuskaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Infokaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Valguskaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Tume kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

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

Mixins kommunaalteenused

Samuti saate vastavalt vajadusele muuta kaardi päise ja jaluse ääriseid ning neid isegi eemaldada background-colornupuga .bg-transparent.

Päis

Edukaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Jalus

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

Kaardi paigutus

Lisaks kaartide sisu kujundamisele sisaldab Bootstrap mõningaid võimalusi kaartide seeriate paigutamiseks. Praegu need paigutusvalikud veel ei reageeri .

Kaardirühmad

Kasutage kaardirühmi, et renderdada kaardid ühe kinnitatud elemendina võrdse laiuse ja kõrgusega veergudega. Kaardirühmad kasutavad display: flex;ühtse suuruse saavutamiseks.

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

Kaardi pealkiri

Sellel kaardil on allpool toetav tekst, mis on loomuliku lisasisu juurde.

Viimati värskendatud 3 minutit tagasi

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. Sellel kaardil on isegi pikem sisu kui esimesel, mis näitab seda võrdse kõrgusega tegevust.

Viimati värskendatud 3 minutit tagasi

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

Jalustega kaardirühmade kasutamisel reastub nende sisu automaatselt.

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

Kaardi pealkiri

Sellel kaardil on allpool toetav tekst, mis on loomuliku lisasisu juurde.

Viimati värskendatud 3 minutit tagasi

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. Sellel kaardil on isegi pikem sisu kui esimesel, mis näitab seda võrdse kõrgusega tegevust.

Viimati värskendatud 3 minutit tagasi

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

Kaardipakid

Kas vajate võrdse laiuse ja kõrgusega kaarte, mis pole üksteise külge kinnitatud? Kasutage kaardipakke.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

Kaardi pealkiri

Sellel kaardil on allpool toetav tekst, mis on loomuliku lisasisu juurde.

Viimati värskendatud 3 minutit tagasi

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. Sellel kaardil on isegi pikem sisu kui esimesel, mis näitab seda võrdse kõrgusega tegevust.

Viimati värskendatud 3 minutit tagasi

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

Nii nagu kaardigruppide puhul, reastuvad kaardipakkide jalused automaatselt.

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

Kaardi pealkiri

Sellel kaardil on allpool toetav tekst, mis on loomuliku lisasisu juurde.

Viimati värskendatud 3 minutit tagasi

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. Sellel kaardil on isegi pikem sisu kui esimesel, mis näitab seda võrdse kõrgusega tegevust.

Viimati värskendatud 3 minutit tagasi

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

Võrgukaardid

Kasutage Bootstrapi ruudustikusüsteemi ja selle .row-colsklasse , et juhtida, mitu ruudustiku veergu (mis on ümbritsetud teie kaartidega) ühe rea kohta kuvatakse. Näiteks siin on .row-cols-1kaartide paigutamine ühte veergu ja .row-cols-md-2nelja kaardi jagamine võrdseks laiuseks mitme rea vahel, alates keskmisest katkestuspunktist ülespoole.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

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

Muutke see .row-cols-3ja näete neljandat kaardiümbrist.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

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

Kui vajate võrdset kõrgust, lisage .h-100kaartidele. Kui soovite vaikimisi võrdseid kõrgusi, saate määrata $card-height: 100%Sassis.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Kaardi pealkiri

See on lühike kaart.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde.

Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

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

Kaardi veerud

Kaarte saab korraldada müüritiselaadseteks veergudeks, kasutades ainult CSS-i, mähkides need sisse .card-columns. Kaardid on columnhõlpsamaks joondamiseks loodud CSS-i atribuutidega, mitte flexboxiga. Kaardid on järjestatud ülalt alla ja vasakult paremale.

Pea püsti! Teie läbisõit kaardi veergudega võib erineda. Et vältida kaartide murdumist üle veergude, peame need määrama, display: inline-blockkuna column-break-inside: avoidsee pole veel kuulikindel lahendus.

Kaardi pealkiri, mis murrab uuele reale

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

Keegi kuulus allika pealkirjas

Kaardi pealkiri

Sellel kaardil on allpool toetav tekst, mis on loomuliku lisasisu juurde.

Viimati värskendatud 3 minutit tagasi

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat.

Keegi kuulus allika pealkirjas

Kaardi pealkiri

Sellel kaardil on tavaline pealkiri ja selle all lühike tekstilõik.

Viimati värskendatud 3 minutit tagasi

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

Keegi kuulus allika pealkirjas

Kaardi pealkiri

See on veel üks kaart, mille pealkiri ja tugitekst on allpool. Sellel kaardil on lisasisu, et muuta see üldiselt pisut kõrgemaks.

Viimati värskendatud 3 minutit tagasi

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

Kaardi veerge saab ka mõne lisakoodiga laiendada ja kohandada. Allpool on näidatud .card-columnsklassi laiend, mis kasutab sama CSS-i, mida me kasutame – CSS-i veerge –, et luua veergude arvu muutmiseks reageerivate tasandite komplekt.

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

Kaardid

Umbes

Näide

Kaardi pealkiri

Sisu tüübid

Keha

Pealkirjad, tekst ja lingid

Kaardi pealkiri

Kaardi alapealkiri

Pildid

Loetlege rühmad

Köögikraanikauss

Kaardi pealkiri

Päis ja jalus

Spetsiaalne tiitlitöötlus

Esiletõstetud

Spetsiaalne tiitlitöötlus

Spetsiaalne tiitlitöötlus

Suuruse määramine

Võrgumärgistuse kasutamine

Spetsiaalne tiitlitöötlus

Spetsiaalne tiitlitöötlus

Kommunaalteenuste kasutamine

Kaardi pealkiri

Kaardi pealkiri

Kohandatud CSS-i kasutamine

Spetsiaalne tiitlitöötlus

Teksti joondamine

Spetsiaalne tiitlitöötlus

Spetsiaalne tiitlitöötlus

Spetsiaalne tiitlitöötlus

Navigeerimine

Spetsiaalne tiitlitöötlus

Spetsiaalne tiitlitöötlus

Pildid

Pildikorgid

Kaardi pealkiri

Kaardi pealkiri

Pildi ülekatted

Kaardi pealkiri

Horisontaalne

Kaardi pealkiri

Kaardi stiilid

Taust ja värv

Peamine kaardi pealkiri

Teisese kaardi pealkiri

Edukaardi pealkiri

Ohukaardi pealkiri

Hoiatuskaardi pealkiri

Infokaardi pealkiri

Valguskaardi pealkiri

Tume kaardi pealkiri

Abitehnoloogiate tähenduse edasiandmine

Piir

Peamine kaardi pealkiri

Teisese kaardi pealkiri

Edukaardi pealkiri

Ohukaardi pealkiri

Hoiatuskaardi pealkiri

Infokaardi pealkiri

Valguskaardi pealkiri

Tume kaardi pealkiri

Mixins kommunaalteenused

Edukaardi pealkiri

Kaardi paigutus

Kaardirühmad

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Kaardipakid

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Võrgukaardid