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 .

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>

Virsraksti, teksts un saites

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.

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

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

Kartes saite Vēl viena saite

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

Galvene un kājene

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

pirms 2 dienām

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

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

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

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.

Kājene

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

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

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

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

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

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

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

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

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

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.

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

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

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

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ā

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

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

Kartes

Par

Piemērs

Kartes nosaukums

Satura veidi

Ķermenis

Virsraksti, teksts un saites

Kartes nosaukums

Kartes apakšvirsraksts

Attēli

Saraksta grupas

Virtuves izlietne

Kartes nosaukums

Galvene un kājene

Īpaša titula apstrāde

Piedāvātie

Īpaša titula apstrāde

Īpaša titula apstrāde

Izmēru noteikšana

Izmantojot režģa marķējumu

Īpaša titula apstrāde

Īpaša titula apstrāde

Izmantojot komunālos pakalpojumus

Kartes nosaukums

Kartes nosaukums

Izmantojot pielāgotu CSS

Īpaša titula apstrāde

Teksta izlīdzināšana

Īpaša titula apstrāde

Īpaša titula apstrāde

Īpaša titula apstrāde

Navigācija

Īpaša titula apstrāde

Īpaša titula apstrāde

Attēli

Attēlu vāciņi

Kartes nosaukums

Kartes nosaukums

Attēlu pārklājumi

Kartes nosaukums

Karšu stili

Fons un krāsa

Galvenās kartes nosaukums

Sekundārās kartes nosaukums

Veiksmes kartes nosaukums

Bīstamības kartes nosaukums

Brīdinājuma kartītes nosaukums

Informācijas kartītes nosaukums

Gaismas kartītes nosaukums

Tumšās kartītes nosaukums

Nozīmes nodošana palīgtehnoloģijām

Robeža

Galvenās kartes nosaukums

Sekundārās kartes nosaukums

Veiksmes kartes nosaukums

Bīstamības kartes nosaukums

Brīdinājuma kartītes nosaukums

Informācijas kartītes nosaukums

Gaismas kartītes nosaukums

Tumšās kartītes nosaukums

Mixins komunālie pakalpojumi

Veiksmes kartes nosaukums

Kartes izkārtojums

Karšu grupas

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kāršu klāji

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kartīšu kolonnas

Kartītes nosaukums, kas tiek aplauzta jaunā rindā

Kartes nosaukums