Kad

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

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

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

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

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

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum dan eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Ditampilkan

Cras justo odio
Dapibus ac facilisis in
Vestibulum dan eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum dan eros

Pautan kad Pautan lain

<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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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

<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

<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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Seseorang yang terkenal dalam Tajuk Sumber

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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

<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

<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

<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

<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

<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-right" 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

<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" 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" href="#" tabindex="-1" aria-disabled="true">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

<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" href="#" tabindex="-1" aria-disabled="true">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

<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-top" 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

<div class="card bg-dark text-white">
  <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">Last updated 3 mins ago</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 .no-guttersdan 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

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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

Gunakan utiliti teks dan latar belakang untuk menukar rupa kad.

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.

<div class="card text-white 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-white 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-white 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-white 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-white 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-white 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 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-white 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 .sr-onlykelas.

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.

<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 text-warning">
    <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 text-info">
    <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

<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 gunakan display: flex;untuk mencapai saiz seragam mereka.

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

<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

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

Dek kad

Perlukan satu set kad lebar dan tinggi yang sama yang tidak disambungkan antara satu sama lain? Gunakan dek kad.

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.

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

<div class="card-deck">
  <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>
      <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>

Sama seperti kumpulan kad, pengaki kad dalam dek 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

<div class="card-deck">
  <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.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 bungkus 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.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Lajur kad

Kad boleh disusun ke dalam lajur seperti Masonry.card-columns dengan hanya CSS dengan membungkusnya dalam . Kad dibina dengan columnsifat CSS dan bukannya flexbox untuk penjajaran yang lebih mudah. Kad dipesan dari atas ke bawah dan kiri ke kanan.

Angkat kepala! Perbatuan anda dengan lajur kad mungkin berbeza-beza. Untuk mengelakkan kad merentas lajur, kita mesti menetapkannya display: inline-blocksebagai column-break-inside: avoidpenyelesaian kalis peluru lagi.

Tajuk kad yang dibalut ke baris baharu

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Seseorang yang terkenal dalam Tajuk Sumber

Tajuk kad

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

Kemas kini terakhir 3 minit yang lalu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Seseorang yang terkenal dalam Tajuk Sumber

Tajuk kad

Kad ini mempunyai tajuk biasa dan perenggan pendek teks di bawahnya.

Kemas kini terakhir 3 minit yang lalu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Seseorang yang terkenal dalam Tajuk Sumber

Tajuk kad

Ini adalah satu lagi kad dengan tajuk dan teks sokongan di bawah. Kad ini mempunyai beberapa kandungan tambahan untuk menjadikannya lebih tinggi sedikit secara keseluruhan.

Kemas kini terakhir 3 minit yang lalu

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</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>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Lajur kad juga boleh dipanjangkan dan disesuaikan dengan beberapa kod tambahan. Ditunjukkan di bawah ialah lanjutan .card-columnskelas menggunakan CSS yang sama yang kami gunakan—lajur CSS— untuk menjana satu set peringkat responsif bagi menukar bilangan lajur.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 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

Dek kad

Tajuk kad

Tajuk kad

Tajuk kad

Tajuk kad

Tajuk kad

Tajuk kad

Kad grid