Source

Karti

Il-karti tal-Bootstrap jipprovdu kontenitur tal-kontenut flessibbli u estensibbli b'diversi varjanti u għażliet.

Dwar

Karta hija kontenitur tal-kontenut flessibbli u estensibbli . Jinkludi għażliet għal headers u footers, varjetà wiesgħa ta 'kontenut, kuluri ta' sfond kuntestwali, u għażliet ta 'wiri qawwija. Jekk int familjari mal-Bootstrap 3, il-karti jissostitwixxu l-pannelli, il-bjar u l-minjaturi qodma tagħna. Funzjonalità simili għal dawk il-komponenti hija disponibbli bħala klassijiet modifikaturi għall-karti.

Eżempju

Il-karti huma mibnija bl-inqas markup u stili possibbli, iżda xorta jirnexxilhom iwasslu ton ta 'kontroll u customization. Mibnija bil-flexbox, joffru allinjament faċli u ħallat tajjeb ma 'komponenti Bootstrap oħra. M'għandhomx marginawtomatikament, għalhekk uża utilitajiet ta 'spazjar kif meħtieġ.

Hawn taħt hemm eżempju ta 'karta bażika b'kontenut imħallat u wisa' fiss. Il-karti m'għandhom l-ebda wisa 'fiss biex jibdew, għalhekk jimlew b'mod naturali l-wisa' sħiħa tal-element prinċipali tiegħu. Dan huwa faċilment personalizzat bl- għażliet varji tagħna ta 'daqs .

Placeholder Image cap
Titolu tal-karta

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Mur x'imkien 
<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>

Tipi ta' kontenut

Il-karti jappoġġjaw varjetà wiesgħa ta 'kontenut, inklużi stampi, test, gruppi ta' lista, links, u aktar. Hawn taħt hemm eżempji ta' x'inhu appoġġjat.

Korp

Il-blokka tal-bini ta 'karta hija l- .card-body. Użaha kull meta jkollok bżonn sezzjoni kkuttunata fi ħdan karta.

Dan huwa xi test fi ħdan korp tal-karta. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titoli, test, u links

It-titli tal-karti jintużaw billi jiżdiedu .card-titlema ' <h*>tikketta. Bl-istess mod, il-links huma miżjuda u mqiegħda ħdejn xulxin billi jiżdiedu .card-linkma ' <a>tikketta.

Is-sottotitli jintużaw billi żżid .card-subtitlema' <h*>tag. Jekk l- .card-titleu l- .card-subtitleoġġetti jitqiegħdu .card-bodyf'oġġett, it-titlu tal-karta u s-sottotitolu huma allinjati tajjeb.

Titolu tal-karta
Sottotitolu tal-karta

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Card link Link oħra 
<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>

Stampi

.card-img-toptpoġġi immaġni fil-parti ta’ fuq tal-karta. Bil- .card-text, it-test jista' jiżdied mal-karta. It- test fi ħdan .card-textjista 'wkoll jiġi stilat bit-tikketti HTML standard.

Placeholder Image cap

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

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

Lista gruppi

Oħloq listi ta 'kontenut f'karta bi grupp ta' lista flush.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at 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>
Dehru
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at 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>

Sink tal-kċina

Ħallat u qabbel diversi tipi ta 'kontenut biex toħloq il-karta li għandek bżonn, jew itfa' kollox hemmhekk. Hawn taħt jidhru stili ta’ immaġini, blokki, stili ta’ test, u grupp ta’ lista—kollha mgeżwra f’karta ta’ wisa’ fissa.

Placeholder Image cap
Titolu tal-karta

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card link Link oħra 
<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">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>

Żid header u/jew footer fakultattiv fi ħdan karta.

Dehru
Trattament speċjali tat-titlu

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Mur x'imkien 
<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>

L-intestaturi tal-karti jistgħu jiġu stilati billi jiżdiedu .card-headerma ' <h*>elementi.

Dehru
Trattament speċjali tat-titlu

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Mur x'imkien 
<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>
Kwotazzjoni

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

Xi ħadd famuż fit- Titolu Sors 
<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>
Dehru
Trattament speċjali tat-titlu

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Mur x'imkien
2 ijiem ilu 
<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>

Daqs

Il-kards jassumu l-ebda speċifiku widthbiex jibdew, għalhekk ikunu wesgħin 100% sakemm ma jkunx iddikjarat mod ieħor. Tista' tibdel dan kif meħtieġ b'CSS tad-dwana, klassijiet tal-grilja, mixins Sass tal-grilja, jew utilitajiet.

Bl-użu tal-markup tal-grilja

Bl-użu tal-gradilja, wrap cards f'kolonni u ringieli kif meħtieġ.

Trattament speċjali tat-titlu

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Mur x'imkien
Trattament speċjali tat-titlu

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Mur x'imkien 
<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>

Użu ta 'utilitajiet

Uża l-għadd żgħir tagħna ta ' utilitajiet ta' daqs disponibbli biex tissettja malajr il-wisa 'ta' karta.

