Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

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 .

Placeholder Image cap
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 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ā. 
<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.

Placeholder Image cap

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

Placeholder Image cap
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 
<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>

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

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

Kāds slavens avota nosaukumā 
<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 
<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-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 
<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" href="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">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šā.

Placeholder Image cap
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

Placeholder Image cap 
<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.

Placeholder Card image
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 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">Last updated 3 mins ago</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.

Placeholder Image
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" 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

Izmantojiet teksta krāsu 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-dark 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-dark 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-dark 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 .visually-hiddenklasi 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">
    <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 
<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.

Placeholder Image cap
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

Placeholder Image cap
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

Placeholder Image cap
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 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ā.

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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 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.

Placeholder Image cap
Kartes nosaukums

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

Placeholder Image cap
Kartes nosaukums

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

Placeholder Image cap
Kartes nosaukums

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

Placeholder Image cap
Kartes nosaukums

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

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

Placeholder Image cap
Kartes nosaukums

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

Placeholder Image cap
Kartes nosaukums

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

Placeholder Image cap
Kartes nosaukums

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

Placeholder Image cap
Kartes nosaukums

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

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

Placeholder Image cap
Kartes nosaukums

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

Placeholder Image cap
Kartes nosaukums

Šī ir īsa karte.

Placeholder Image cap
Kartes nosaukums

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

Placeholder Image cap
Kartes nosaukums

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

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

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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="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.

Sass

Mainīgie lielumi

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$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;