Bootstrap 5 Cards

Kartang

Ang kartang sa Bootstrap 5 ay isang kahon na may sulok, ang nilalaman nito ay may ilang panloob na padagos. Ito ay kasama ang pamukaw, talampakan, nilalaman, kulay at iba pang opsyon.

Karaniwang kartang

Ang karaniwang kartang ay ginawa gamit .card Ang nilikha ng klase, ang nilalaman ng kartang may isang .card-body Klase:

Halimbawa

<div class="card">
  <div class="card-body">Karaniwang kartang</div>
</div>

Subukan ang sarili

Pamukaw at Talampakan

.card-header Magdagdag ng titulo sa kartang klase:.card-footer Magdagdag ng talampakan sa kartang klase:

Halimbawa

<div class="card">
  <div class="card-header">Pamukaw</div>
  <div class="card-body">Kontento</div>
  <div class="card-footer">Talampakan</div>
</div>

Subukan ang sarili

Kartang konteksto

Kung nais mong magdagdag ng kulay ng likuran sa card, gamitin ang klase ng konteksto:

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

Halimbawa

Subukan ang sarili

paglalarawan ng titulo, teksto at link

Ginagamit .card-title Magdagdag ng titulo ng card sa anumang elemento ng titulo. Kung <p> ang elemento ay .card-body Ang huling pangkat ng mga bata (o nag-iisang bata), kung mayroon ito .card-text Klase na ginagamit upang alisin <p> Bottom margin ng elemento..card-link Magdagdag ng asul at hover effect sa anumang link na may klase.

Halimbawa

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card Title</h4>
    <p class="card-text">Ilang mga halimbawa ng teksto. Ilang mga halimbawa ng teksto.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Ilang ibang link</a>
  </div>
</div>

Subukan ang sarili

card image

Gawing .card-img-top o .card-img-bottom Idagdag sa <img>Maaaring ilagay ang imahe sa itaas o ibaba ng card.

Pansin, nagdagdag kami ng imahe sa labas ng .card-body upang sumalamin sa buong lapad:

Halimbawa

<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">Si Bill Gates ay isang programer at engineer. Ilang mga halimbawa ng teksto. Ilang mga halimbawa ng teksto.</p>
    <a href="#" class="btn btn-primary"> Tingnan ang Personal Profile</a>
  </div>
</div>

Subukan ang sarili

Card image overlay

Gawing card background ang imahe at gamitin .card-img-overlay Magdagdag ng teksto sa itaas ng imahe:

Halimbawa

<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">Ilang mga halimbawa ng teksto. Ilang mga halimbawa ng teksto.</p>
    <a href="#" class="btn btn-primary"> Tingnan ang Personal Profile</a>
  </div>
</div>

Subukan ang sarili