Bootstrap - Susunan: Panduan Lengkap untuk Pemula

Pengenalan

Hai sana, calon pengembang web! Hari ini, kita akan masuk ke dunia yang menakjubkan Bootstrap susunan. Sebagai guru komputer yang ramah di lingkungan sekitar Anda dengan tahun-tahun pengalaman, saya sangat gembira untuk mengantar Anda dalam perjalanan ini. Jangan khawatir jika Anda baru dalam pemrograman – kita akan mulai dari dasar dan naik tingkat demi tingkat. Pada akhir panduan ini, Anda akan dapat mengaplikasikan elemen seperti seorang ahli!

Apa Itu Susunan?

Sebelum kita melompat ke implementasi Bootstrap, mari kita mengerti apa itu susunan dalam desain web. Bayangkan Anda menata furnitur di dalam sebuah kamar. Kadang-kadang, Anda ingin meja kecil duduk rapat di sebelah tembok, dengan teks atau elemen lain mengalir di sekitarnya. Itu sebenarnya apa yang dilakukan susunan dalam desain web – itu memungkinkan elemen untuk ditempatkan ke kiri atau kanan dari wadahnya, dengan konten lain mengalir di sekitarnya.

Kelas Susunan Bootstrap

Bootstrap, kerangka front-end yang dapat dipercaya, membuat bekerja dengan susunan sangat mudah. Ini menyediakan kita kelas yang sederhana yang dapat diterapkan ke elemen HTML kita. Mari kita lihat kelas susunan utama:

Kelas	Deskripsi
.float-left	Menembahkan elemen ke kiri
.float-right	Menembahkan elemen ke kanan
.float-none	Menghapus susunan ( berguna untuk desain responsif)

Penggunaan Dasar

Mari kita mulai dengan contoh sederhana:

<div class="container">
<img src="cute-puppy.jpg" class="float-left" alt="Anak anjing yang lucu">
<pIni adalah beberapa teks yang akan mengelilingi gambar. Apakah anak anjing itu lucu?</p>
</div>

Dalam contoh ini, gambar akan ditembahkan ke kiri, dan teks paragraf akan mengelilinginya. Itu seperti gambar mengatakan, "Maaf, saya hanya akan geser ke sini ke kiri, dan Anda dapat mengalir di sekitar saya!"

Membersihkan Susunan

kadang-kadang, kita perlu mencegah elemen dari menembahkan di sekitar elemen yang ditembahkan. Itu di mana penghapusannya masuk. Bootstrap menyediakan kelas .clearfix untuk tujuan ini:

<div class="clearfix">
<img src="cute-kitten.jpg" class="float-right" alt="Anak kucing yang lucu">
<p>Teks ini tidak akan mengelilingi gambar.</p>
</div>

Kelas .clearfix memastikan bahwa wadah diperluas untuk mengenungi elemen yang ditembahkan. Itu seperti mengatakan ke wadah, "Hey, jangan lupa anak-anak ditembahkanmu!"

Susunan Responsif

Sekarang, mari kita lihat di mana Bootstrap benar-benar berkilau – desain responsif! Bootstrap memungkinkan kita untuk mengaplikasikan susunan berbeda berdasarkan ukuran layar. Mari kita lihat kelas susunan responsif:

Kelas	Deskripsi
.float-sm-left	Menembahkan ke kiri pada layar kecil dan ke atas
.float-md-right	Menembahkan ke kanan pada layar medium dan ke atas
.float-lg-none	Menghapus susunan pada layar besar dan ke atas
.float-xl-left	Menembahkan ke kiri pada layar ekstra besar

Ini contohnya:

<div class="container">
<div class="float-sm-left float-md-right float-lg-none">
<p>Saya fleksibel! Saya akan menembahkan ke kiri pada layar kecil, ke kanan pada layar medium, dan tidak menembahkan sama sekali pada layar besar.</p>
</div>
</div>

Elemen ini seperti kameleon, menyesuaikan perilakunya ke berbagai ukuran layar. Itu sempurna untuk menciptakan tata letak responsif yang terlihat bagus pada semua macam perangkat, dari smartphone ke monitor desktop.

Contoh Praktis: Membuat Tata Letak Sederhana

Marilah kita gunakan pengetahuan baru kita dengan contoh yang lebih kompleks:

<div class="container">
<header class="clearfix">
<h1 class="float-left">Website Saya yang Menakjubkan</h1>
<nav class="float-right">
<a href="#">Beranda</a>
<a href="#">Tentang</a>
<a href="#">Kontak</a>
</nav>
</header>
<main>
<article class="float-left" style="width: 70%;">
<h2>Konten Utama</h2>
<p>Ini adalah tempat konten utama Anda akan pergi. Itu bagus dan lebar!</p>
</article>
<aside class="float-right" style="width: 25%;">
<h3>Sidebar</h3>
<p>Ini bisa digunakan untuk tautan terkait atau informasi tambahan.</p>
</aside>
</main>
<footer class="clearfix">
<p>&copy; 2023 Website Saya yang Menakjubkan</p>
</footer>
</div>

Dalam contoh ini, kita telah menciptakan tata letak halaman web sederhana:

1. Header memiliki judul yang ditembahkan ke kiri dan navigasi yang ditembahkan ke kanan.
2. Konten utama dipisahkan menjadi artikel yang lebar dan ditembahkan ke kiri dan sidebar yang sempit dan ditembahkan ke kanan.
3. Kita menggunakan .clearfix pada header dan footer untuk memastikan mereka mengenungi anak-anak yang ditembahkan.

Kesimpulan

Dan begitu saja, teman-teman! Kita telah menembahkan melalui dasar Bootstrap susunan, dari susunan sederhana ke kelas susunan responsif. Ingat, susunan hanya satu alat dalam kotak alat desain web Anda. Sepanjang Anda terus melanjutkan perjalanan Anda, Anda akan menemukan banyak teknik tata letak lain, seperti Flexbox dan Grid.

Latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini. Cobalah menciptakan tata letak yang berbeda, dan lihat bagaimana susunan dapat membantu Anda mencapai tujuan desain Anda. Dan ingat, di dunia pengembangan web, ada selalu sesuatu yang baru untuk belajar. Jadi teruslah "menembahkan" di sungai pengetahuan, dan Anda akan jauh!

Hati-hati pemrograman, dan semoga elemen Anda selalu menembahkan ke tempat yang Anda inginkan!

Credits: Image by storyset