Titolu tal-karta

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Buttuna
Titolu tal-karta

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

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

Bl-użu ta 'CSS personalizzat

Uża CSS tad-dwana fil-stylesheets tiegħek jew bħala stili inline biex tissettja wisa'.

Trattament speċjali tat-titlu

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Mur x'imkien 
<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>

Allinjament tat-test

Tista' tbiddel malajr l-allinjament tat-test ta' kwalunkwe karta — fl-intier tagħha jew partijiet speċifiċi — bil- klassijiet tal-allinjament tat-test tagħna .

Trattament speċjali tat-titlu

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Mur x'imkien
Trattament speċjali tat-titlu

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Mur x'imkien
Trattament speċjali tat-titlu

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Mur x'imkien 
<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>

Żid ftit navigazzjoni mal-header (jew blokk) ta 'karta bil- komponenti tan-nav ta' Bootstrap .

Trattament speċjali tat-titlu

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Mur x'imkien 
<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Trattament speċjali tat-titlu

Bit-test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Mur x'imkien 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Stampi

Il-karti jinkludu ftit għażliet biex taħdem bl-immaġini. Agħżel minn tehmeż "limiti ta' l-immaġini" f'kull tarf ta' karta, tispiċċa immaġini b'kontenut ta' karta, jew sempliċiment tiddaħħal l-immaġni f'karta.

Brieret tal-immaġni

Simili għall-intestaturi u l-footers, il-kards jistgħu jinkludu "limiti tal-immaġni" ta 'fuq u ta' isfel—immaġini fin-naħa ta 'fuq jew t'isfel ta' karta.

Placeholder Image cap
Titolu tal-karta

Din hija karta usa 'b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Dan il-kontenut huwa ftit itwal.

Aġġornata l-aħħar 3 minuti ilu

Titolu tal-karta

Din hija karta usa 'b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Dan il-kontenut huwa ftit itwal.

Aġġornata l-aħħar 3 minuti ilu

Placeholder Image cap 
<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-top" alt="...">
</div>

Overlays ta 'l-immaġini

Dawwar immaġni fi sfond tal-karta u poġġi t-test tal-karta tiegħek. Skont l-immaġini, tista 'jew ma tkunx teħtieġ stili jew utilitajiet addizzjonali.

Placeholder Card image
Titolu tal-karta

Din hija karta usa 'b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Dan il-kontenut huwa ftit itwal.

Aġġornata l-aħħar 3 minuti ilu

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

Innota li l-kontenut m'għandux ikun akbar mill-għoli tal-immaġni. Jekk il-kontenut ikun akbar mill-immaġni, il-kontenut jintwera barra l-immaġni.

Stili tal-karti

Il-karti jinkludu diversi għażliet biex jippersonalizzaw l-isfond, il-fruntieri u l-kulur tagħhom.

Sfond u kulur

Uża test u utilitajiet fl-isfond biex tbiddel id-dehra ta 'karta.

Header
Titolu tal-karta primarja

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta sekondarja

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta ta' suċċess

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta tal-periklu

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta ta' twissija

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta tal-informazzjoni

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta ħafifa

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta skura

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

<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>
Twassal tifsira għal teknoloġiji ta' assistenza

L-użu tal-kulur biex iżżid it-tifsira jipprovdi biss indikazzjoni viżwali, li mhux se tiġi mgħoddija lill-utenti ta 'teknoloġiji ta' assistenza - bħal screen readers. Kun żgur li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (eż. it-test viżibbli), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .sr-onlyklassi.

Fruntiera

Uża utilitajiet tal-fruntiera biex tbiddel biss il border-color-karta. Innota li tista' tpoġġi .text-{color}klassijiet fuq il-ġenitur .cardjew subsett tal-kontenut tal-karta kif muri hawn taħt.

Header
Titolu tal-karta primarja

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta sekondarja

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta ta' suċċess

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta tal-periklu

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta ta' twissija

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta tal-informazzjoni

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta ħafifa

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header
Titolu tal-karta skura

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

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

Utilitajiet Mixins

Tista 'wkoll tibdel il-fruntieri fuq l-header u l-footer tal-karta kif meħtieġ, u anke tneħħi tagħhom background-colorb' .bg-transparent.

Header
Titolu tal-karta ta' suċċess

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

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>

It-tqassim tal-karta

Minbarra l-grafika tal-kontenut fi ħdan il-karti, Bootstrap jinkludi ftit għażliet għat-tqegħid ta 'serje ta' karti. Għalissa, dawn l-għażliet ta' tqassim għadhom mhumiex reattivi .

Gruppi tal-karti

Uża gruppi ta 'kards biex tirrendi karti bħala element wieħed imwaħħal b'kolonni ugwali ta' wisa 'u għoli. Il-gruppi tal-karti jużaw display: flex;biex jiksbu d-daqs uniformi tagħhom.

Placeholder Image cap
Titolu tal-karta

