Kadi ya Bootstrap 5

kadi

Kadi za Bootstrap 5 ni kati za kifungu na kina ya matokeo yao ina uga wa kati. Inahusu kati ya kati, matokeo ya kadi, rangi na chochote zingine za chaguo.

kadi ya msingi

Kadi ya msingi inayotumiwa ni kwa sababu ya .card klabu kuzengwa, kina ya kadi ina matokeo moja .card-body klabu:

Mifano

<div class="card">
  <div class="card-body">kadi ya msingi</div>
</div>

Jifunze tena

kati ya kadi na matokeo ya kadi

.card-header Tumia klabu kuongeza kichwa cha kadi,.card-footer Tumia klabu kuongeza matokeo ya kadi:

Mifano

<div class="card">
  <div class="card-header">kati ya kadi</div>
  <div class="card-body">matokeo</div>
  <div class="card-footer">matokeo ya kadi</div>
</div>

Jifunze tena

kadi za mawasiliano

Ikiwa unataka kuongeza rangi ya msingi kwa kadi, tumia klabu za mawasiliano:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Mifano

Jifunze tena

kichwa, matukio na viungo

tumia .card-title ongezea kichwa cha kadi kwa kila kiungo cha kichwa. Ikiwa <p> kina ni .card-body masaa wa mwanafunzi wa kwanza (au kila mwanafunzi mmoja), ni .card-text Kikundi cha kama .card-text <p> mabaki ya chini ya elementi..card-link Kuongeza mabaki ya kijani na mafanikio ya kudumu kwa vituo vya linki vya chochote.

Mifano

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Kichwa cha kadi</h4>
    <p class="card-text">Mafanikio ya maelezo. Mafanikio ya maelezo.</p>
    <a href="#" class="card-link">Link ya kadi</a>
    <a href="#" class="card-link">Link nyingine</a>
  </div>
</div>

Jifunze tena

picha ya kadi

Kuandaa .card-img-top au .card-img-bottom Ongeza kwenye <img>inaobakia kuweka picha kwenye kimoja cha juu au chini cha kadi.

Tunashughulikia kwamba tumewaandaa picha kwenye .card-body kwenye kina cha kina:

Mifano

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates ni mwanachama wa programu na mchakasaji. Mafanikio ya maelezo. Mafanikio ya maelezo.</p>
    <a href="#" class="btn btn-primary">Angalia habari yako</a>
  </div>
</div>

Jifunze tena

Kuandaa picha ya kadi

Kubadilisha picha kuwa mabaki wa kadi na kutumia .card-img-overlay Ongeza matukio kwenye kimoja cha pili:

Mifano

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Mafanikio ya maelezo. Mafanikio ya maelezo.</p>
    <a href="#" class="btn btn-primary">Angalia habari yako</a>
  </div>
</div>

Jifunze tena