Source

Kartes

Bootstrap kartes nodrošina elastīgu un paplašināmu satura konteineru ar vairākiem variantiem un opcijām.

Par

Karte ir elastīgs un paplašināms satura konteiners. Tajā ir iekļautas galvenes un kājenes, plašs satura klāsts, kontekstuālas fona krāsas un jaudīgas displeja opcijas. Ja esat pazīstams ar Bootstrap 3, kartes aizstāj mūsu vecos paneļus, iedobes un sīktēlus. Šiem komponentiem līdzīga funkcionalitāte ir pieejama kā karšu modifikatoru klases.

Piemērs

Kartes ir veidotas ar pēc iespējas mazāku marķējumu un stilu, taču tās joprojām spēj nodrošināt daudz kontroles un pielāgošanas. Izgatavoti ar flexbox, tie nodrošina vieglu izlīdzināšanu un labi sajaucas ar citiem Bootstrap komponentiem. Pēc noklusējuma tām nav margin, tāpēc pēc vajadzības izmantojiet atstarpju utilītas .

Tālāk ir sniegts piemērs pamata kartītei ar jauktu saturu un fiksētu platumu. Kartēm nav noteikts sākuma platums, tāpēc tās, protams, aizpildīs visu vecākelementa platumu. To var viegli pielāgot, izmantojot mūsu dažādo izmēru opcijas .

100%x180
Kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Aizej kaut kur
<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>

Satura veidi

Kartes atbalsta plašu satura klāstu, tostarp attēlus, tekstu, sarakstu grupas, saites un daudz ko citu. Tālāk ir sniegti atbalstītā satura piemēri.

Ķermenis

Kartes veidošanas bloks ir .card-body. Izmantojiet to ikreiz, kad kartē nepieciešama polsterēta sadaļa.

Šis ir teksts kartītes pamattekstā.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Kartīšu nosaukumi tiek izmantoti, pievienojot .card-titleatzīmei <h*>. Tādā pašā veidā saites tiek pievienotas un novietotas viena otrai blakus, pievienojot .card-linkatzīmi <a>.

.card-subtitleSubtitri tiek izmantoti , pievienojot <h*>atzīmei. Ja vienumi .card-titleun .card-subtitleir ievietoti .card-bodyvienumā, kartītes virsraksts un apakšvirsraksts ir labi izlīdzināti.

Kartes nosaukums
Kartes apakšvirsraksts

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Kartes saite Vēl viena saite
<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>

Attēli

.card-img-topnovieto attēlu kartes augšpusē. Izmantojot .card-text, kartītei var pievienot tekstu. Tekstu .card-textvar veidot arī ar standarta HTML tagiem.

Attēla vāciņš [100%x180]

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

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

Saraksta grupas

Izveidojiet satura sarakstus kartītē ar iztukšošanas sarakstu grupu.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulums un eross
<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>
Piedāvātie
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulums un eross
<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>

Virtuves izlietne

Sajauciet un saskaņojiet vairākus satura veidus, lai izveidotu vajadzīgo karti, vai arī ievietojiet tajā visu. Tālāk ir parādīti attēlu stili, bloki, teksta stili un sarakstu grupa — tas viss ir ietīts fiksēta platuma kartē.

Attēla vāciņš [100%x180]
Kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulums un eross
<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>

Pievienojiet kartītei papildu galveni un/vai kājeni.

Piedāvātie
Īpaša titula apstrāde

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Aizej kaut kur
<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>

Kartīšu galvenes var veidot, pievienojot .card-headertās <h*>elementiem.

Piedāvātie
Īpaša titula apstrāde

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Aizej kaut kur
<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>
Citāts

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

Kāds slavens avota nosaukumā
<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>
Piedāvātie
Īpaša titula apstrāde

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Aizej kaut kur
<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>

Izmēru noteikšana

Uzskata, ka kartītēm nav īpaša widthsākuma, tāpēc tās būs 100% platas, ja vien nav norādīts citādi. Varat to mainīt pēc vajadzības, izmantojot pielāgotu CSS, režģa klases, režģa Sass mixins vai utilītas.

Izmantojot režģa marķējumu

Izmantojot režģi, pēc vajadzības ietiniet kartītes kolonnās un rindās.

Īpaša titula apstrāde

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Aizej kaut kur
Īpaša titula apstrāde

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Aizej kaut kur
<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>

