Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
in English

Kadi

Kadi za Bootstrap hutoa kontena ya maudhui inayoweza kunyumbulika na kupanuliwa yenye vibadala na chaguo nyingi.

Katika ukurasa huu

Kuhusu

Kadi ni chombo cha maudhui kinachoweza kunyumbulika na kupanuka . Inajumuisha chaguo za vichwa na vijachini, aina mbalimbali za maudhui, rangi za mandharinyuma na chaguo thabiti za kuonyesha. Ikiwa unaifahamu Bootstrap 3, kadi hubadilisha paneli, visima na vijipicha vyetu vya zamani. Utendaji sawa na vipengele hivyo unapatikana kama madarasa ya kurekebisha kadi.

Mfano

Kadi zimeundwa kwa alama na mitindo kidogo iwezekanavyo, lakini bado zinaweza kutoa udhibiti na ubinafsishaji mwingi. Imejengwa kwa flexbox, hutoa upatanishi rahisi na kuchanganya vizuri na vijenzi vingine vya Bootstrap. Hawana marginkwa chaguo-msingi, kwa hivyo tumia huduma za kuweka nafasi kama inahitajika.

Chini ni mfano wa kadi ya msingi yenye maudhui mchanganyiko na upana uliowekwa. Kadi hazina upana usiobadilika wa kuanza, kwa hivyo zitajaza upana kamili wa kipengele kikuu chake. Hii imebinafsishwa kwa urahisi na chaguzi zetu mbalimbali za ukubwa .

Placeholder Image cap
Jina la kadi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Nenda mahali fulani
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>

Aina za maudhui

Kadi hutumia aina mbalimbali za maudhui, ikiwa ni pamoja na picha, maandishi, vikundi vya orodha, viungo na zaidi. Ifuatayo ni mifano ya kile kinachoungwa mkono.

Mwili

Sehemu ya ujenzi wa kadi ni .card-body. Itumie wakati wowote unahitaji sehemu iliyofunikwa ndani ya kadi.

Haya ni baadhi ya maandishi ndani ya kundi la kadi.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Majina, maandishi na viungo

Majina ya kadi hutumiwa kwa kuongeza .card-titlelebo <h*>. Kwa njia hiyo hiyo, viungo vinaongezwa na kuwekwa karibu na kila mmoja kwa kuongeza .card-linkkwenye <a>lebo.

Manukuu hutumiwa kwa kuongeza .card-subtitletagi <h*>. Ikiwa vipengee .card-titlena .card-subtitlevipengee vimewekwa kwenye .card-bodykipengee, kichwa cha kadi na manukuu yatapangiliwa vizuri.

Jina la kadi
Manukuu ya kadi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kiungo cha kadi Kiungo kingine
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>

Picha

.card-img-tophuweka picha juu ya kadi. Na .card-text, maandishi yanaweza kuongezwa kwenye kadi. Maandishi ndani .card-textyanaweza pia kutengenezwa kwa kutumia lebo za kawaida za HTML.

Placeholder Image cap

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

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>

Orodhesha vikundi

Unda orodha za yaliyomo kwenye kadi na kikundi cha orodha ya laini.

  • Kipengee
  • Kipengee cha pili
  • Kipengee cha tatu
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>
Iliyoangaziwa
  • Kipengee
  • Kipengee cha pili
  • Kipengee cha tatu
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>
  • Kipengee
  • Kipengee cha pili
  • Kipengee cha tatu
Sehemu ya chini ya kadi
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>

Sinki ya jikoni

Changanya na ulinganishe aina nyingi za maudhui ili kuunda kadi unayohitaji, au tupa kila kitu humo. Imeonyeshwa hapa chini ni mitindo ya picha, vizuizi, mitindo ya maandishi, na kikundi cha orodha-yote yakiwa yamefungwa kwenye kadi ya upana usiobadilika.

Placeholder Image cap
Jina la kadi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

  • Kipengee
  • Kipengee cha pili
  • Kipengee cha tatu
Kiungo cha kadi Kiungo kingine
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>

Ongeza kichwa cha hiari na/au kijachini ndani ya kadi.

Iliyoangaziwa
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
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>