Din hija karta usa 'b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Dan il-kontenut huwa ftit itwal.

Aġġornata l-aħħar 3 minuti ilu

Placeholder Image cap
Titolu tal-karta

Din il-karta għandha test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Aġġornata l-aħħar 3 minuti ilu

Placeholder Image cap
Titolu tal-karta

Din hija karta usa 'b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Din il-karta għandha kontenut saħansitra itwal mill-ewwel li turi dik l-azzjoni ta 'għoli ugwali.

Aġġornata l-aħħar 3 minuti ilu

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

Meta tuża gruppi ta 'kards b'footers, il-kontenut tagħhom se jingħaqad awtomatikament.

Placeholder Image cap
Titolu tal-karta

Din hija karta usa 'b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Dan il-kontenut huwa ftit itwal.

Aġġornata l-aħħar 3 minuti ilu
Placeholder Image cap
Titolu tal-karta

Din il-karta għandha test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Aġġornata l-aħħar 3 minuti ilu
Placeholder Image cap
Titolu tal-karta

Din hija karta usa 'b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Din il-karta għandha kontenut saħansitra itwal mill-ewwel li turi dik l-azzjoni ta 'għoli ugwali.

Aġġornata l-aħħar 3 minuti ilu 
<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>

Gverti tal-karti

Għandek bżonn sett ta' karti ta' wisa' u għoli ugwali li mhumiex imwaħħla ma' xulxin? Uża l-gverti tal-karti.

Placeholder Image cap
Titolu tal-karta

Din hija karta itwal b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Dan il-kontenut huwa ftit itwal.

Aġġornata l-aħħar 3 minuti ilu

Placeholder Image cap
Titolu tal-karta

Din il-karta għandha test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Aġġornata l-aħħar 3 minuti ilu

Placeholder Image cap
Titolu tal-karta

Din hija karta usa 'b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Din il-karta għandha kontenut saħansitra itwal mill-ewwel li turi dik l-azzjoni ta 'għoli ugwali.

Aġġornata l-aħħar 3 minuti ilu

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

Eżatt bħal ma 'gruppi ta' karti, il-footers tal-karti fil-gverti awtomatikament se jingħaqdu.

Placeholder Image cap
Titolu tal-karta

Din hija karta usa 'b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Dan il-kontenut huwa ftit itwal.

Aġġornata l-aħħar 3 minuti ilu
Placeholder Image cap
Titolu tal-karta

Din il-karta għandha test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Aġġornata l-aħħar 3 minuti ilu
Placeholder Image cap
Titolu tal-karta

Din hija karta usa 'b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Din il-karta għandha kontenut saħansitra itwal mill-ewwel li turi dik l-azzjoni ta 'għoli ugwali.

Aġġornata l-aħħar 3 minuti ilu 
<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>

Kolonni tal-karti

Il -karti jistgħu jiġu organizzati f'kolonni li jixbhu lill- Ġebel b'CSS biss billi jitgeżwruhom f' .card-columns. Il -karti huma mibnija bi columnproprjetajiet CSS minflok flexbox għal allinjament aktar faċli. Il-karti huma ordnati minn fuq għal isfel u mix-xellug għal-lemin.

Irjus up! Il-kilometraġġ tiegħek bil-kolonni tal-kards jista' jvarja. Biex nipprevjenu li l-karti jkissru l-kolonni, irridu nissettjawhom display: inline-blockhekk kif column-break-inside: avoidgħadha mhix soluzzjoni bulletproof.

Placeholder Image cap
Titolu tal-karta li jgħaqqad ma' linja ġdida

Din hija karta itwal b'test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali. Dan il-kontenut huwa ftit itwal.

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

Xi ħadd famuż fit- Titolu Sors
Placeholder Image cap
Titolu tal-karta

Din il-karta għandha test ta' appoġġ hawn taħt bħala bidu naturali għal kontenut addizzjonali.

Aġġornata l-aħħar 3 minuti ilu

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

Xi ħadd famuż fit- Titolu Sors
Titolu tal-karta

Din il-karta għandha titolu regolari u paragrafu qasir tat-test taħtha.

Aġġornata l-aħħar 3 minuti ilu

Placeholder Card image

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

Xi ħadd famuż fit- Titolu Sors
Titolu tal-karta

Din hija karta oħra bit-titlu u t-test ta' appoġġ hawn taħt. Din il-karta għandha xi kontenut addizzjonali biex tagħmilha kemmxejn ogħla b'mod ġenerali.

Aġġornata l-aħħar 3 minuti ilu

<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>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 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</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-top" alt="...">
  </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 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>

Kolonni tal-karti jistgħu wkoll jiġu estiżi u personalizzati b'xi kodiċi addizzjonali. Tintwera hawn taħt estensjoni tal- .card-columnsklassi li tuża l-istess CSS li nużaw—kolonni CSS— biex tiġġenera sett ta 'saffi li jirrispondu għall-bidla tan-numru ta' kolonni.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}