Aqbeż għall-kontenut prinċipali Aqbeż għan-navigazzjoni tad-dokumenti
Check
in English

Karti

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

Fuq din il-paġna

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
html 
<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.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titoli, test, u links

It-titoli 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
html 
<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-topipoġġ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.

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

  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
html 
<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>
Dehru
  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
html 
<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>
  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
Footer tal-karta
html 
<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>

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.

  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
Card link Link oħra
html 
<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>

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

Kwotazzjoni magħrufa sew, li tinsab f'element blockquote.

Xi ħadd famuż fit- Titolu Sors
html 
<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>
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
html 
<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
html 
<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
html 
<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
html 
<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
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Ż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
html 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Trattament speċjali tat-titlu

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

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

Stampi

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

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

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

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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.

Orizzontali

Bl-użu ta 'kombinazzjoni ta' klassijiet ta 'grilja u ta' utilità, il-karti jistgħu jsiru orizzontali b'mod li jiffavorixxi l-mowbajl u li jirrispondu. Fl-eżempju hawn taħt, inneħħu l-kanali tal-grilja bi .g-0u nużaw .col-md-*klassijiet biex nagħmlu l-karta orizzontali fil- punt ta ' mdwaqfien. Jistgħu jkunu meħtieġa aktar aġġustamenti skont il-kontenut tal-karta tiegħek.

Placeholder 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

html 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Stili tal-karti

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

Sfond u kulur

Miżjud fi v5.2.0

Issettja background-colortagħrif miksub kontrastanti colormal - helpers tagħna.text-bg-{color} . Preċedentement kien meħtieġ li tgħaqqad manwalment l-għażla tiegħek .text-{color}u l- .bg-{color}utilitajiet għall-grafika, li xorta tista 'tuża jekk tippreferi.

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.

html 
<div class="card text-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-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-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-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-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-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-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-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 tingħata 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- .visually-hiddenklassi.

Fruntiera

Uża l -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.

html 
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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
html 
<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 jibdew f'munzelli u jużaw display: flex;biex jitwaħħlu b'dimensjonijiet uniformi li jibdew fil- punt ta ' smwaqfien.

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

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

Grid cards

Uża s-sistema tal-grilja Bootstrap u l- .row-colsklassijiet tagħha biex tikkontrolla kemm-il kolonni tal-grilja (imgeżwer madwar il-karti tiegħek) turi kull ringiela. Pereżempju, hawn qed .row-cols-1tpoġġi l-karti fuq kolonna waħda, u .row-cols-md-2taqsam erba 'karti għal wisa' ugwali fuq ringieli multipli, mill-punt ta 'waqfien medju 'l fuq.

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.

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.

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.

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.

html 
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Ibdelha .row-cols-3u tara r-raba' karta wrap.

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.

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.

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.

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.

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Meta jkollok bżonn għoli ugwali, żid .h-100mal-karti. Jekk trid għoli ugwali awtomatikament, tista 'tissettja $card-height: 100%f'Sass.

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.

Placeholder Image cap
Titolu tal-karta

Din hija karta qasira.

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.

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.

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Eżatt bħal ma 'gruppi ta' karti, il-footers tal-karti se jingħaqdu 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
html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Ġebel

Fil v4użajna teknika ta 'CSS biss biex nimitaw l-imġieba ta' kolonni bħall- ġebel , iżda din it-teknika ġiet b'ħafna effetti sekondarji spjaċevoli . Jekk trid li jkollok dan it-tip ta 'tqassim f' v5, tista' sempliċement tagħmel użu mill-plugin tal-ġebel. Il-ġebel mhuwiex inkluż f'Bootstrap , iżda għamilna eżempju demo biex jgħinek tibda.

CSS

Varjabbli

Miżjud fi v5.2.0

Bħala parti mill-approċċ tal-varjabbli tas-CSS li qed jevolvu ta' Bootstrap, il-karti issa jużaw varjabbli tas-CSS lokali .cardgħall-adattament imtejjeb f'ħin reali. Il-valuri għall-varjabbli CSS huma stabbiliti permezz ta 'Sass, għalhekk il-personalizzazzjoni ta' Sass għadha appoġġjata wkoll.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass varjabbli

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;