Cara membuat kad di bootstrap

Untuk membuat kad bootstrap, anda perlu menggunakan bekas kelas kelas dan elemen kanak -kanak. 1. Struktur asas termasuk gambar, tajuk, teks dan butang; 2. Anda boleh menambah .Card-Header dan .card-footer untuk mencapai kepala dan bawah; 3. Gunakan. List-Group untuk membuat kad kumpulan senarai; 4. Gunakan .Card-IMG-overlay untuk mencapai kesan teks overlay imej; 5. Gunakan kelas praktikal seperti .w-100, .shadow dan .bg- Untuk pengoptimuman gaya; 6. Susun atur pelbagai kad boleh digabungkan dengan .row-col- untuk mencapai grid responsif; 7. Pastikan fail CSS Bootstrap 5 diperkenalkan untuk memastikan fungsi normal, dan komponen kad fleksibel dan disesuaikan dengan pelbagai peranti.

Mewujudkan kad di Bootstrap adalah mudah dan fleksibel, terima kasih kepada komponen kad terbina dalam Bootstrap. Kad digunakan untuk kumpulan kandungan berkaitan seperti imej, teks, dan pautan dalam bekas yang bersih dan bersempadan. Berikut adalah cara membuat kad asas menggunakan Bootstrap 5.

Struktur kad bootstrap asas

Kad dibina menggunakan kelas .card sebagai bekas, dan elemen kanak -kanak pilihan untuk kandungan. Inilah contoh minimum:

 <div class = "card" style = "width: 18rem;">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175702316553312.jpeg"  class="lazy"  src = "image.jpg" class = "card-img-top" alt = "card image">
  <div class = "card-body">
    <h5 class = "card-title"> Tajuk kad </h5>
    <p class = "card-text"> Beberapa teks contoh cepat untuk membina tajuk kad. </P>
    <a href = "#" class = "btn btn-primary"> pergi ke suatu tempat </a>
  </div>
</div>

Komponen dan pilihan utama

Anda boleh menyesuaikan kad anda menggunakan pelbagai kelas bootstrap:

• Kad dengan tajuk dan footer

   <div class = "card">
    <div class = "card-header">
      Pilihan
    </div>
    <div class = "card-body">
      <h5 class = "card-title"> Tajuk khas </h5>
      <p class = "card-text"> dengan teks sokongan di bawah. </P>
      <a href = "#" class = "btn btn-primary"> butang </a>
    </div>
    <div class = "card-footer text-muted">
      Dikemas kini baru -baru ini
    </div>
  </div>

• Kad dengan kumpulan senarai

  

   <div class = "card" style = "width: 18rem;">
    <ul class = "senarai senarai kumpulan-kumpulan-flush">
      <li class = "List-group-item"> CRAS Justo Odio </li>
      <li class = "List-group-item"> Dapibus AC Facilisis </li>
      <li class = "List-group-item"> Vestibulum di Eros </li>
    </ul>
  </div>

• Kad dengan Overlay (Kapsyen Imej)

   <div class = "card bg-dark text-white">
    <img src = "image.jpg" class = "card-img" alt = "...">
    <div class = "card-img-overlay">
      <h5 class = "card-title"> Tajuk kad </h5>
      <p class = "card-text"> Teks overlay pergi ke sini. </P>
    </div>
  </div>

Petua untuk gaya dan susun atur

• Gunakan kelas utiliti seperti w-100 atau mx-auto untuk saiz responsif.
• Gabungkan kad dalam susun atur .row dan .col-* untuk grid kad.
• Gunakan kelas kontekstual seperti .bg-primary , .text-white to style latar dan teks.
• Tambah bayang-bayang dengan .shadow-sm , .shadow , atau .shadow-lg untuk kedalaman.

Untuk beberapa kad, bungkusnya dalam bekas flex atau grid:

 <div class = "row">
  <div class = "col-md-4">
    <div class = "card">
      <!-kandungan kad->
    </div>
  </div>
  <div class = "col-md-4">
    <div class = "card">
      <!-kandungan kad->
    </div>
  </div>
  <div class = "col-md-4">
    <div class = "card">
      <!-kandungan kad->
    </div>
  </div>
</div>

Pastikan bootstrap CSS dimasukkan ke dalam fail HTML anda:

 <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet">

Itu sahaja. Kad sangat boleh diguna semula dan berfungsi dengan baik di seluruh peranti. Hanya struktur kandungan anda dan gunakan kelas yang betul.

Atas ialah kandungan terperinci Cara membuat kad di bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!