Bootstrap - sempadan: Panduan Lengkap untuk Pemula
Hai sana, para pengembang web masa depan! Hari ini, kita akan melihat dunia yang menakjubkan Bootstrap sempadan. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari dasar dan naik tingkat perlahan-lahan. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda suka), dan mari kita mulai!
Mengerti Sempadan Bootstrap
Sebelum kita masuk ke hal yang khusus, mari bicarakan apa itu sempadan dalam desain web. Bayangkan Anda membuat buku potong. Sempadan dalam desain web seperti tepi dekoratif yang Anda mungkin tambahkan di sekitar foto atau bagian di buku potong Anda. Mereka membantu menentukan area, membuat elemen tampak menonjol, dan menambahkan daya tarik visual ke halaman web Anda.
Sekarang, mari kita jelajahi bagaimana Bootstrap, kerangka kerja CSS yang populer, membuat kerja dengan sempadan menjadi mudah!
Menambah Sempadan
Menambah sempadan di Bootstrap adalah sama mudahnya menambah kelas ke elemen HTML Anda. Mari kita mulai dengan contoh dasar:
<div class="border p-3">
Div ini memiliki sempadan di sekitar!
</div>Dalam contoh ini, kita menambah kelas border ke elemen <div>. Kelas p-3 menambahkan sedikit padding di dalam div untuk penampilan yang lebih baik. Ketika Anda melihat ini di browser, Anda akan melihat sempadan yang rapi di sekitar teks Anda.
Tapi apa bila Anda hanya ingin sempadan di sisi tertentu? Bootstrap juga menangani ini:
<div class="border-top p-3">Sempadan atas</div>
<div class="border-end p-3">Sempadan kanan</div>
<div class="border-bottom p-3">Sempadan bawah</div>
<div class="border-start p-3">Sempadan kiri</div>Setiap kelas ini (border-top, border-end, border-bottom, border-start) menambahkan sempadan ke sisi yang ditentukan elemen.
Menghapus Sempadan
Sekarang, mari kita katakan Anda menambahkan sempadan ke elemen, tapi Anda ingin menghapusnya dari satu sisi. Bootstrap membuat ini mudah juga:
<div class="border border-top-0 p-3">
Div ini memiliki sempadan di semua sisi kecuali atas!
</div>Kelas border-top-0 menghapus sempadan atas. Secara tương tự, Anda dapat menggunakan border-end-0, border-bottom-0, dan border-start-0 untuk menghapus sempadan dari sisi lain.
Warna Sempadan
Desain web tidak hanya tentang struktur; itu juga tentang gaya! Bootstrap memungkinkan Anda mudah mengubah warna sempadan Anda:
<div class="border border-primary p-3">Sempadan utama</div>
<div class="border border-secondary p-3">Sempadan sekunder</div>
<div class="border border-success p-3">Sempadan sukses</div>
<div class="border border-danger p-3">Sempadan bahaya</div>
<div class="border border-warning p-3">Sempadan peringatan</div>
<div class="border border-info p-3">Sempadan info</div>
<div class="border border-light p-3">Sempadan terang</div>
<div class="border border-dark p-3">Sempadan gelap</div>Kelas warna ini sesuai dengan tema warna Bootstrap, membuatnya mudah untuk menjaga keserasian penampilan di seluruh website Anda.
Opasitas Sempadan
kadang-kadang, Anda mungkin ingin sempadan yang sedikit... tentu saja, kurang opas. Bootstrap 5 memperkenalkan kelas opasitas sempadan:
<div class="border border-primary border-opacity-75 p-3">75% opasitas</div>
<div class="border border-primary border-opacity-50 p-3">50% opasitas</div>
<div class="border border-primary border-opacity-25 p-3">25% opasitas</div>Kelas border-opacity-* memungkinkan Anda mengatur opasitas sempadan ke 75%, 50%, atau 25%.
Lebar Sempadan
kadang-kadang Anda butuh sempadan yang benar-benar menonjol. Pada saat lain, Anda ingin sesuatu yang lebih halus. Bootstrap memungkinkan Anda mengendalikan lebar sempadan Anda:
<div class="border border-1 p-3">Lebar sempadan 1</div>
<div class="border border-2 p-3">Lebar sempadan 2</div>
<div class="border border-3 p-3">Lebar sempadan 3</div>
<div class="border border-4 p-3">Lebar sempadan 4</div>
<div class="border border-5 p-3">Lebar sempadan 5</div>Kelas border-* (di mana * adalah nomor dari 1 hingga 5) memungkinkan Anda mengatur lebar sempadan yang berbeda.
Radius Sempadan
Ingat saat kita membicarakan buku potong? Kadang-kadang Anda mungkin ingin melengkungkan sudut foto Anda. Dalam desain web, kita menyebut ini radius sempadan:
<div class="border rounded p-3">Sempadan melengkung</div>
<div class="border rounded-top p-3">Sudut atas melengkung</div>
<div class="border rounded-end p-3">Sudut kanan melengkung</div>
<div class="border rounded-bottom p-3">Sudut bawah melengkung</div>
<div class="border rounded-start p-3">Sudut kiri melengkung</div>
<div class="border rounded-circle p-3">Sempadan bulat</div>
<div class="border rounded-pill p-3">Sempadan berbentuk pil</div>Kelas ini memberikan Anda kontrol halus atas sudut mana yang dilengkungkan dan bagaimana mereka dilengkungkan.
Ukuran Sempadan
Terakhir namun bukan kurang penting, mari bicarakan ukuran sempadan. Bootstrap menyediakan kelas untuk mengatur ukuran sempadan secara cepat:
| Kelas | Deskripsi |
|---|---|
border-sm |
Sempadan kecil |
border |
Sempadan default |
border-lg |
Sempadan besar |
Berikut adalah contoh penggunaannya:
<div class="border border-sm p-3">Sempadan kecil</div>
<div class="border p-3">Sempadan default</div>
<div class="border border-lg p-3">Sempadan besar</div>Dan itu adalah! Anda sekarang dilengkapi dengan pengetahuan untuk menambah, menghapus, mengubah warna, gaya, dan ukuran sempadan di Bootstrap. Ingat, desain web adalah tentang eksperimen. Jangan khawatir untuk mencampur dan mencoba kelas ini untuk membuat desain yang unik dan menarik visual.
Saat kita selesai, saya teringat tentang seorang murid yang pernah saya punya yang sangat takut dengan CSS. Pada akhir pelajaran sempadan Bootstrap, dia menciptakan desain yang membuat pengembang web profesional iri. Jadi ingat, semua orang mulai dari mana-mana, dan dengan latihan, Anda akan menjadi ahli sempadan dalam waktu singkat!
Terus coding, terus belajar, dan terutama, bersenang-senang dengannya!
Credits: Image by storyset