Bootstrap - Cards: Panduan untuk Pemula
Halo sana, calon pengembang web! Hari ini, kita akan melihat dunia yang menakjubkan dari Bootstrap Cards. Sebagai guru komputer yang ramah di lingkungan Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Mari kita khayal sedang membuat buku catatan digital bersama – itu sebenarnya apa yang kita lakukan dengan Bootstrap Cards!
Apa Itu Bootstrap Card?
Sebelum kita masuk ke kode, mari kita pahami apa itu Bootstrap Card. Bayangkan itu sebagai wadah fleksibel, seperti kotak, di mana Anda dapat memasukkan berbagai jenis konten – teks, gambar, tautan, dan lainnya. Itu seperti versi digital dari kartu dagangan yang Anda kumpulkan saat kecil, tapi jauh lebih keren dan multifungsi!
Struktur Card Dasar
Mari kita mulai dengan struktur card yang paling dasar:
<div class="card">
<div class="card-body">
<h5 class="card-title">Halo, Saya Sebuah Card!</h5>
<p class="card-text">Saya dapat menampung semua jenis informasi menarik.</p>
</div>
</div>Kode ini membuat card sederhana dengan judul dan beberapa teks. Kelas card membuat wadah, dan card-body mengelilingi konten di dalamnya.
Jenis Konten
Sekarang, mari kita jelajahi berbagai jenis konten yang dapat kita masukkan ke dalam card:
Judul, Teks, dan Tautan
<div class="card">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<h6 class="card-subtitle mb-2 text-muted">Subjudul Card</h6>
<p class="card-text">Beberapa contoh teks yang cepat untuk membangun pada judul card dan membentuk mayoritas konten card.</p>
<a href="#" class="card-link">Tautan Card</a>
<a href="#" class="card-link">Tautan Lain</a>
</div>
</div>Contoh ini menunjukkan bagaimana kita dapat menambahkan subjudul, teks lebih banyak, dan tautan ke card. Itu seperti menambahkan berbagai bagian ke halaman buku catatan digital kita!
Gambar
Mari kita tambahkan sedikit daya tarik visual dengan gambar:
<div class="card">
<img src="path/to/your/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Lihat gambar ini yang indah!</p>
</div>
</div>Kelas card-img-top menempatkan gambar di bagian atas card. Itu seperti meletakkan foto di bagian atas halaman buku catatan Anda!
List Groups
Kita bahkan dapat menambahkan daftar ke card:
<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">Sebuah item</li>
<li class="list-group-item">Item kedua</li>
<li class="list-group-item">Item ketiga</li>
</ul>
</div>Ini membuat card dengan daftar di dalamnya. sempurna untuk daftar todo atau poin-poin!
Kitchen Sink
Sekarang, mari kita gabungkan semua yang kita pelajari ke dalam satu card "kitchen sink":
<div class="card" style="width: 18rem;">
<img src="path/to/your/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Beberapa contoh teks yang cepat untuk membangun pada judul card dan membentuk mayoritas konten card.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Sebuah item</li>
<li class="list-group-item">Item kedua</li>
<li class="list-group-item">Item ketiga</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Tautan Card</a>
<a href="#" class="card-link">Tautan Lain</a>
</div>
</div>Card ini memiliki segala sesuatu – gambar, judul, teks, daftar, dan tautan. Itu seperti pisau瑞士军刀 dari card!
Header dan Footer
Kita dapat menambahkan header dan footer ke card untuk struktur ekstra:
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Judul khusus</h5>
<p class="card-text">Dengan teks pendukung di bawah sebagai pengantar alami ke konten tambahan.</p>
<a href="#" class="btn btn-primary">Pergi ke suatu tempat</a>
</div>
<div class="card-footer text-muted">
2 hari yang lalu
</div>
</div>Header dan footer memberikan penampilan yang bagus dan rapih bagi card kita.
Ukuran
Kita dapat mengontrol ukuran card menggunakan kelas grid atau CSS khusus:
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Card ini 75% lebar.</p>
</div>
</div>Card ini akan mencapai 75% lebar wadahnya.
Menggunakan Markup Grid
Kita dapat menggunakan sistem grid Bootstrap untuk mengatur card kita:
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Judul khusus</h5>
<p class="card-text">Dengan teks pendukung di bawah sebagai pengantar alami ke konten tambahan.</p>
<a href="#" class="btn btn-primary">Pergi ke suatu tempat</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Judul khusus</h5>
<p class="card-text">Dengan teks pendukung di bawah sebagai pengantar alami ke konten tambahan.</p>
<a href="#" class="btn btn-primary">Pergi ke suatu tempat</a>
</div>
</div>
</div>
</div>Ini membuat dua card berdampingan di layar yang besar, dan bertumpuk di layar yang kecil.
Navigasi
Kita bahkan dapat menjadikan card sebagai elemen navigasi:
<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="#">Aktif</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tautan</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Nonaktif</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Judul khusus</h5>
<p class="card-text">Dengan teks pendukung di bawah sebagai pengantar alami ke konten tambahan.</p>
<a href="#" class="btn btn-primary">Pergi ke suatu tempat</a>
</div>
</div>Ini membuat card dengan tab navigasi di bagian atas.
Gaya Card
Bootstrap menawarkan berbagai gaya untuk card:
Latar Belakang dan Warna
<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">Judul Card Primer</h5>
<p class="card-text">Beberapa contoh teks yang cepat untuk membangun pada judul card dan membentuk mayoritas konten card.</p>
</div>
</div>Ini membuat card biru dengan teks putih. Anda dapat mengganti bg-primary dengan kelas warna lain seperti bg-success, bg-warning, dll.
Kesimpulan
Dan itulah, teman-teman! Kita telah melintasi negeri Bootstrap Cards, dari struktur dasar ke tata letak yang maju. Ingat, latihan membuat sempurna. Cobalah menggabungkan elemen dan gaya yang berbeda untuk membuat card Anda sendiri. Siapa tahu? Anda mungkin akan menciptakan hal baru yang besar dalam desain web! Sekarang pergilah dan buat tata letak card yang menakjubkan! Ingat, dalam pengembangan web, seperti dalam kehidupan, itu tentang berpikir di luar kotak – atau dalam hal ini, didalam card! Selamat coding!
Credits: Image by storyset