Bootstrap - Kad: Panduan untuk Pemula

Hai sana, bakal pengembang web! Hari ini, kita akan melihat dunia yang menakjubkan dari Kad Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Mari kita imaginasikan bahwa kita sedang membuat buku catatan digital bersama – itu sebenarnya apa yang kita lakukan dengan Kad Bootstrap!

Apa Itu Kad Bootstrap?

Sebelum kita masuk ke kode, mari kita pahami apa itu Kad Bootstrap. bayangkan itu sebagai wadah fleksibel, seperti kotak, tempat Anda dapat memasukkan jenis konten yang berbeda - teks, gambar, tautan, dan lainnya. Itu seperti versi digital dari kartu trading yang Anda kumpulkan saat kecil, tapi jauh lebih keren dan beragam!

Struktur Kad Dasar

Mari kita mulai dengan struktur kad yang paling dasar:

<div class="card">
<div class="card-body">
<h5 class="card-title">Hai, Saya Kad!</h5>
<p class="card-text">Saya dapat menampung semua jenis informasi yang menarik.</p>
</div>
</div>

Kode ini menciptakan kad sederhana dengan judul dan beberapa teks. Kelas card menciptakan wadah, dan card-body membungkus konten didalamnya.

Jenis Konten

Sekarang, mari kita jelajahi jenis konten yang berbeda yang kita dapat masukkan ke dalam kad:

Judul, Teks, dan Tautan

<div class="card">
<div class="card-body">
<h5 class="card-title">Judul Kad</h5>
<h6 class="card-subtitle mb-2 text-muted">Subjudul Kad</h6>
<p class="card-text">Beberapa contoh teks cepat untuk membangun judul kad dan membentuk mayoritas konten kad.</p>
<a href="#" class="card-link">Tautan Kad</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 kad. 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 kad. Itu seperti menempelkan foto di bagian atas halaman buku catatan Anda!

List Groups

Kita bahkan dapat menambahkan daftar ke kad:

<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 menciptakan kad dengan daftar didalamnya. Sempurna untuk daftar todo atau bullet points!

Kitchen Sink

Sekarang, mari kita gabungkan semua yang kita pelajari ke dalam satu kad "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 Kad</h5>
<p class="card-text">Beberapa contoh teks cepat untuk membangun judul kad dan membentuk mayoritas konten kad.</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 Kad</a>
<a href="#" class="card-link">Tautan Lain</a>
</div>
</div>

Kad ini memiliki segalanya - gambar, judul, teks, daftar, dan tautan. Itu seperti pisau Swiss Army bagi kad!

Header dan Footer

Kita dapat menambahkan header dan footer ke kad untuk struktur ekstra:

<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Treatment judul khusus</h5>
<p class="card-text">Dengan teks pendukung di bawah ini sebagai pengantar alami ke konten tambahan.</p>
<a href="#" class="btn btn-primary">Pergi ke mana-mana</a>
</div>
<div class="card-footer text-muted">
2 hari yang lalu
</div>
</div>

Header dan footer memberikan kad kita penampilan yang bagus dan polos.

Ukuran

Kita dapat mengontrol ukuran kad kita menggunakan kelas grid atau CSS khusus:

<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Judul Kad</h5>
<p class="card-text">Kad ini 75% lebar.</p>
</div>
</div>

Kad ini akan mengambil 75% lebar wadahnya.

Menggunakan Markup Grid

Kita dapat menggunakan sistem grid Bootstrap untuk mengatur kad kita:

<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Treatment judul khusus</h5>
<p class="card-text">Dengan teks pendukung di bawah ini sebagai pengantar alami ke konten tambahan.</p>
<a href="#" class="btn btn-primary">Pergi ke mana-mana</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Treatment judul khusus</h5>
<p class="card-text">Dengan teks pendukung di bawah ini sebagai pengantar alami ke konten tambahan.</p>
<a href="#" class="btn btn-primary">Pergi ke mana-mana</a>
</div>
</div>
</div>
</div>

Ini menciptakan dua kad di sebelah kanan pada layar yang besar, dan bertumpuk di layar yang kecil.

Navigasi

Kita bahkan dapat mengubah kad kita menjadi 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="#">Active</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">Treatment judul khusus</h5>
<p class="card-text">Dengan teks pendukung di bawah ini sebagai pengantar alami ke konten tambahan.</p>
<a href="#" class="btn btn-primary">Pergi ke mana-mana</a>
</div>
</div>

Ini menciptakan kad dengan tab navigasi di bagian atas.

gaya Kad

Bootstrap menawarkan berbagai gaya untuk kad:

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 Kad Primari</h5>
<p class="card-text">Beberapa contoh teks cepat untuk membangun judul kad dan membentuk mayoritas konten kad.</p>
</div>
</div>

Ini menciptakan kad biru dengan teks putih. Anda dapat mengganti bg-primary dengan kelas warna lain seperti bg-success, bg-warning, dll.

Kesimpulan

Danitu, teman-teman! Kita telah melintasi negeri Kad Bootstrap, dari struktur dasar hingga tata letak lanjut. Ingat, latihan membuat sempurna. Cobalah menggabungkan elemen dan gaya yang berbeda untuk menciptakan kad Anda sendiri. Siapa tahu? Anda mungkin menciptakan hal yang besar dalam desain web!

Berikut adalah tabel yang menggabungkan kelas Kad Bootstrap utama yang kita pelajari:

Kelas	Deskripsi
.card	Menciptakan wadah kad dasar
.card-body	membungkus konten kad
.card-title	Meng gayakan judul kad
.card-text	Meng gayakan teks kad
.card-link	Meng gayakan tautan dalam kad
.card-img-top	Menempatkan gambar di atas kad
.card-header	Menciptakan header kad
.card-footer	Menciptakan footer kad
.bg-*	Mengubah warna latar belakang kad
.text-*	Mengubah warna teks kad

Sekarang, pergi dan buat desain kad yang menakjubkan! Ingat, dalam pengembangan web, seperti dalam kehidupan, itu tentang berpikir di luar kotak – atau dalam hal ini, di dalam kad! Selamat coding!

Credits: Image by storyset