Kad

Kad Bootstrap menyediakan bekas kandungan yang fleksibel dan boleh diperluas dengan pelbagai variasi dan pilihan.

Pada halaman ini

Tentang

Kad ialah bekas kandungan yang fleksibel dan boleh dikembangkan. Ia termasuk pilihan untuk pengepala dan pengaki, pelbagai jenis kandungan, warna latar belakang kontekstual dan pilihan paparan yang berkuasa. Jika anda biasa dengan Bootstrap 3, kad menggantikan panel lama, perigi dan lakaran kecil kami. Fungsi yang serupa dengan komponen tersebut tersedia sebagai kelas pengubah suai untuk kad.

Contoh

Kad dibina dengan penanda dan gaya sesedikit mungkin, tetapi masih berjaya menyampaikan satu tan kawalan dan penyesuaian. Dibina dengan flexbox, ia menawarkan penjajaran mudah dan bergaul dengan baik dengan komponen Bootstrap yang lain. Mereka tidak mempunyai marginsecara lalai, jadi gunakan utiliti jarak mengikut keperluan.

Di bawah ialah contoh kad asas dengan kandungan campuran dan lebar tetap. Kad tidak mempunyai lebar tetap untuk dimulakan, jadi ia secara semula jadi akan mengisi lebar penuh elemen induknya. Ini mudah disesuaikan dengan pelbagai pilihan saiz kami .

Tajuk kad

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Pergi ke suatu tempat

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>

Jenis kandungan

Kad menyokong pelbagai jenis kandungan, termasuk imej, teks, kumpulan senarai, pautan dan banyak lagi. Di bawah ialah contoh perkara yang disokong.

Badan

Blok binaan kad ialah .card-body. Gunakannya apabila anda memerlukan bahagian empuk dalam kad.

Ini ialah beberapa teks dalam badan kad.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Tajuk, teks dan pautan

Tajuk kad digunakan dengan menambah .card-titlepada <h*>tag. Dengan cara yang sama, pautan ditambah dan diletakkan bersebelahan dengan satu sama lain dengan menambah .card-linkpada <a>teg.

Sari kata digunakan dengan menambahkan a .card-subtitlepada <h*>tag. Jika .card-titledan .card-subtitleitem diletakkan dalam .card-bodyitem, tajuk kad dan sari kata diselaraskan dengan baik.

Tajuk kad

Sari kata kad

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Pautan kad Pautan lain

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>

Imej

.card-img-topmeletakkan imej pada bahagian atas kad. Dengan .card-text, teks boleh ditambah pada kad. Teks dalam .card-textjuga boleh digayakan dengan tag HTML standard.

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

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>

Senaraikan kumpulan

Buat senarai kandungan dalam kad dengan kumpulan senarai siram.

Barang
Item kedua
Item ketiga

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>

Ditampilkan

Barang
Item kedua
Item ketiga

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>

Barang
Item kedua
Item ketiga

Pengaki kad

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 dapur

Campurkan dan padankan berbilang jenis kandungan untuk membuat kad yang anda perlukan, atau buang segala-galanya di sana. Ditunjukkan di bawah ialah gaya imej, blok, gaya teks dan kumpulan senarai—semuanya dibalut dengan kad lebar tetap.

Tajuk kad

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Barang
Item kedua
Item ketiga

Pautan kad Pautan lain

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>

Pengepala dan pengaki

Tambahkan pengepala dan/atau pengaki pilihan dalam kad.

Ditampilkan

Layanan tajuk istimewa

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Pergi ke suatu tempat

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>

Pengepala kad boleh digayakan dengan menambah .card-headerelemen <h*>.

Ditampilkan

Layanan tajuk istimewa

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Pergi ke suatu tempat

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>

petikan

Petikan yang terkenal, terkandung dalam elemen petikan blok.

Seseorang yang terkenal dalam Tajuk Sumber

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>

Ditampilkan

Layanan tajuk istimewa

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Pergi ke suatu tempat

2 hari lepas

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>

Saiz

Kad menganggap tiada khusus widthuntuk dimulakan, jadi ia akan menjadi 100% lebar melainkan dinyatakan sebaliknya. Anda boleh menukar ini mengikut keperluan dengan CSS tersuai, kelas grid, campuran Sass grid atau utiliti.

Menggunakan penanda grid

Menggunakan grid, bungkus kad dalam lajur dan baris mengikut keperluan.

Layanan tajuk istimewa

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Pergi ke suatu tempat

Layanan tajuk istimewa

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Pergi ke suatu tempat

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>

Menggunakan utiliti

Gunakan segelintir utiliti saiz kami yang tersedia untuk menetapkan lebar kad dengan cepat.

Tajuk kad

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Butang

Tajuk kad

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Butang

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>

Menggunakan CSS tersuai

