Source

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 .

100%x180
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 class="card-img-top" src="..." alt="Card image cap">
  <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.

Kini usa ka teksto sulod sa usa ka card body. 
<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.

Cap sa hulagway [100%x180]

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 class="card-img-top" src="..." alt="Card image cap">
  <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.

  • Cras justo odio
  • Dapibus ac facilisis sa
  • Vestibulum ug eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Gipakita
  • Cras justo odio
  • Dapibus ac facilisis sa
  • Vestibulum ug eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</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.

Cap sa hulagway [100%x180]
Titulo sa kard

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

  • Cras justo odio
  • Dapibus ac facilisis sa
  • Vestibulum ug eros
Link sa kard Laing link 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Pagdugang og opsyonal nga header ug/o footer sulod sa usa ka card.

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">
  <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>
Kinutlo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Usa ka tawo nga bantog sa Source Title 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
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
2 ka adlaw ang milabay 
<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 dapit
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="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.

Butang
Titulo 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 dapit
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
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>

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

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" href="#">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" href="#">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.

100%x180
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

100%x180 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</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.

100%x270
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 bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <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>

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Footer 
<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. Gigamit sa mga grupo sa kard display: flex;aron makab-ot ang ilang uniporme nga gidak-on.

100%x180
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

100%x180
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

100%x180
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

100%x180
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
100%x180
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
100%x180
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

100%x200
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

100%x200
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

100%x200
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

100%x180
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
100%x180
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
100%x180
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 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.

100%x160
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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Usa ka tawo nga bantog sa Source Title
100%x160
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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Usa ka tawo nga bantog sa Source Title
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

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Usa ka tawo nga bantog sa Source Title
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-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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 class="card-img-top" src="..." alt="Card image cap">
    <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <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 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 class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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 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>

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;
  }
}