Kaardid

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

Sellel lehel

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

html

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

html

<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

html

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

html

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

Asi
Teine ese
Kolmas ese

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Esiletõstetud

Asi
Teine ese
Kolmas ese

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Asi
Teine ese
Kolmas ese

Kaardi jalus

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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.

Asi
Teine ese
Kolmas ese

Kaardi link Teine link

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

html

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

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

Esiletõstetud

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

html

<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

Tuntud tsitaat, mis sisaldub blockquote elemendis.

Keegi kuulus allika pealkirjas

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Esiletõstetud

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi

2 päeva tagasi

html

<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

html

<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

html

<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

html

<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

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">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

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

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

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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 .g-0ja 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

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Kaardi stiilid

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

Taust ja värv

Lisatud versioonisse v5.2.0

Määrake meie abilistegabackground-color kontrastne coloresiplaan . Varem oli vaja käsitsi siduda oma valik ja stiili utiliidid, mida saate soovi korral endiselt kasutada..text-bg-{color}.text-{color}.bg-{color}

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.

html

<div class="card text-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-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-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-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-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-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-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-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. .visually-hiddenVeenduge, 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.

html

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins 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

html

<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 algavad virnastatuna ja display: flex;neid kasutatakse ühtsete mõõtmetega kinnitamiseks alates smkatkestuspunktist.

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

html

<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

html

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

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.

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Sarnaselt kaardirühmadega joonduvad kaartide 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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Müüritis

Aastal v4kasutasime müüritiselaadsete sammaste käitumise jäljendamiseks ainult CSS-i tehnikat, kuid sellel tehnikal oli palju ebameeldivaid kõrvalmõjusid . Kui soovite seda tüüpi paigutust rakenduses v5kasutada, võite lihtsalt kasutada Masonry pluginat. Müüritööd ei sisaldu Bootstrapis , kuid oleme koostanud demonäite , mis aitab teil alustada.

CSS

Muutujad

Lisatud versioonisse v5.2.0

Osana Bootstrapi arenevast CSS-muutujate lähenemisviisist kasutavad kaardid nüüd kohalikke CSS-muutujaid, .cardet täiustada reaalajas kohandamist. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sassi muutujad

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

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

Võrgukaardid

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri

Kaardi pealkiri