Source

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 .

100% x 180
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 class="card-img-top" src="..." alt="Card image cap">
  <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>

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.

Pildi kaas [100%x180]

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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.

Pildi kaas [100%x180]
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
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

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

100% x 180
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

100% x 180
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</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.

100% x 270
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 class="card-img" src="..." alt="Card image">
  <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>

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. Veenduge, et värviga tähistatud teave oleks sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks .sr-onlyklassiga 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.

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

100% x 180
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

100% x 180
Kaardi pealkiri

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

Viimati värskendatud 3 minutit tagasi

100% x 180
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

100% x 180
Kaardi pealkiri

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

100% x 180
Kaardi pealkiri

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

100% x 180
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.

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

100%x200
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

100%x200
Kaardi pealkiri

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

Viimati värskendatud 3 minutit tagasi

100%x200
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

100% x 180
Kaardi pealkiri

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

100% x 180
Kaardi pealkiri

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

100% x 180
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.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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.

100% x 160
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
100% x 160
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 allpool toetav tekst, mis on loomuliku lisasisu juurde.

Viimati värskendatud 3 minutit tagasi

100% x 260

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

Keegi kuulus allika pealkirjas
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-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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">
        <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 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 class="card-img" src="..." alt="Card image">
  </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 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>

Kaardi veerge saab ka mõne lisakoodiga laiendada ja kohandada. Allpool on näidatud .card-columnsklassi laiend, mis kasutab sama CSS-i – 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;
  }
}