Gunakan CSS tersuai dalam helaian gaya anda atau sebagai gaya sebaris untuk menetapkan lebar.

Layanan tajuk istimewa

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Pergi ke suatu tempat

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>

Penjajaran teks

Anda boleh menukar penjajaran teks mana-mana kad dengan cepat—secara keseluruhan atau bahagian tertentu—dengan kelas penjajaran teks kami .

Layanan tajuk istimewa

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Pergi ke suatu tempat

Layanan tajuk istimewa

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Pergi ke suatu tempat

Layanan tajuk istimewa

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Pergi ke suatu tempat

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>

Tambahkan beberapa navigasi pada pengepala (atau blok) kad dengan komponen navigasi Bootstrap .

Layanan tajuk istimewa

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Pergi ke suatu tempat

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>

Layanan tajuk istimewa

Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Pergi ke suatu tempat

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>

Imej

Kad termasuk beberapa pilihan untuk bekerja dengan imej. Pilih daripada menambahkan "topi imej" pada kedua-dua hujung kad, menindih imej dengan kandungan kad atau hanya membenamkan imej dalam kad.

Tudung imej

Sama seperti pengepala dan pengaki, kad boleh termasuk "topi imej" atas dan bawah—imej di bahagian atas atau bawah kad.

Tajuk kad

Ini ialah kad yang lebih luas dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Kemas kini terakhir 3 minit yang lalu

Tajuk kad

Ini ialah kad yang lebih luas dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Kemas kini terakhir 3 minit yang lalu

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>

Tindanan imej

Tukar imej kepada latar belakang kad dan tindih teks kad anda. Bergantung pada imej, anda mungkin memerlukan gaya atau utiliti tambahan atau tidak.

Tajuk kad

Ini ialah kad yang lebih luas dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Kemas kini terakhir 3 minit yang lalu

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>

Ambil perhatian bahawa kandungan tidak boleh lebih besar daripada ketinggian imej. Jika kandungan lebih besar daripada imej kandungan akan dipaparkan di luar imej.

Mendatar

Menggunakan gabungan kelas grid dan utiliti, kad boleh dibuat mendatar dengan cara yang mesra mudah alih dan responsif. Dalam contoh di bawah, kami mengalih keluar talang grid .g-0dan menggunakan .col-md-*kelas untuk menjadikan kad mendatar pada mdtitik putus. Pelarasan lanjut mungkin diperlukan bergantung pada kandungan kad anda.

Tajuk kad

Ini ialah kad yang lebih luas dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Kemas kini terakhir 3 minit yang lalu

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>

Gaya kad

Kad termasuk pelbagai pilihan untuk menyesuaikan latar belakang, sempadan dan warnanya.

Latar belakang dan warna

Ditambah dalam v5.2.0

Tetapkan background-colordengan latar depan yang berbeza colordengan pembantu kami.text-bg-{color} . Sebelum ini ia dikehendaki untuk memasangkan pilihan anda .text-{color}dan .bg-{color}utiliti secara manual untuk penggayaan, yang masih boleh anda gunakan jika anda mahu.

Kepala

Tajuk kad utama

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad sekunder

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad kejayaan

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad bahaya

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad amaran

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad maklumat

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad ringan

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad gelap

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

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>

Menyampaikan makna kepada teknologi bantuan

Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .visually-hiddenkelas.

Sempadan

Gunakan utiliti sempadan untuk menukar hanya border-colorkad. Ambil perhatian bahawa anda boleh meletakkan .text-{color}kelas pada induk .cardatau subset kandungan kad seperti yang ditunjukkan di bawah.

Kepala

Tajuk kad utama

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad sekunder

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad kejayaan

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad bahaya

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad amaran

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad maklumat

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad ringan

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Tajuk kad gelap

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

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>

Utiliti Mixins

Anda juga boleh menukar sempadan pada pengepala dan pengaki kad mengikut keperluan, malah mengalih keluarnya background-colordengan .bg-transparent.

Kepala

Tajuk kad kejayaan

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Pengaki

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>

Susun atur kad

Selain menggayakan kandungan dalam kad, Bootstrap menyertakan beberapa pilihan untuk meletakkan siri kad. Buat masa ini, pilihan susun atur ini masih belum responsif .

Kumpulan kad

Gunakan kumpulan kad untuk menjadikan kad sebagai satu elemen yang dilampirkan dengan lajur lebar dan tinggi yang sama. Kumpulan kad mula disusun dan digunakan display: flex;untuk disambungkan dengan dimensi seragam bermula pada smtitik putus.

Tajuk kad

Ini ialah kad yang lebih luas dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Kemas kini terakhir 3 minit yang lalu

Tajuk kad

Kad ini mempunyai teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Kemas kini terakhir 3 minit yang lalu

Tajuk kad