Izmantojot komunālos pakalpojumus

Izmantojiet mūsu nedaudzās pieejamās izmēru noteikšanas utilītas , lai ātri iestatītu kartes platumu.

Kartes nosaukums

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Poga
Kartes nosaukums

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

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

Izmantojot pielāgotu CSS

Izmantojiet pielāgotu CSS savās stilu lapās vai kā iekļautos stilus, lai iestatītu platumu.

Īpaša titula apstrāde

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Aizej kaut kur
<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>

Teksta izlīdzināšana

Izmantojot mūsu teksta līdzināšanas klases , varat ātri mainīt jebkuras kartītes teksta līdzinājumu — kopumā vai atsevišķās daļās .

Īpaša titula apstrāde

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Aizej kaut kur
Īpaša titula apstrāde

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Aizej kaut kur
Īpaša titula apstrāde

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Aizej kaut kur
<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>

Pievienojiet kartes galvenei (vai blokam) navigāciju, izmantojot Bootstrap navigācijas komponentus .

Īpaša titula apstrāde

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Aizej kaut kur
<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>
Īpaša titula apstrāde

Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.

Aizej kaut kur
<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>

Attēli

Kartēs ir iekļautas dažas iespējas darbam ar attēliem. Izvēlieties pievienot “attēlu vāciņus” abos kartītes galos, pārklāt attēlus ar kartes saturu vai vienkārši iegult attēlu kartītē.

Attēlu vāciņi

Līdzīgi kā galvenes un kājenes, kartītes var ietvert augšējo un apakšējo “attēlu vāciņu” — attēlus kartītes augšdaļā vai apakšā.

100%x180
Kartes nosaukums

Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šis saturs ir nedaudz garāks.

Pēdējo reizi atjaunināts pirms 3 minūtēm

Kartes nosaukums

Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šis saturs ir nedaudz garāks.

Pēdējo reizi atjaunināts pirms 3 minūtēm

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

Attēlu pārklājumi

Pārvērtiet attēlu kartītes fonā un pārklājiet kartītes tekstu. Atkarībā no attēla jums var būt vai nav nepieciešami papildu stili vai utilītas.

100%x270
Kartes nosaukums

Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šis saturs ir nedaudz garāks.

Pēdējo reizi atjaunināts pirms 3 minūtēm

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

Karšu stili

Kartes ietver dažādas iespējas, lai pielāgotu to fonu, apmales un krāsu.

Fons un krāsa

Izmantojiet teksta un fona utilītas , lai mainītu kartes izskatu.

Virsraksts
Galvenās kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Sekundārās kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Veiksmes kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Bīstamības kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Brīdinājuma kartītes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Informācijas kartītes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Gaismas kartītes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Tumšās kartītes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

<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>
Nozīmes nodošana palīgtehnoloģijām

Krāsu izmantošana nozīmes pievienošanai nodrošina tikai vizuālu norādi, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem. Nodrošiniet, lai informācija, kas apzīmēta ar krāsu, būtu vai nu acīmredzama no paša satura (piemēram, redzamā teksta), vai arī tā ir iekļauta, izmantojot alternatīvus līdzekļus, piemēram, ar .sr-onlyklasi paslēptu papildu tekstu.

Robeža

Izmantojiet apmales utilītas , lai mainītu tikai border-colorkartes vērtību. Ņemiet vērā, ka varat ievietot .text-{color}klases vecākvienībā .cardvai kartītes satura apakškopā, kā parādīts tālāk.

Virsraksts
Galvenās kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Sekundārās kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Veiksmes kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Bīstamības kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Brīdinājuma kartītes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Informācijas kartītes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Gaismas kartītes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts
Tumšās kartītes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

<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 komunālie pakalpojumi

Varat arī pēc vajadzības mainīt kartītes galvenes un kājenes apmales un pat tās noņemt, background-colorizmantojot .bg-transparent.

Virsraksts
Veiksmes kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

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

Kartes izkārtojums

Papildus satura veidošanai kartītēs, Bootstrap ietver dažas iespējas karšu sēriju izkārtošanai. Pagaidām šīs izkārtojuma opcijas vēl nav piemērotas .

Karšu grupas

Izmantojiet kartīšu grupas, lai renderētu kartītes kā vienu pievienotu elementu ar vienāda platuma un augstuma kolonnām. Karšu grupas izmanto display: flex;, lai sasniegtu vienotu izmēru.

