Bootstrap - Vertical Align: Panduan Lengkap untuk Pemula
Hai teman-teman pemula pengembang web! Saya sangat gembira menjadi panduanmu dalam perjalanan menarik ini ke dunia Bootstrap dan perataan vertikal. Sebagai orang yang telah mengajar ilmu komputer selama tahun tahun, saya bisa katakan bahwa memahami perataan vertikal seperti belajar menunggang sepeda - mungkin terlihat sulit pada awalnya, tapi sekali Anda menguasainya, Anda akan berjalan lurus dalam waktu singkat!
Mengerti Perataan Vertikal di Bootstrap
Sebelum kita masuk ke detil, mari kitaambil sedikit waktu untuk memahami apa itu perataan vertikal. Bayangkan Anda menata buku di rak. Kadang-kadang Anda ingin mereka semua diatur rapi di bagian bawah, kadang-kadang Anda mungkin ingin mereka diatur di tengah, atau bahkan di bagian atas. Itu sebenarnya apa yang kita lakukan dengan elemen di halaman web, tetapi bukan buku, kita berurusan dengan teks, gambar, dan konten lainnya.
Mengapa Perataan Vertikal Penting
Anda mungkin bertanya-tanya, " Mengapa harus peduli tentang perataan vertikal?" Well, mari saya ceritakan sedikit kisah. Pernah saya punya murid yang membuat website yang cantik, tapi semua kontennya tertumpuk di bagian atas setiap seksi. Itu terlihat seperti halaman web memakai celana terlalu tinggi! Perataan vertikal yang benar bisa membuat perbedaan antara situs yang terlihat profesional dan yang terlihat sedikit... aneh.
Kelas Perataan Vertikal Bootstrap
Bootstrap, teman tetangga CSS framework yang ramah, datang dengan set kelas yang membuat perataan vertikal mudah. Mari kita lihat kelas-kelas ini dan bagaimana menggunakannya.
Kelas Align Items
Bootstrap menyediakan kelas untuk mengatur item dalam kontainer flex. Berikut adalah tabel kelas-kelas ini dan efeknya:
| Kelas | Efek |
|---|---|
| .align-items-start | Mengatur item ke awal kontainer |
| .align-items-center | Mengatur item di tengah vertikal kontainer |
| .align-items-end | Mengatur item ke akhir kontainer |
| .align-items-baseline | Mengatur item ke garis dasar kontainer |
| .align-items-stretch | Memperpanjang item untuk mengisi kontainer (default) |
Mari kita lihat ini dalam tindakan dengan beberapa contoh kode:
<div class="d-flex align-items-start" style="height: 200px;">
<div>Start</div>
<div>Aligned</div>
<div>Content</div>
</div>Dalam contoh ini, kita menggunakan d-flex untuk membuat kontainer flex, dan align-items-start untuk mengatur item ke atas kontainer. style="height: 200px;" hanya untuk memberikan tinggi ke kontainer agar kita bisa melihat perataan dalam tindakan.
Sekarang, mari kita coba mengatur konten kita di tengah:
<div class="d-flex align-items-center" style="height: 200px;">
<div>Centered</div>
<div>Vertically</div>
<div>Aligned</div>
</div>Lihat betapa mudah itu? Kita hanya mengganti start menjadi center, dan sekarang konten kita diatur tepat di tengah vertikal.
Kelas Align Self
kadang-kadang, Anda mungkin ingin mengatur item secara berbeda dalam kontainer. Itu di mana kelas align-self berguna. Berikut adalah tabel kelas-kelas ini:
| Kelas | Efek |
|---|---|
| .align-self-start | Mengatur item ke awal kontainer |
| .align-self-center | Mengatur item di tengah vertikal kontainer |
| .align-self-end | Mengatur item ke akhir kontainer |
| .align-self-baseline | Mengatur item ke garis dasar kontainer |
| .align-self-stretch | Memperpanjang item untuk mengisi kontainer (default) |
Mari kita lihat contohnya:
<div class="d-flex" style="height: 200px;">
<div class="align-self-start">Start</div>
<div class="align-self-center">Center</div>
<div class="align-self-end">End</div>
</div>Dalam contoh ini, setiap div diatur berbeda dalam kontainer yang sama. Itu seperti memiliki tiga buku di rak, setiap buku duduk di tingkat yang berbeda!
Perataan Vertikal dengan Utilitas Flexbox
Utilitas flexbox Bootstrap menyediakan kontrol lebih lanjut atas perataan vertikal. Mari kita jelajahi beberapa dari ini.
Kelas Justify Content
Kelas ini memungkinkan Anda mengatur item sepanjang sumbu utama kontainer flex. Berikut adalah tabel kelas-kelas ini:
| Kelas | Efek |
|---|---|
| .justify-content-start | Mengatur item ke awal kontainer |
| .justify-content-center | Mengatur item di tengah secara horizontal di kontainer |
| .justify-content-end | Mengatur item ke akhir kontainer |
| .justify-content-between | Mengatur item secara merata dengan ruang antara |
| .justify-content-around | Mengatur item secara merata dengan ruang di sekitar |
Mari kita lihat contohnya:
<div class="d-flex justify-content-center" style="height: 200px;">
<div>Centered</div>
<div>Horizontally</div>
</div>Ini akan mengatur konten kita di tengah secara horizontal dalam kontainer.
Mengkombinasikan Perataan Vertikal dan Horizontal
Sekarang, mari kita lihat dimana magik terjadi. Kita bisa mengkombinasikan kelas-kelas ini untuk mencapai perataan sempurna baik vertikal maupun horizontal. Lihat ini:
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
<div>Perfectly</div>
<div>Centered</div>
</div>Kode ini akan membuat kontainer tempat konten diatur tepat di tengah vertikal dan horizontal. Itu seperti menembak bullseye di dart, tapi jauh lebih mudah untuk dicapai!
Perataan Responsif
Bootstrap tidak akan menjadi Bootstrap tanpa responsif. Anda bisa membuat perataan Anda responsif dengan menambahkan singkatan breakpoint ke kelas. Misalnya:
<div class="d-flex align-items-start align-items-sm-center align-items-md-end" style="height: 200px;">
<div>Responsive</div>
<div>Alignment</div>
</div>Ini akan mengatur konten ke atas di perangkat ekstra kecil, menengah di perangkat kecil, dan ke bawah di perangkat medium dan keatas. Itu seperti konten Anda melakukan yoga, melengkung dan memanjang untuk menyesuaikan ukuran layar berbeda!
Kesimpulan
Dan itu adalah, teman-teman! Kita telah melakukan perjalanan melalui negeri perataan vertikal Bootstrap, dari konsep dasar hingga teknik tingkat lanjut. Ingat, latihan membuat sempurna. Jangan takut untuk mencoba kelas-kelas ini dan lihat bagaimana mereka mempengaruhi tata letak Anda.
Saat kitaakhiri, saya teringat tentang murid lain yang pernah katakan kepada saya bahwa belajar Bootstrap seperti belajar bahasa baru. Pada awalnya, itu terlihat menakutkan, tapi setelah dia menguasainya, dia merasa bisa menyampaikan ide desainnya lebih efektif daripada sebelumnya.
Jadi, pergilah, para padawan muda, dan biar kekuatan perataan sempurna menyertainya! Selamat coding!
Credits: Image by storyset