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 margin
secara 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.
<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-title
pada <h*>
tag. Dengan cara yang sama, pautan ditambah dan diletakkan bersebelahan dengan satu sama lain dengan menambah .card-link
pada <a>
teg.
Sari kata digunakan dengan menambahkan a .card-subtitle
pada <h*>
tag. Jika .card-title
dan .card-subtitle
item diletakkan dalam .card-body
item, 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-top
meletakkan imej pada bahagian atas kad. Dengan .card-text
, teks boleh ditambah pada kad. Teks dalam .card-text
juga 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.
- Barang
- Item kedua
- Item ketiga
<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>
- Barang
- Item kedua
- Item ketiga
<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
<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
<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.
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-header
elemen <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 yang terkenal, terkandung dalam elemen petikan blok.
<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>
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">
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 width
untuk 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 tempatLayanan 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.
ButangTajuk 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 tempatLayanan tajuk istimewa
Dengan teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.
Pergi ke suatu tempatLayanan 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-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>
Navigasi
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" 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<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
<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.
<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>
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-0
dan menggunakan .col-md-*
kelas untuk menjadikan kad mendatar pada md
titik 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 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
Gunakan warna teks dan utiliti latar belakang untuk menukar rupa kad.
Tajuk kad utama
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad sekunder
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad kejayaan
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad bahaya
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad amaran
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad maklumat
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad ringan
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
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-dark 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-dark 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-dark 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 .visually-hidden
kelas.
Sempadan
Gunakan utiliti sempadan untuk menukar hanya border-color
kad. Ambil perhatian bahawa anda boleh meletakkan .text-{color}
kelas pada induk .card
atau subset kandungan kad seperti yang ditunjukkan di bawah.
Tajuk kad utama
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad sekunder
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad kejayaan
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad bahaya
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad amaran
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad maklumat
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
Tajuk kad ringan
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
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">
<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-color
dengan .bg-transparent
.
Tajuk kad kejayaan
Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.
<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 sm
titik 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
<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.
Tajuk kad
Kad ini mempunyai teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.
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.
<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-cols
kelasnya untuk mengawal bilangan lajur grid (digulung pada kad anda) yang anda tunjukkan setiap baris. Sebagai contoh, berikut ialah .row-cols-1
meletakkan kad pada satu lajur, dan .row-cols-md-2
membahagi 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 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-3
dan 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.
<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-100
pada 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 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.
Tajuk kad
Kad ini mempunyai teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.
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.
<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 v4
kami 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.
Sass
Pembolehubah
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$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;