Ini ialah kad yang lebih luas dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan. Kad ini mempunyai kandungan yang lebih panjang daripada yang pertama menunjukkan tindakan ketinggian yang sama itu.

Kemas kini terakhir 3 minit yang lalu

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>

Apabila menggunakan kumpulan kad dengan pengaki, kandungannya akan berbaris secara automatik.

Tajuk kad

Ini ialah kad yang lebih luas dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Kemas kini terakhir 3 minit yang lalu

Tajuk kad

Kad ini mempunyai teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Kemas kini terakhir 3 minit yang lalu

Tajuk kad

Kemas kini terakhir 3 minit yang lalu

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>

Kad grid

Gunakan sistem grid Bootstrap dan .row-colskelasnya untuk mengawal bilangan lajur grid (digulung pada kad anda) yang anda tunjukkan setiap baris. Sebagai contoh, berikut ialah .row-cols-1meletakkan kad pada satu lajur, dan .row-cols-md-2membahagi empat kad kepada lebar yang sama merentas berbilang baris, dari titik putus sederhana ke atas.

Tajuk kad

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Tajuk kad

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Tajuk kad

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan.

Tajuk kad

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

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>

Tukar kepada .row-cols-3dan anda akan melihat balut kad keempat.

Tajuk kad

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Tajuk kad

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Tajuk kad

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan.

Tajuk kad

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

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>

Apabila anda memerlukan ketinggian yang sama, tambahkan .h-100pada kad. Jika anda mahu ketinggian yang sama secara lalai, anda boleh menetapkan $card-height: 100%dalam Sass.

Tajuk kad

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Tajuk kad

Ini adalah kad pendek.

Tajuk kad

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan.

Tajuk kad

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

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>

Sama seperti kumpulan kad, pengaki kad akan berbaris secara automatik.

Tajuk kad

Ini ialah kad yang lebih luas dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Kemas kini terakhir 3 minit yang lalu

Tajuk kad

Kad ini mempunyai teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Kemas kini terakhir 3 minit yang lalu

Tajuk kad

Kemas kini terakhir 3 minit yang lalu

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>

Batu

Dalam v4kami menggunakan teknik CSS sahaja untuk meniru kelakuan lajur seperti Masonry , tetapi teknik ini datang dengan banyak kesan sampingan yang tidak menyenangkan . Jika anda ingin mempunyai reka letak jenis ini dalam v5, anda hanya boleh menggunakan pemalam Masonry. Masonry tidak termasuk dalam Bootstrap , tetapi kami telah membuat contoh demo untuk membantu anda bermula.

CSS

Pembolehubah

Ditambah dalam v5.2.0

Sebagai sebahagian daripada pendekatan pembolehubah CSS Bootstrap yang berkembang, kad kini menggunakan pembolehubah CSS tempatan .carduntuk penyesuaian masa nyata yang dipertingkatkan. Nilai untuk pembolehubah CSS ditetapkan melalui Sass, jadi penyesuaian Sass masih disokong juga.

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

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

Kad

Tentang

Contoh

Tajuk kad

Jenis kandungan

Badan

Tajuk, teks dan pautan

Tajuk kad

Sari kata kad

Imej

Senaraikan kumpulan

Sinki dapur

Tajuk kad

Pengepala dan pengaki

Layanan tajuk istimewa

Ditampilkan

Layanan tajuk istimewa

Layanan tajuk istimewa

Saiz

Menggunakan penanda grid

Layanan tajuk istimewa

Layanan tajuk istimewa

Menggunakan utiliti

Tajuk kad

Tajuk kad

Menggunakan CSS tersuai

Layanan tajuk istimewa

Penjajaran teks

Layanan tajuk istimewa

Layanan tajuk istimewa

Layanan tajuk istimewa

Navigasi

Layanan tajuk istimewa

Layanan tajuk istimewa

Imej

Tudung imej

Tajuk kad

Tajuk kad

Tindanan imej

Tajuk kad

Mendatar

Tajuk kad

Gaya kad

Latar belakang dan warna

Tajuk kad utama

Tajuk kad sekunder

Tajuk kad kejayaan

Tajuk kad bahaya

Tajuk kad amaran

Tajuk kad maklumat

Tajuk kad ringan

Tajuk kad gelap

Menyampaikan makna kepada teknologi bantuan

Sempadan

Tajuk kad utama

Tajuk kad sekunder

Tajuk kad kejayaan

Tajuk kad bahaya

Tajuk kad amaran

Tajuk kad maklumat

Tajuk kad ringan

Tajuk kad gelap

Utiliti Mixins

Tajuk kad kejayaan

Susun atur kad

Kumpulan kad

Tajuk kad

Tajuk kad

Tajuk kad

Tajuk kad

Tajuk kad

Tajuk kad

Kad grid

Tajuk kad

Tajuk kad

Tajuk kad

Tajuk kad

Tajuk kad

Tajuk kad

Tajuk kad