Bootstrap - Stacks: Panduan Pemula

Hai sana, bakal pengembang web! Hari ini, kita akan melihat dunia yang menakjubkan Bootstrap Stacks. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda dalam perjalanan yang menarik ini. Pada akhir tutorial ini, Anda akan mengerahkan elemen seperti seorang ahli!

Apa Itu Bootstrap Stacks?

Sebelum kita memulai, mari bicarakan apa itu stacks dalam Bootstrap. Bayangkan Anda sedang membangun menara dengan blok Lego. Anda dapat menumpuknya secara vertikal (salah satu di atas yang lain) atau horizontal (sebelahnya). Bootstrap stacks bekerja dengan cara yang sama, tetapi bukan dengan blok Lego, kita mengatur elemen HTML di halaman web.

Sekarang, mari jelajahi dua jenis utama stacks di Bootstrap:

Stack Vertikal

Stack vertikal mirip seperti tumpukan pancake - setiap elemen duduk di atas elemen yang di bawahnya. Dalam Bootstrap, kita membuat stack vertikal menggunakan kelas .vstack.

Stack Vertikal Dasar

Mari mulai dengan contoh sederhana:

<div class="vstack gap-3">
<div class="p-2">Item pertama</div>
<div class="p-2">Item kedua</div>
<div class="p-2">Item ketiga</div>
</div>

Dalam kode ini:

• Kita membuat wadah <div> dengan kelas vstack.
• gap-3 menambahkan ruang antara item yang ditumpuk.
• Setiap item adalah <div> dengan kelas p-2 untuk padding.

Ketika Anda menjalankan kode ini, Anda akan melihat tiga kotak yang ditumpuk vertikal, masing-masing berisi teks. Itu sungguh mudah!

Stack Vertikal Dengan Konten Berbeda

Mari membuatnya sedikit lebih menarik:

<div class="vstack gap-3">
<button class="btn btn-secondary">Klik saya!</button>
<div class="bg-light border">Saya adalah kotak</div>
<div class="bg-light border">
<h3>Saya adalah judul</h3>
<p>Dan saya adalah teks</p>
</div>
</div>

Di sini, kita mencampur jenis konten yang berbeda:

• Sebuah tombol (menggunakan kelas tombol Bootstrap)
• Sebuah div dengan latar belakang terang dan batas
• Sebuah div yang lebih kompleks dengan judul dan paragraf

Ini menunjukkan betapa fleksibel stack vertikal bisa menjadi. Anda tidak terbatas hanya untuk kotak teks sederhana!

Stack Horizontal

Sekarang, mari ganti arah dan bicarakan tentang stack horizontal. Jika stack vertikal seperti pancake, stack horizontal seperti baris dominos - elemen diatur sebelahnya. Kita menggunakan kelas .hstack untuk ini.

Stack Horizontal Dasar

Ini adalah contoh sederhana:

<div class="hstack gap-3">
<div class="p-2">Pertama</div>
<div class="p-2">Kedua</div>
<div class="p-2">Ketiga</div>
</div>

Kode ini sangat mirip dengan stack vertikal kita, tetapi kita menggunakan hstack saja. Hasilnya? Tiga kotak diatur secara horizontal!

Stack Horizontal Dengan Penyejajaran

Mari membuatnya lebih menarik:

<div class="hstack gap-3">
<div class="bg-light border">Item pertama</div>
<div class="bg-light border ms-auto">Item kedua</div>
<div class="bg-light border">Item ketiga</div>
</div>

Dalam contoh ini:

• Kita menambahkan latar belakang dan batas ke item.
• Kelas ms-auto pada item kedua mendorongnya ke kanan, menciptakan ruang antara item pertama dan kedua.

Ini menunjukkan bagaimana kita dapat mengontrol penempatan di dalam stack horizontal kita.

Menggabungkan Stack Vertikal dan Horizontal

Sekarang, mari lihat tempat magis terjadi. Kita dapat menggabungkan stack vertikal dan horizontal untuk membuat tata letak yang kompleks:

<div class="vstack gap-3">
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="Masukkan item Anda disini...">
<button type="button" class="btn btn-secondary">Kirim</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">Setel Ulang</button>
</div>
<div class="bg-light border">Item khusus</div>
<div class="bg-light border">Item khusus</div>
</div>

Contoh kompleks ini menunjukkan:

• Stack vertikal sebagai wadah utama
• Stack horizontal di dalam stack vertikal (input dan tombol)
• Item lain di bawah stack vertikal

Hasilnya adalah struktur seperti form dengan elemen tambahan di bawah - pola umum dalam desain web!

Tabel Metode Stack

Berikut adalah tabel praktis yang menggabungkan kelas dan metode kunci yang kita diskusikan:

Kelas/Metode	Deskripsi	Contoh
.vstack	Membuat stack vertikal	<div class="vstack">
.hstack	Membuat stack horizontal	<div class="hstack">
gap-{size}	Menambahkan ruang antara item stack	<div class="vstack gap-3">
ms-auto	Mendorong item ke kanan dalam hstack	<div class="ms-auto">
.vr	Membuat garis vertikal (pembatas) dalam hstack	<div class="vr"></div>

Kesimpulan

Dan itu dia, teman-teman! Kita telah berpergian melalui negeri Bootstrap Stacks, dari susunan vertikal sederhana hingga kombinasi kompleks horizontal dan vertikal. Ingat, desain web seperti membangun dengan Lego - mulai dengan pieces sederhana ini, dan segera Anda akan menciptakan struktur yang menakjubkan!

Latih dengan contoh ini, coba kombinasi yang berbeda, dan jangan takut membuat kesalahan. Itu adalah bagaimana kita semua belajar dan tumbuh sebagai pengembang. Sebelum Anda tahu, Anda akan mengerahkan elemen seperti seorang ahli!

Selamat coding, dan semoga stack Anda selalu rapi! ?

Credits: Image by storyset