Kartes

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

Šajā lapā

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

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>

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

html

<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

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>

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.

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>

Saraksta grupas

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

Lieta
Otrs priekšmets
Trešais priekšmets

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>

Piedāvātie

Lieta
Otrs priekšmets
Trešais priekšmets

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>

Lieta
Otrs priekšmets
Trešais priekšmets

Kartes kājene

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>

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.

Lieta
Otrs priekšmets
Trešais priekšmets

Kartes saite Vēl viena saite

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>

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

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>

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

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>

Citāts

Labi zināms citāts, kas ietverts blockquote elementā.

Kāds slavens avota nosaukumā

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>

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

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>

Izmēru noteikšana

Uzskata, ka kartītēm nav īpašas 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

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>

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

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>

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

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>

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

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>

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

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>

Īpaša titula apstrāde

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

Aizej kaut kur

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>

Attēli

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

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>

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

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>

Ņemiet vērā, ka saturs nedrīkst būt lielāks par attēla augstumu. Ja saturs ir lielāks par attēlu, saturs tiks parādīts ārpus attēla.

Horizontāli

Izmantojot režģa un lietderības klašu kombināciju, kartes var padarīt horizontālas mobilajām ierīcēm draudzīgā un atsaucīgā veidā. Tālāk esošajā piemērā mēs noņemam režģa notekcaurules ar .g-0un izmantojam .col-md-*klases, lai padarītu karti horizontālu mdpārtraukuma punktā. Atkarībā no kartes satura var būt nepieciešami papildu pielāgojumi.

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

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>

Karšu stili

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

Fons un krāsa

Pievienots v5.2.0

Iestatiet background-colorkontrastējošu priekšplānu colorar mūsu .text-bg-{color}palīgiem . Iepriekš bija nepieciešams manuāli savienot pārī jūsu izvēles .text-{color}un .bg-{color}stila utilītas, kuras joprojām varat izmantot, ja vēlaties.

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.

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>

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. Pārliecinieties, ka informācija, kas apzīmēta ar krāsu, ir vai nu acīmredzama no paša satura (piemēram, redzamā teksta), vai arī tiek iekļauta, izmantojot alternatīvus līdzekļus, piemēram, papildu tekstu, kas paslēpts kopā ar .visually-hiddenklasi.

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.

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

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>

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 sākas sakrautas un tiek izmantotas display: flex;, lai tās piestiprinātu ar vienādiem izmēriem, sākot no smpārtraukuma punkta.

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

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>

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

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>

Režģa kartes

Izmantojiet Bootstrap režģa sistēmu un tās .row-colsklases , lai kontrolētu, cik režģa kolonnu (aptītas ap jūsu kartēm) rādīt vienā rindā. Piemēram, šeit ir .row-cols-1izvietotas kartītes vienā kolonnā un .row-cols-md-2četras kartītes tiek sadalītas vienāda platumā vairākās rindās, sākot no vidējā pārtraukuma punkta uz augšu.

Kartes nosaukums

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

Kartes nosaukums

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

Kartes nosaukums

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

Kartes nosaukums

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

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>

Mainiet to uz, .row-cols-3un jūs redzēsit ceturto kartītes iesaiņojumu.

Kartes nosaukums

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

Kartes nosaukums

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

Kartes nosaukums

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

Kartes nosaukums

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

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>

Kad nepieciešams vienāds augstums, pievienojiet .h-100kārtīm. Ja pēc noklusējuma vēlaties vienādus augstumus, varat iestatīt $card-height: 100%Sass.

Kartes nosaukums

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

Kartes nosaukums

Šī ir īsa karte.

Kartes nosaukums

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

Kartes nosaukums

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

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>

Tāpat kā karšu grupās, karšu kājenes tiks automātiski sakārtotas.

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

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ūrēšana

Mēs v4izmantojām tikai CSS paņēmienu, lai atdarinātu mūra kolonnu darbību, taču šai tehnikai bija daudz nepatīkamu blakusparādību . Ja vēlaties izmantot šāda veida izkārtojumu programmā v5, varat vienkārši izmantot spraudni Masonry. Mūrēšana nav iekļauta programmā Bootstrap , taču mēs esam izveidojuši demonstrācijas piemēru , lai palīdzētu jums sākt darbu.

CSS

Mainīgie

Pievienots v5.2.0

Kā daļu no Bootstrap attīstošās CSS mainīgo pieejas kartes tagad izmanto vietējos CSS mainīgos, .cardlai uzlabotu reāllaika pielāgošanu. CSS mainīgo vērtības tiek iestatītas, izmantojot Sass, tāpēc joprojām tiek atbalstīta arī Sass pielāgošana.

  --#{$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};

Sass mainīgie

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

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

Horizontāli

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

Režģa kartes

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums

Kartes nosaukums