Mga kard
Ang mga kard sa Bootstrap naghatag og usa ka flexible ug extensible nga sulud sa sulud nga adunay daghang mga variant ug kapilian.
Mahitungod sa
Ang kard usa ka flexible ug extensible nga sulud sa sulud. Naglakip kini sa mga kapilian alang sa mga header ug footer, daghang lainlain nga sulud, kolor sa background sa konteksto, ug kusgan nga mga kapilian sa pagpakita. Kung pamilyar ka sa Bootstrap 3, ang mga kard mopuli sa among daan nga mga panel, atabay, ug mga thumbnail. Ang parehas nga gamit sa mga sangkap magamit ingon mga klase sa modifier alang sa mga kard.
Pananglitan
Gitukod ang mga kard nga adunay gamay nga marka ug mga istilo kutob sa mahimo, apan nagdumala gihapon nga maghatag usa ka tonelada nga kontrol ug pag-customize. Gitukod gamit ang flexbox, nagtanyag sila dali nga pag-align ug maayo ang pagsagol sa ubang mga sangkap sa Bootstrap. Wala sila marginpinaagi sa default, busa gamita ang mga gamit sa spacing kung gikinahanglan.
Sa ubos usa ka pananglitan sa usa ka sukaranan nga kard nga adunay managsama nga sulud ug usa ka gitakda nga gilapdon. Ang mga kard walay gitakdang gilapdon sa pagsugod, mao nga natural nilang pun-on ang tibuok gilapdon sa elemento sa ginikanan niini. Kini dali nga ipasibo sa among lainlaing mga kapilian sa pagsukod .
Titulo sa kard
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Lakaw sa usa ka dapit<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>Mga tipo sa sulud
Gisuportahan sa mga kard ang daghang lainlain nga sulud, lakip ang mga imahe, teksto, mga grupo sa lista, mga link, ug uban pa. Sa ubos mao ang mga pananglitan sa kung unsa ang gisuportahan.
Lawas
Ang building block sa usa ka kard mao ang .card-body. Gamita kini bisan kanus-a nimo kinahanglan ang usa ka seksyon nga adunay pad sa sulod sa usa ka kard.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Mga titulo, teksto, ug mga link
Ang mga titulo sa kard gigamit pinaagi sa pagdugang .card-titlesa usa ka <h*>tag. Sa samang paagi, ang mga link gidugang ug gibutang sunod sa usag usa pinaagi sa pagdugang .card-linksa usa ka <a>tag.
Ang mga subtitle gigamit pinaagi sa pagdugang ug usa .card-subtitleka <h*>tag. Kung ang .card-titleug ang mga .card-subtitleaytem ibutang sa usa ka .card-bodyaytem, ang titulo sa kard ug subtitle maayo nga pagkahan-ay.
Titulo sa kard
Subtitle sa kard
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Link sa kard Laing link<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>Mga larawan
.card-img-topibutang ang usa ka imahe sa ibabaw sa kard. Uban sa .card-text, ang teksto mahimong idugang sa kard. Ang teksto sa sulod .card-textmahimo usab nga i-istilo gamit ang standard nga mga tag sa HTML.
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
<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>Ilista ang mga grupo
Paghimo og mga lista sa sulod sa usa ka kard nga adunay flush list nga grupo.
- Usa ka butang
- Usa ka ikaduha nga butang
- Usa ka ikatulo nga butang
<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>- Usa ka butang
- Usa ka ikaduha nga butang
- Usa ka ikatulo nga butang
<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>- Usa ka butang
- Usa ka ikaduha nga butang
- Usa ka ikatulo nga butang
<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>Lababo sa kusina
Pagsagol ug pagpares sa daghang mga tipo sa sulud aron mahimo ang kard nga imong kinahanglan, o ihulog ang tanan didto. Gipakita sa ubos ang mga istilo sa imahe, mga bloke, mga istilo sa teksto, ug usa ka grupo sa lista-tanan giputos sa usa ka fixed-width nga kard.
Titulo sa kard
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
- Usa ka butang
- Usa ka ikaduha nga butang
- Usa ka ikatulo nga butang
<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>Header ug footer
Pagdugang og opsyonal nga header ug/o footer sulod sa usa ka card.
Espesyal nga pagtambal sa titulo
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Lakaw sa usa ka dapit<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>Ang mga ulohan sa kard mahimong i-istilo pinaagi sa pagdugang .card-headersa <h*>mga elemento.
Gipakita
Espesyal nga pagtambal sa titulo
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Lakaw sa usa ka dapit<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>Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.
<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>Espesyal nga pagtambal sa titulo
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Lakaw sa usa ka dapit<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>Pagsukod
Ang mga kard nagtuo nga walay espesipiko widthnga magsugod, mao nga sila mahimong 100% ang gilapdon gawas kung gipahayag. Mahimo nimo kini usbon kung gikinahanglan gamit ang custom CSS, grid classes, grid Sass mixins, o utilities.
Paggamit sa grid markup
Gamit ang grid, iputos ang mga kard sa mga kolum ug mga laray kon gikinahanglan.
Espesyal nga pagtambal sa titulo
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Lakaw sa usa ka dapitEspesyal nga pagtambal sa titulo
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Lakaw sa usa ka dapit<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>Paggamit sa mga utilities
Gamita ang among pipila ka magamit nga mga kagamitan sa pagsukod aron dali nga mabutang ang gilapdon sa usa ka kard.
Titulo sa kard
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
ButangTitulo sa kard
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Butang<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>Gamit ang custom CSS
Gamita ang custom CSS sa imong mga stylesheet o isip inline nga mga estilo para magbutang ug gilapdon.
Espesyal nga pagtambal sa titulo
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Lakaw sa usa ka dapit<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>Pag-align sa teksto
Mahimo nimong mabag-o dayon ang pag-align sa teksto sa bisan unsang kard—sa kinatibuk-an o piho nga mga bahin—uban sa among mga klase sa pagpahiangay sa teksto .
Espesyal nga pagtambal sa titulo
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Lakaw sa usa ka dapitEspesyal nga pagtambal sa titulo
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Lakaw sa usa ka dapitEspesyal nga pagtambal sa titulo
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Lakaw sa usa ka dapit<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>Nabigasyon
Idugang ang pipila ka nabigasyon sa header (o block) sa usa ka card gamit ang nav component sa Bootstrap .
Espesyal nga pagtambal sa titulo
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Lakaw sa usa ka dapit<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>Espesyal nga pagtambal sa titulo
Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Lakaw sa usa ka dapit<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>Mga larawan
Ang mga kard naglakip sa pipila ka mga kapilian sa pagtrabaho sa mga imahe. Pagpili gikan sa pagdugang sa "mga takup sa imahe" sa bisan asa nga tumoy sa usa ka kard, pag-overlay sa mga imahe nga adunay sulud sa kard, o yano nga pag-embed sa imahe sa usa ka kard.
Mga takup sa imahe
Sama sa mga header ug footer, ang mga card mahimong maglakip sa ibabaw ug ubos nga "mga takup sa imahe" -mga hulagway sa ibabaw o ubos sa usa ka kard.
Titulo sa kard
Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Katapusang gi-update 3 ka minuto ang milabay
Titulo sa kard
Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Katapusang gi-update 3 ka minuto ang milabay
<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>Mga overlay sa imahe
Himoang background sa kard ang imahe ug i-overlay ang teksto sa imong kard. Depende sa imahe, mahimo nimo o dili kinahanglan ang dugang nga mga istilo o kagamitan.
<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>Pahigda
Gamit ang kombinasyon sa mga klase sa grid ug utility, ang mga kard mahimong himoong pinahigda sa mobile-friendly ug responsive nga paagi. Sa pananglitan sa ubos, among tangtangon ang grid gutters .no-guttersug gamiton ang .col-md-*mga klase aron himoong pinahigda ang card sa mdbreakpoint. Mahimong gikinahanglan ang dugang nga mga kausaban depende sa sulod sa imong card.
Titulo sa kard
Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Katapusang gi-update 3 ka minuto ang milabay
<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>Mga estilo sa kard
Ang mga kard naglakip sa lainlaing mga kapilian alang sa pag-customize sa ilang mga background, mga utlanan, ug kolor.
Background ug kolor
Gamita ang text ug background utilities aron usbon ang dagway sa usa ka card.
Panguna nga titulo sa kard
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Ikaduha nga titulo sa kard
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Ang titulo sa kard sa kalampusan
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Titulo sa kard sa peligro
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Titulo sa warning card
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Titulo sa info card
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Titulo sa light card
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Titulo sa itom nga kard
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
<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>Paghatag kahulogan sa mga teknolohiya sa pagtabang
Ang paggamit og kolor aron makadugang og kahulogan naghatag lang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor klaro gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .sr-onlyklase.
Border
Gamita ang mga gamit sa utlanan aron mabag-o lang ang border-colorusa ka kard. Timan-i nga mahimo nimong ibutang ang .text-{color}mga klase sa ginikanan .cardo usa ka subset sa mga sulud sa kard sama sa gipakita sa ubos.
Panguna nga titulo sa kard
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Ikaduha nga titulo sa kard
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Ang titulo sa kard sa kalampusan
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Titulo sa kard sa peligro
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Titulo sa warning card
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Titulo sa info card
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Titulo sa light card
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
Titulo sa itom nga kard
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
<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>Mga gamit sa Mixins
Mahimo usab nimo nga usbon ang mga utlanan sa header ug footer sa kard kung gikinahanglan, ug bisan pa tangtangon kini background-colorsa .bg-transparent.
Ang titulo sa kard sa kalampusan
Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.
<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>Layout sa kard
Dugang sa pag-istilo sa sulod sulod sa mga kard, ang Bootstrap naglakip sa pipila ka mga kapilian sa pagpahimutang sa mga serye sa mga kard. Sa pagkakaron, kini nga mga kapilian sa layout dili pa mosanong .
Mga grupo sa kard
Gamita ang mga grupo sa kard aron i-render ang mga kard isip usa ka elemento nga adunay managsama nga gilapdon ug gitas-on nga mga kolum. Ang mga grupo sa kard nagsugod sa pag-stack ug gigamit display: flex;aron madugtong sa uniporme nga mga sukat sugod sa smbreakpoint.
Titulo sa kard
Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Katapusang gi-update 3 ka minuto ang milabay
Titulo sa kard
Kini nga kard adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Katapusang gi-update 3 ka minuto ang milabay
Titulo sa kard
Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga kard adunay mas taas nga sulud kaysa sa una nga nagpakita sa parehas nga gitas-on nga aksyon.
Katapusang gi-update 3 ka minuto ang milabay
<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>Kung mogamit mga grupo sa kard nga adunay mga footer, ang ilang sulud awtomatiko nga maglinya.
Titulo sa kard
Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Titulo sa kard
Kini nga kard adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Titulo sa kard
Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga kard adunay mas taas nga sulud kaysa sa una nga nagpakita sa parehas nga gitas-on nga aksyon.
<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>Mga deck sa kard
Nagkinahanglan og usa ka hugpong sa managsama nga gilapdon ug gitas-on nga mga kard nga wala gilakip sa usag usa? Gamita ang mga card deck.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Katapusang gi-update 3 ka minuto ang milabay
Titulo sa kard
Kini nga kard adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Katapusang gi-update 3 ka minuto ang milabay
Titulo sa kard
Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga kard adunay mas taas nga sulud kaysa sa una nga nagpakita sa parehas nga gitas-on nga aksyon.
Katapusang gi-update 3 ka minuto ang milabay
<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>Sama sa mga grupo sa kard, ang mga footer sa kard sa mga deck awtomatikong maglinya.
Titulo sa kard
Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Titulo sa kard
Kini nga kard adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Titulo sa kard
Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga kard adunay mas taas nga sulud kaysa sa una nga nagpakita sa parehas nga gitas-on nga aksyon.
<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>Mga kard sa grid
Gamita ang Bootstrap grid system ug ang mga .row-colsklase niini aron makontrol kung pila ka grid column (giputos sa imong mga kard) ang imong gipakita kada laray. Pananglitan, ania ang .row-cols-1pagbutang sa mga kard sa usa ka kolum, ug .row-cols-md-2pagbahin sa upat ka mga kard sa parehas nga gilapdon sa daghang mga laray, gikan sa medium nga breakpoint pataas.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
<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>Usba kini .row-cols-3ug imong makita ang ikaupat nga balot sa kard.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
<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>Kung kinahanglan nimo ang parehas nga gitas-on, idugang .h-100sa mga kard. Kung gusto nimo ang parehas nga gitas-on pinaagi sa default, mahimo nimong ibutang $card-height: 100%sa Sass.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Titulo sa kard
Kini usa ka mubo nga kard.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Titulo sa kard
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
<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>Mga kolum sa kard
Ang mga kard mahimong organisahon ngadto sa Masonry - like columns nga adunay CSS lang pinaagi sa pagputos niini sa .card-columns. Gitukod ang mga kard nga adunay mga kabtangan sa CSS columnimbes nga flexbox para sa dali nga pag-align. Gi-order ang mga kard gikan sa taas hangtod sa ubos ug wala hangtod sa tuo.
Taas ang ulo! Ang imong mileage sa mga column sa card mahimong magkalahi. Aron mapugngan ang mga kard nga mabuak sa mga kolum, kinahanglan namon nga ibutang kini display: inline-blockingon column-break-inside: avoidnga dili pa usa ka solusyon sa bala.
Titulo sa kard nga giputos sa bag-ong linya
Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.
Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.
Titulo sa kard
Kini nga kard adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.
Katapusang gi-update 3 ka minuto ang milabay
Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.
Titulo sa kard
Kini nga kard adunay regular nga titulo ug mubo nga paragraph sa teksto sa ubos niini.
Katapusang gi-update 3 ka minuto ang milabay
Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.
Titulo sa kard
Kini ang lain nga kard nga adunay titulo ug pagsuporta sa teksto sa ubos. Kini nga kard adunay pipila ka dugang nga sulud aron mahimo kini nga mas taas nga gamay sa kinatibuk-an.
Katapusang gi-update 3 ka minuto ang milabay
<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>Ang mga kolum sa kard mahimo usab nga mapalapdan ug ipasadya sa pipila ka dugang nga code. Gipakita sa ubos ang usa ka extension sa .card-columnsklase nga naggamit sa parehas nga CSS nga among gigamit—mga CSS column—aron makamugna og set sa responsive nga mga tier para sa pag-usab sa gidaghanon sa mga column.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}