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 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.
<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-title
atzīmei <h*>
. Tādā pašā veidā saites tiek pievienotas un novietotas viena otrai blakus, pievienojot .card-link
atzīmi <a>
.
.card-subtitle
Subtitri tiek izmantoti , pievienojot <h*>
atzīmei. Ja vienumi .card-title
un .card-subtitle
ir ievietoti .card-body
vienumā, 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-top
novieto attēlu kartes augšpusē. Izmantojot .card-text
, kartītei var pievienot tekstu. Tekstu .card-text
var 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 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>
- 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
<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
<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.
Ī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-header
tā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>
Labi zināms citāts, kas ietverts blockquote elementā.
<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>
Īpaša titula apstrāde
Tālāk ir norādīts atbalsta teksts kā dabisks ievads papildu saturam.
Aizej kaut kur<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
Izmēru noteikšana
Uzskata, ka kartītēm nav īpaša width
sā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.
<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>
Navigācija
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">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">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 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.
<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>
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 .no-gutters
un izmantojam .col-md-*
klases, lai padarītu karti horizontālu md
pā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
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." 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 un fona utilītas , lai mainītu kartes izskatu.
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.
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.
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.
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.
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.
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.
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.
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-only
klasi paslēptu papildu tekstu.
Robeža
Izmantojiet apmales utilītas , lai mainītu tikai border-color
kartes vērtību. Ņemiet vērā, ka varat ievietot .text-{color}
klases vecākvienībā .card
vai kartītes satura apakškopā, kā parādīts tālāk.
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.
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.
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.
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.
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.
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.
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.
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-color
izmantojot .bg-transparent
.
Veiksmes kartes nosaukums
Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
Kartes izkārtojums
Papildus satura veidošanai kartītēs, Bootstrap ietver dažas iespējas karšu sēriju izkārtošanai. Pagaidām šīs izkārtojuma opcijas vēl nav piemērotas .
Karšu grupas
Izmantojiet kartīšu grupas, lai renderētu kartītes kā vienu pievienotu elementu ar vienāda platuma un augstuma kolonnām. Karšu grupas sākas sakrautas un tiek izmantotas display: flex;
, lai tās piestiprinātu ar vienādiem izmēriem, sākot no sm
pā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
<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.
Kartes nosaukums
Tālāk šajā kartītē ir papildu teksts, kas ir dabisks ievads papildu saturam.
Kartes nosaukums
Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šai kartītei ir pat garāks saturs nekā pirmajai, kas parāda šo vienāda augstuma darbību.
<div class="card-group">
<div class="card">
<img 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>
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 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>
<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>
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.
Kartes nosaukums
Tālāk šajā kartītē ir papildu teksts, kas ir dabisks ievads papildu saturam.
Kartes nosaukums
Šī ir plašāka kartīte ar atbalsta tekstu, kas ir dabisks ievads papildu saturam. Šai kartītei ir pat garāks saturs nekā pirmajai, kas parāda šo vienāda augstuma darbību.
<div class="card-deck">
<div class="card">
<img 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-cols
klases , 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-1
izvietotas 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.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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-3
un 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.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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-100
kā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.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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>
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 column
rekvizī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-block
jo column-break-inside: avoid
tas 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.
Labi zināms citāts, kas ietverts blockquote elementā.
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
Labi zināms citāts, kas ietverts blockquote elementā.
Kartes nosaukums
Šai kartītei ir parasts nosaukums un īsa teksta rindkopa zem tā.
Pēdējo reizi atjaunināts pirms 3 minūtēm
Labi zināms citāts, kas ietverts blockquote elementā.
Kartes nosaukums
Šī ir vēl viena kartīte ar nosaukumu un atbalsta tekstu tālāk. Šai kartei ir papildu saturs, lai tā kopumā būtu nedaudz augstāka.
Pēdējo reizi atjaunināts pirms 3 minūtēm
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<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>A well-known quote, contained in a blockquote element.</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 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 bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<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 a regular title and short paragraphy of text below it.</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" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</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-columns
klases 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;
}
}