Vichwa vya kadi vinaweza kutengenezwa kwa kuongeza .card-headervipengele <h*>.

Iliyoangaziwa
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
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>
Nukuu

Nukuu inayojulikana sana, iliyo katika kipengele cha kuzuia.

Mtu maarufu katika Mada ya Chanzo
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>
Iliyoangaziwa
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
siku 2 zilizopita
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>

Ukubwa

Kadi hazifikirii mahususi widthza kuanza, kwa hivyo zitakuwa na upana wa 100% isipokuwa kama itaelezwa vinginevyo. Unaweza kubadilisha hii inavyohitajika kwa CSS maalum, madarasa ya gridi ya taifa, michanganyiko ya gridi ya Sass, au huduma.

Kwa kutumia alama ya gridi

Kwa kutumia gridi ya taifa, funga kadi kwenye safu wima na safu kama inavyohitajika.

Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
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>

Kutumia huduma

Tumia huduma zetu chache za ukubwa zinazopatikana ili kuweka upana wa kadi haraka.

Jina la kadi

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Kitufe
Jina la kadi

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

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

Kwa kutumia CSS maalum

Tumia CSS maalum katika laha zako za mitindo au kama mitindo ya ndani ili kuweka upana.

Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
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>

Mpangilio wa maandishi

Unaweza kubadilisha kwa haraka mpangilio wa maandishi wa kadi yoyote—kwa ukamilifu wake au sehemu mahususi—na madarasa yetu ya kupanga maandishi .

Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
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>

Ongeza usogezaji kwa kichwa cha kadi (au zuia) na vipengee vya nav vya Bootstrap .

Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
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>
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
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>

Picha

Kadi ni pamoja na chaguzi chache za kufanya kazi na picha. Chagua kutoka kwa kuambatisha "vifuniko vya picha" kwenye mwisho wa kadi, kuweka picha juu ya maudhui ya kadi, au kupachika tu picha kwenye kadi.

Vifuniko vya picha

Sawa na vichwa na kijachini, kadi zinaweza kujumuisha "vifuniko vya picha" juu na chini - picha zilizo juu au chini ya kadi.

Placeholder Image cap
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita

Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita

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>

Viwekelezo vya picha

Geuza picha kuwa usuli wa kadi na uweke juu maandishi ya kadi yako. Kulingana na picha, unaweza au usihitaji mitindo ya ziada au huduma.

Placeholder Card image
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita

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>
Kumbuka kwamba maudhui haipaswi kuwa kubwa kuliko urefu wa picha. Ikiwa maudhui ni makubwa kuliko picha, maudhui yataonyeshwa nje ya picha.

Mlalo

Kwa kutumia mchanganyiko wa gridi na madarasa ya matumizi, kadi zinaweza kufanywa kwa usawa kwa njia ya kirafiki na ya kuitikia. Katika mfano ulio hapa chini, tunaondoa mifereji ya gridi .g-0na kutumia .col-md-*madarasa ili kufanya kadi iwe mlalo kwenye sehemu ya mdkukatika. Marekebisho zaidi yanaweza kuhitajika kulingana na maudhui ya kadi yako.

Placeholder Image
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita

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>

Mitindo ya kadi

Kadi zinajumuisha chaguo mbalimbali za kubinafsisha asili, mipaka na rangi zao.

Asili na rangi

Imeongezwa katika v5.2.0

Weka mandhari ya background-colormbele yenye tofauti colorna wasaidizi wetu.text-bg-{color} . Hapo awali ilihitajika kuoanisha mwenyewe chaguo lako .text-{color}na .bg-{color}huduma za kupiga maridadi, ambazo bado unaweza kutumia ukipenda.

Kijajuu
Jina la kadi ya msingi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya sekondari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Jina la kadi ya mafanikio

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Jina la kadi ya hatari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya onyo

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya habari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi nyepesi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi nyeusi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

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>
Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .visually-hiddendarasa.

Mpaka

Tumia huduma za mpaka kubadilisha tu border-colorkadi. Kumbuka kuwa unaweza kuweka .text-{color}madarasa kwa mzazi .cardau sehemu ndogo ya yaliyomo kwenye kadi kama inavyoonyeshwa hapa chini.