100%x180
Kartes nosaukums

Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šis saturs ir nedaudz garāks.

Pēdējo reizi atjaunināts pirms 3 minūtēm

100%x180
Kartes nosaukums

Tālāk šajā kartītē ir papildu teksts, kas ir dabisks ievads papildu saturam.

Pēdējo reizi atjaunināts pirms 3 minūtēm

100%x180
Kartes nosaukums

Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šai kartītei ir pat garāks saturs nekā pirmajai, kas parāda šo vienāda augstuma darbību.

Pēdējo reizi atjaunināts pirms 3 minūtēm

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

Izmantojot kartīšu grupas ar kājenēm, to saturs tiks automātiski sakārtots rindā.

100%x180
Kartes nosaukums

Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šis saturs ir nedaudz garāks.

100%x180
Kartes nosaukums

Tālāk šajā kartītē ir papildu teksts, kas ir dabisks ievads papildu saturam.

100%x180
Kartes nosaukums

Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šai kartītei ir pat garāks saturs nekā pirmajai, kas parāda šo vienāda augstuma darbību.

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

Kāršu klāji

Vai jums ir nepieciešams vienāda platuma un augstuma karšu komplekts, kas nav piestiprinātas viena otrai? Izmantojiet kāršu klājus.

100%x200
Kartes nosaukums

Šī ir garāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šis saturs ir nedaudz garāks.

Pēdējo reizi atjaunināts pirms 3 minūtēm

100%x200
Kartes nosaukums

Tālāk šajā kartītē ir papildu teksts, kas ir dabisks ievads papildu saturam.

Pēdējo reizi atjaunināts pirms 3 minūtēm

100%x200
Kartes nosaukums

Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šai kartītei ir pat garāks saturs nekā pirmajai, kas parāda šo vienāda augstuma darbību.

Pēdējo reizi atjaunināts pirms 3 minūtēm

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

Tāpat kā kāršu grupās, kāršu kājenes klājos automātiski sarindosies.

100%x180
Kartes nosaukums

Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šis saturs ir nedaudz garāks.

100%x180
Kartes nosaukums

Tālāk šajā kartītē ir papildu teksts, kas ir dabisks ievads papildu saturam.

100%x180
Kartes nosaukums

Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šai kartītei ir pat garāks saturs nekā pirmajai, kas parāda šo vienāda augstuma darbību.

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

Kartīšu kolonnas

Kartes var sakārtot mūra kolonnās, izmantojot tikai CSS, iesaiņojot tās .card-columns. Kartes ir veidotas ar CSS columnrekvizītiem, nevis flexbox, lai atvieglotu līdzināšanu. Kartes tiek sakārtotas no augšas uz leju un no kreisās uz labo pusi.

Uzmanību! Jūsu nobraukums ar karšu kolonnām var atšķirties. Lai novērstu kartīšu sadalīšanos kolonnās, mums tās ir jāiestata, display: inline-blockjo column-break-inside: avoidtas vēl nav ložu drošs risinājums.

100%x160
Kartītes nosaukums, kas tiek aplauzta jaunā rindā

Šī ir garāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šis saturs ir nedaudz garāks.

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

Kāds slavens avota nosaukumā
100%x160
Kartes nosaukums

Tālāk šajā kartītē ir papildu teksts, kas ir dabisks ievads papildu saturam.

Pēdējo reizi atjaunināts pirms 3 minūtēm

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

Kāds slavens avota nosaukumā
Kartes nosaukums

Tālāk šajā kartītē ir papildu teksts, kas ir dabisks ievads papildu saturam.

Pēdējo reizi atjaunināts pirms 3 minūtēm

100%x260

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

Kāds slavens avota nosaukumā
Kartes nosaukums

Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šai kartītei ir pat garāks saturs nekā pirmajai, kas parāda šo vienāda augstuma darbību.

Pēdējo reizi atjaunināts pirms 3 minūtēm

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

Karšu kolonnas var arī paplašināt un pielāgot ar kādu papildu kodu. Tālāk ir parādīts .card-columnsklases paplašinājums, izmantojot to pašu CSS, ko mēs izmantojam — CSS kolonnas —, lai ģenerētu adaptīvu līmeņu kopu kolonnu skaita mainīšanai.

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