Kartoj
La kartoj de Bootstrap provizas flekseblan kaj etendeblan enhavujon kun multoblaj variantoj kaj opcioj.
Pri
Karto estas fleksebla kaj etendebla enhavujo . Ĝi inkluzivas eblojn por kaplinioj kaj piedlinioj, ampleksan varion de enhavo, kuntekstajn fonkolorojn kaj potencajn ekranajn opciojn. Se vi konas Bootstrap 3, kartoj anstataŭigas niajn malnovajn panelojn, putojn kaj bildetojn. Simila funkcieco al tiuj komponentoj estas haveblaj kiel modifklasoj por kartoj.
Ekzemplo
Kartoj estas konstruitaj kun kiel eble plej malmulte da markado kaj stiloj, sed tamen sukcesas liveri multe da kontrolo kaj personigo. Konstruitaj kun flexbox, ili ofertas facilan vicigon kaj miksas bone kun aliaj Bootstrap-komponentoj. Ili ne havas margin
defaŭlte, do uzu interspacigajn utilecojn laŭbezone.
Malsupre estas ekzemplo de baza karto kun miksita enhavo kaj fiksa larĝo. Kartoj ne havas fiksan larĝon por komenci, do ili nature plenigos la tutan larĝon de ĝia gepatra elemento. Ĉi tio estas facile personecigita per niaj diversaj grandeco-opcioj .
Kartotitolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Iru ien<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>
Enhavaj tipoj
Kartoj subtenas ampleksan varion de enhavo, inkluzive de bildoj, tekstoj, listgrupoj, ligiloj kaj pli. Malsupre estas ekzemploj de tio, kio estas subtenata.
Korpo
La konstrubriketo de karto estas la .card-body
. Uzu ĝin kiam ajn vi bezonas remburitan sekcion ene de karto.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Titoloj, teksto kaj ligiloj
Karttitoloj estas uzataj per aldonado .card-title
al <h*>
etikedo. En la sama maniero, ligiloj estas aldonitaj kaj metitaj unu apud la alia per aldonado .card-link
al <a>
etikedo.
Subtekstoj estas uzataj aldonante a .card-subtitle
al <h*>
etikedo. Se la .card-title
kaj la .card-subtitle
eroj estas metitaj en .card-body
eron, la karttitolo kaj subtitolo estas bele vicigitaj.
<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>
Bildoj
.card-img-top
metas bildon al la supro de la karto. Per .card-text
, teksto povas esti aldonita al la karto. Teksto ene .card-text
ankaŭ povas esti stilita per la normaj HTML-etikedoj.
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
<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>
Listo grupoj
Kreu listojn de enhavo en karto kun flua listogrupo.
- Ero
- Dua ero
- Tria ero
<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>
- Ero
- Dua ero
- Tria ero
<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>
- Ero
- Dua ero
- Tria ero
<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>
Kuireja lavujo
Miksu kaj kongruu plurajn enhavspecojn por krei la karton, kiun vi bezonas, aŭ ĵeti ĉion tien. Malsupre montriĝas bildaj stiloj, blokoj, tekstaj stiloj kaj listo-grupo—ĉiuj envolvitaj en fikslarĝa karto.
<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>
Kapo kaj piedlinio
Aldonu laŭvolan kaplinion kaj/aŭ piedlinion ene de karto.
<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>
Kartkapoj povas esti stilitaj per aldonado .card-header
al <h*>
elementoj.
Prezentita
<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>
Bonkonata citaĵo, enhavita en blokcita elemento.
<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>
<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>
Dimensio
Kartoj supozas neniun specifan width
por komenci, do ili estos 100% larĝaj krom se alie dirite. Vi povas ŝanĝi ĉi tion laŭbezone per kutimaj CSS, kradaj klasoj, kradaj Sass-miksaĵoj aŭ iloj.
Uzante kradmarkadon
Uzante la kradon, envolvu kartojn en kolumnoj kaj vicoj laŭbezone.
<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>
Uzante utilecojn
Uzu nian manplenon da disponeblaj grandecoj por rapide agordi la larĝecon de karto.
<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>
Uzante kutiman CSS
Uzu kutiman CSS en viaj stilfolioj aŭ kiel enliniajn stilojn por agordi larĝecon.
<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 vicigo
Vi povas rapide ŝanĝi la tekstan vicigon de iu ajn karto—en ĝia tutaĵo aŭ specifajn partojn—per niaj tekstalign klasoj .
<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>
Navigado
Aldonu iom da navigado al la kaplinio (aŭ bloko) de karto kun la navkomponentoj de Bootstrap .
<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>
<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>
Bildoj
Kartoj inkluzivas kelkajn eblojn por labori kun bildoj. Elektu el aldonado de "bildaj ĉapoj" ĉe ambaŭ finoj de karto, supermetado de bildoj kun karto enhavo aŭ simple enkonstrui la bildon en karton.
Bildaj ĉapoj
Simile al kaplinioj kaj piedlinioj, kartoj povas inkluzivi suprajn kaj malsuprajn "bildĉapojn"—bildojn ĉe la supro aŭ malsupro de karto.
Kartotitolo
Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
Laste ĝisdatigita antaŭ 3 minutoj
Kartotitolo
Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
Laste ĝisdatigita antaŭ 3 minutoj
<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>
Bildaj supermetaĵoj
Turnu bildon en kartan fonon kaj superigu la tekston de via karto. Depende de la bildo, vi eble aŭ eble ne bezonas pliajn stilojn aŭ ilojn.
<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>
Horizontala
Uzante kombinaĵon de krado kaj servaĵoklasoj, kartoj povas esti horizontalaj en poŝtelefon-amika kaj respondema maniero. En la malsupra ekzemplo, ni forigas la kradkanalojn kun .g-0
kaj uzas .col-md-*
klasojn por fari la karton horizontala ĉe la md
rompopunkto. Pliaj ĝustigoj eble estos bezonataj depende de via karto enhavo.
Kartotitolo
Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
Laste ĝisdatigita antaŭ 3 minutoj
<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>
Kartstiloj
Kartoj inkluzivas diversajn eblojn por agordi siajn fonojn, limojn kaj kolorojn.
Fono kaj koloro
Uzu tekstkoloron kaj fonajn ilojn por ŝanĝi la aspekton de karto.
Primara karttitolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Sekundara karto titolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Sukceskarta titolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Danĝera karto titolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Titolo de avertkarto
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Titolo de informkarto
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Luma karto titolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Malhela karto titolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
<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>
Transdonante signifon al helpaj teknologioj
Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidentaj el la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivitaj per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .visually-hidden
klaso.
Limo
Uzu randajn ilojn por ŝanĝi nur la border-color
karton. Notu, ke vi povas meti .text-{color}
klasojn sur la gepatro .card
aŭ subaron de la enhavo de la karto kiel montrite sube.
Primara karttitolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Sekundara karto titolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Sukceskarta titolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Danĝera karto titolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Titolo de avertkarto
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Titolo de informkarto
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Luma karto titolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
Malhela karto titolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
<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 utilecoj
Vi ankaŭ povas ŝanĝi la randojn sur la kartkapo kaj piedo laŭbezone, kaj eĉ forigi iliajn background-color
per .bg-transparent
.
Sukceskarta titolo
Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.
<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>
Karta aranĝo
Krom stiligi la enhavon ene de kartoj, Bootstrap inkluzivas kelkajn eblojn por aranĝi seriojn de kartoj. Por la momento, ĉi tiuj aranĝaj opcioj ankoraŭ ne respondas .
Kartgrupoj
Uzu kartgrupojn por bildi kartojn kiel ununuran, alkroĉitan elementon kun egalaj larĝaj kaj altecaj kolumnoj. Kartgrupoj komenciĝas stakigitaj kaj kutimas display: flex;
iĝi alkroĉitaj kun unuformaj dimensioj komencante ĉe la sm
rompopunkto.
Kartotitolo
Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
Laste ĝisdatigita antaŭ 3 minutoj
Kartotitolo
Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.
Laste ĝisdatigita antaŭ 3 minutoj
Kartotitolo
Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu karto havas eĉ pli longan enhavon ol la unua por montri tiun egalan altecan agon.
Laste ĝisdatigita antaŭ 3 minutoj
<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>
Kiam vi uzas kartgrupojn kun piedlinioj, ilia enhavo aŭtomate viciĝas.
Kartotitolo
Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
Kartotitolo
Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.
Kartotitolo
Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu karto havas eĉ pli longan enhavon ol la unua por montri tiun egalan altecan agon.
<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>
Kradaj kartoj
Uzu la Bootstrap kradsistemon kaj ĝiajn .row-cols
klasojn por kontroli kiom da kradkolumnoj (envolvitaj ĉirkaŭ viaj kartoj) vi montras per vico. Ekzemple, jen .row-cols-1
aranĝado de la kartoj sur unu kolumno, kaj .row-cols-md-2
dividado de kvar kartoj al egala larĝo tra pluraj vicoj, de la meza rompopunkto supren.
Kartotitolo
Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
Kartotitolo
Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
Kartotitolo
Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo.
Kartotitolo
Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
<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>
Ŝanĝu ĝin al .row-cols-3
kaj vi vidos la kvaran karton envolvaĵon.
Kartotitolo
Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
Kartotitolo
Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
Kartotitolo
Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo.
Kartotitolo
Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
<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>
Kiam vi bezonas egalan altecon, aldonu .h-100
al la kartoj. Se vi volas egalajn altecojn defaŭlte, vi povas agordi $card-height: 100%
en Sass.
Kartotitolo
Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
Kartotitolo
Ĉi tio estas mallonga karto.
Kartotitolo
Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo.
Kartotitolo
Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
<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>
Same kiel ĉe kartgrupoj, kartpiedoj aŭtomate viciĝos.
Kartotitolo
Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.
Kartotitolo
Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.
Kartotitolo
Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu karto havas eĉ pli longan enhavon ol la unua por montri tiun egalan altecan agon.
<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>
Masonaĵo
En v4
ni uzis CSS-nur-teknikon por imiti la konduton de Masonería - similaj kolonoj, sed ĉi tiu tekniko venis kun multaj malagrablaj kromefikoj . Se vi volas havi ĉi tiun tipon de aranĝo en v5
, vi povas simple uzi Masonry-kromaĵon. Masonaĵo ne estas inkluzivita en Bootstrap , sed ni faris demonstran ekzemplon por helpi vin komenci.
Sass
Variabloj
$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;