Kijajuu
Jina la kadi ya msingi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya sekondari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Jina la kadi ya mafanikio

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Jina la kadi ya hatari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya onyo

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya habari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi nyepesi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi nyeusi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

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>

Mchanganyiko wa huduma

Unaweza pia kubadilisha mipaka kwenye kichwa cha kadi na kijachini inavyohitajika, na hata kuondoa yao background-colorna .bg-transparent.

Kijajuu
Jina la kadi ya mafanikio

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

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

Mpangilio wa kadi

Mbali na kupanga yaliyomo ndani ya kadi, Bootstrap inajumuisha chaguzi chache za kuweka safu za kadi. Kwa sasa, chaguo hizi za mpangilio bado hazijafanya kazi .

Vikundi vya kadi

Tumia vikundi vya kadi kutoa kadi kama kipengele kimoja, kilichoambatishwa chenye upana na urefu wa safu wima. Vikundi vya kadi huanza zikiwa zimepangwa na kutumia display: flex;ili kushikamana na vipimo vinavyofanana kuanzia mahali pa smkuzuka.

Placeholder Image cap
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita

Placeholder Image cap
Jina la kadi

Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Ilisasishwa mwisho dakika 3 zilizopita

Placeholder Image cap
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.

Ilisasishwa mwisho dakika 3 zilizopita

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>

Unapotumia vikundi vya kadi vilivyo na kijachini, maudhui yao yatajipanga kiotomatiki.

Placeholder Image cap
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita
Placeholder Image cap
Jina la kadi

Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Ilisasishwa mwisho dakika 3 zilizopita
Placeholder Image cap
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.

Ilisasishwa mwisho dakika 3 zilizopita
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>

Kadi za gridi ya taifa

Tumia mfumo wa gridi ya Bootstrap na aina zake .row-colsili kudhibiti ni safu wima ngapi za gridi (zilizofungwa kwenye kadi zako) unazoonyesha kwa kila safu. Kwa mfano, hapa .row-cols-1kunaweka kadi kwenye safu wima moja, na .row-cols-md-2kugawanya kadi nne kwa upana sawa katika safu mlalo nyingi, kutoka sehemu ya katikati ya kukatika kwenda juu.

Placeholder Image cap
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama mwongozo wa asili kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Placeholder Image cap
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama mwongozo wa asili kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Placeholder Image cap
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Placeholder Image cap
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama mwongozo wa asili kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.

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>

Ibadilishe .row-cols-3na utaona kifurushi cha kadi ya nne.

Placeholder Image cap
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama mwongozo wa asili kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Placeholder Image cap
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama mwongozo wa asili kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Placeholder Image cap
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Placeholder Image cap
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama mwongozo wa asili kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.

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>

Unapohitaji urefu sawa, ongeza .h-100kwenye kadi. Ikiwa unataka urefu sawa kwa chaguo-msingi, unaweza kuweka $card-height: 100%katika Sass.

Placeholder Image cap
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama mwongozo wa asili kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Placeholder Image cap
Jina la kadi

Hii ni kadi fupi.

Placeholder Image cap
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Placeholder Image cap
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama mwongozo wa asili kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.

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>

Kama ilivyo kwa vikundi vya kadi, kijachini cha kadi kitajipanga kiotomatiki.

Placeholder Image cap
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita
Placeholder Image cap
Jina la kadi

Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Ilisasishwa mwisho dakika 3 zilizopita
Placeholder Image cap
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.

Ilisasishwa mwisho dakika 3 zilizopita
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>

Uashi

Katika v4tulitumia mbinu ya CSS-pekee kuiga tabia ya safu wima kama za Uashi , lakini mbinu hii ilikuja na athari nyingi zisizofurahi . Ikiwa unataka kuwa na aina hii ya mpangilio katika v5, unaweza tu kutumia programu-jalizi ya Uashi. Uashi haujajumuishwa kwenye Bootstrap , lakini tumetoa mfano wa onyesho ili kukusaidia kuanza.

CSS

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mbinu ya mabadiliko ya vigeu vya CSS ya Bootstrap, kadi sasa zinatumia viwezo vya ndani vya CSS .cardili kuboresha ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

  --#{$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};

Vigezo vya Sass

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