Txartelak
Bootstrap-en txartelek edukiontzi malgu eta hedagarria eskaintzen dute, aldaera eta aukera anitzekin.
Buruz
Txartela edukiontzi malgu eta hedagarria da . Goiburuen eta oinen aukerak, askotariko edukiak, testuinguruko atzeko planoko koloreak eta bistaratzeko aukera indartsuak biltzen ditu. Bootstrap 3 ezagutzen baduzu, txartelek gure panel zaharrak, putzuak eta koadro txikiak ordezkatzen dituzte. Osagai horien antzeko funtzionaltasuna eskuragarri dago txartelen modifikatzaile klase gisa.
Adibidea
Txartelak ahalik eta marka eta estilo gutxienekin eraikitzen dira, baina hala ere kontrol eta pertsonalizazio asko ematen dituzte. Flexbox-ekin eraikita, lerrokatze erraza eskaintzen dute eta Bootstrap-eko beste osagai batzuekin ondo nahasten dute. Ez daukate margin
lehenespenez, beraz, erabili tartekatzeko utilitateak behar den moduan.
Jarraian, eduki mistoa eta zabalera finkoa duen oinarrizko txartel baten adibidea dago. Txartelek ez dute zabalera finkorik hasteko, beraz, naturalki beteko dute bere elementu nagusiaren zabalera osoa. Hau erraz pertsonalizatzen da gure tamaina ezberdinekin .
Txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Zoaz nonbait<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>
Eduki motak
Txartelek askotariko edukiak onartzen dituzte, besteak beste, irudiak, testuak, zerrenda-taldeak, estekak eta abar. Jarraian, onartzen denaren adibideak daude.
Gorputza
Txartel baten eraikuntza-blokea .card-body
. Erabili ezazu txartel baten barruan atal betea behar duzun bakoitzean.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Izenburuak, testua eta estekak
Txartelaren izenburuak etiketa .card-title
bati gehituz erabiltzen dira . <h*>
Modu berean, estekak gehitzen dira eta bata bestearen ondoan jartzen dira etiketa .card-link
bati gehituz.<a>
Azpitituluak etiketa .card-subtitle
bati a gehituz erabiltzen dira . <h*>
Elementuak .card-title
eta .card-subtitle
elementuak elementu batean jartzen badira .card-body
, txartelaren izenburua eta azpititulua ondo lerrokatzen dira.
Txartelaren izenburua
Txartelaren azpititulua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Txartelaren esteka Beste esteka bat<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>
Irudiak
.card-img-top
irudi bat jartzen du txartelaren goialdean. , .card-text
testua gehi dakioke txartelari. Barneko testua .card-text
HTML etiketa estandarrekin ere molda daiteke.
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
<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>
Taldeak zerrenda
Sortu eduki-zerrendak txartel batean zerrenda-talde bat duen.
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
<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>
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
<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>
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
<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>
Sukaldeko konketa
Nahastu eta lotu hainbat eduki mota behar duzun txartela sortzeko, edo bota dena bertan. Jarraian irudi-estiloak, blokeak, testu-estiloak eta zerrenda talde bat agertzen dira, guztiak zabalera finkoko txartel batean bilduta.
Txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
<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>
Goiburua eta oina
Gehitu aukerako goiburua eta/edo orri-oina txartel baten barruan.
Tituluaren tratamendu berezia
Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.
Zoaz nonbait<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>
.card-header
Txartel-goiburuak elementuei gehituz estiloa jar daiteke <h*>
.
Nabarmena
Tituluaren tratamendu berezia
Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.
Zoaz nonbait<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>
Aipamen ezagun bat, blockquote elementu batean jasotakoa.
<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>
Tituluaren tratamendu berezia
Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.
Zoaz nonbait<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>
Tamaina
Txartelek hasierako zehatzik ez dutela suposatzen width
dute, beraz, % 100eko zabalera izango dute, bestela adierazi ezean. Behar duzunean alda dezakezu CSS pertsonalizatuekin, sareko klaseekin, sareko Sass nahasketarekin edo utilitateekin.
Sare-marka erabiltzea
Sarea erabiliz, bildu txartelak zutabeetan eta errenkadetan behar den moduan.
Tituluaren tratamendu berezia
Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.
Zoaz nonbaitTituluaren tratamendu berezia
Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.
Zoaz nonbait<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>
Utilitateak erabiltzea
Erabili eskuragarri dauden neurrien erabilgarritasun gutxi txartel baten zabalera azkar ezartzeko.
<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>
CSS pertsonalizatua erabiliz
Erabili CSS pertsonalizatua zure estilo-orrietan edo lerroko estilo gisa zabalera bat ezartzeko.
Tituluaren tratamendu berezia
Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.
Zoaz nonbait<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>
Testuaren lerrokatzea
Edozein txartelen testu-lerrokatzea azkar alda dezakezu (osorik edo zati zehatzetan) gure testu-lerrokatzea klaseekin .
Tituluaren tratamendu berezia
Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.
Zoaz nonbaitTituluaren tratamendu berezia
Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.
Zoaz nonbaitTituluaren tratamendu berezia
Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.
Zoaz nonbait<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>
Nabigazioa
Gehitu nabigazio pixka bat txartel baten goiburuan (edo blokean) Bootstrap-en nabigazio osagaiekin .
Tituluaren tratamendu berezia
Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.
Zoaz nonbait<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Tituluaren tratamendu berezia
Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.
Zoaz nonbait<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>
Irudiak
Txartelek irudiekin lan egiteko aukera batzuk dituzte. Aukeratu "irudi-txapelak" gehitzea txartel baten muturretan, irudiak txartelaren edukiarekin gainjartzea edo, besterik gabe, irudia txartel batean txertatzea.
Irudi-txapelak
Goiburuen eta oinen antzera, txartelek goiko eta beheko "irudi-txapelak" izan ditzakete, txartel baten goiko edo beheko irudiak.
Txartelaren izenburua
Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
Duela 3 minutu azken eguneratzea
Txartelaren izenburua
Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
Duela 3 minutu azken eguneratzea
<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>
Irudien gainjartzeak
Bihurtu irudi bat txartelaren atzeko planoan eta gainjarri zure txartelaren testua. Irudiaren arabera, baliteke estilo edo utilitate gehigarriak behar izatea edo ez.
<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
Sarearen eta erabilgarritasun-klaseen konbinazioa erabiliz, txartelak horizontalean egin daitezke mugikorretarako eta erantzuteko moduan. Beheko adibidean, sareko erretenak kendu .g-0
eta klaseak erabiltzen .col-md-*
ditugu txartela md
eten puntuan horizontala izateko. Baliteke doikuntza gehiago behar izatea txartelaren edukiaren arabera.
Txartelaren izenburua
Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
Duela 3 minutu azken eguneratzea
<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>
Txartel estiloak
Txartelek hainbat aukera dituzte atzeko planoak, ertzak eta koloreak pertsonalizatzeko.
Hondoa eta kolorea
Erabili testuaren kolorea eta atzeko planoko utilitateak txartelaren itxura aldatzeko.
Txartelaren titulu nagusia
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Bigarren txartelaren titulua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Arrakasta txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Arrisku txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Abisu txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Informazio txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Txartel argiaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Txartel ilunaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
<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>
Laguntza-teknologiei esanahia ematea
Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik agerikoa dela (adibidez, ikusgai dagoen testua) edo beste bitarteko batzuen bidez sartzen dela, adibidez .visually-hidden
klasearekin ezkutatuta dagoen testu gehigarria.
Muga
Erabili ertz-utilitateakborder-color
txartel baten aldea soilik aldatzeko . Kontuan izan klaseak jarri ditzakezula .text-{color}
gurasoari .card
edo txartelaren edukiaren azpimultzo batean behean erakusten den moduan.
Txartelaren titulu nagusia
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Bigarren txartelaren titulua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Arrakasta txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Arrisku txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Abisu txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Informazio txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Txartel argiaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Txartel ilunaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
<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 utilitateak
Txartelaren goiburuko eta orri-oineko ertzak ere alda ditzakezu behar izanez gero, eta baita horiek kendu background-color
ere .bg-transparent
.
Arrakasta txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
<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>
Txartelaren diseinua
Txartelen edukia diseinatzeaz gain, Bootstrap-ek txartel-serieak jartzeko aukera batzuk ditu. Momentuz, diseinu-aukera hauek ez dira oraindik erantzuten .
Txartel taldeak
Erabili txartel-taldeak txartelak errendatzeko, zabalera eta altuera berdineko zutabeekin erantsitako elementu bakar gisa. Txartel-taldeak pilatuta hasten dira eta eten puntutik display: flex;
hasita dimentsio uniformeekin lotzen dira .sm
Txartelaren izenburua
Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
Duela 3 minutu azken eguneratzea
Txartelaren izenburua
Txartel honek beheko testu osagarria du eduki gehigarrirako sarrera natural gisa.
Duela 3 minutu azken eguneratzea
Txartelaren izenburua
Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Txartel honek lehenak baino eduki handiagoa du altuera berdineko ekintza hori erakusteko.
Duela 3 minutu azken eguneratzea
<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>
Oin-oinak dituzten txartel-taldeak erabiltzean, haien edukia automatikoki lerrokatuko da.
Txartelaren izenburua
Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
Txartelaren izenburua
Txartel honek beheko testu osagarria du eduki gehigarrirako sarrera natural gisa.
Txartelaren izenburua
Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Txartel honek lehenak baino eduki handiagoa du altuera berdineko ekintza hori erakusteko.
<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>
Sare-txartelak
Erabili Bootstrap sare-sistema eta bere .row-cols
klaseak errenkada bakoitzeko zenbat sare-zutabe (zure txartelen inguruan bilduta) erakusten dituzun kontrolatzeko. Adibidez, hona hemen .row-cols-1
txartelak zutabe batean finkatzea eta .row-cols-md-2
lau karta banatzen ditu hainbat errenkadatan zabalera berdinean, eten puntu ertainetik gora.
Txartelaren izenburua
Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
Txartelaren izenburua
Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
Txartelaren izenburua
Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa.
Txartelaren izenburua
Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
<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>
Aldatu .row-cols-3
eta laugarren txartela ikusiko duzu.
Txartelaren izenburua
Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
Txartelaren izenburua
Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
Txartelaren izenburua
Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa.
Txartelaren izenburua
Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
<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>
Altuera berdina behar duzunean, gehitu .h-100
kartetara. $card-height: 100%
Lehenespenez altuera berdina nahi baduzu, Sass-en ezar dezakezu .
Txartelaren izenburua
Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
Txartelaren izenburua
Hau txartel laburra da.
Txartelaren izenburua
Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa.
Txartelaren izenburua
Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
<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>
Txartel taldeekin bezala, txartelen oinak automatikoki lerrokatuko dira.
Txartelaren izenburua
Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.
Txartelaren izenburua
Txartel honek beheko testu osagarria du eduki gehigarrirako sarrera natural gisa.
Txartelaren izenburua
Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Txartel honek lehenak baino eduki handiagoa du altuera berdineko ekintza hori erakusteko.
<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>
Igeltserotza
Harlangintzaren antzekov4
zutabeen portaera imitatzeko CSS soilik erabili genuen , baina teknika honek bigarren mailako efektu desatsegin ugari ekarri zituen . Diseinu mota hau eduki nahi baduzu , Masonry plugina erabil dezakezu. Masonry ez dago Bootstrap-en sartzen , baina demo adibide bat egin dugu hasten laguntzeko.v5
Sass
Aldagaiak
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$card-border-radius: $border-radius;
$card-box-shadow: null;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;