Bootstrap - Placeholder: Panduan untuk Pemula

Halo teman-teman pengembang web yang sedang belajar! Hari ini, kita akan mendalami dunia yang menarik dari Bootstrap placeholders. Sebagai guru komputer tetangga yang ramah, saya akan memandu Anda langkah demi langkah dalam topik ini, sehingga Anda mengerti setiap hal di dalamnya. Jadi, ambil minumannya yang favorit, duduk santai, dan mari kita mulai perjalanan yang menarik ini bersama!

Cara Kerjanya

Bayangkan Anda sedang membangun sebuah rumah. Sebelum Anda memasang furniture yang sebenarnya, Anda mungkin akan menggunakan kotak karton untuk mewakili tempat dimana barang-barang akan ditempatkan. Itu tepat apa yang placeholders lakukan dalam desain web! Mereka adalah pengganti sementara untuk konten yang sedang dimuat atau belum tersedia.

Bootstrap placeholders adalah fitur yang praktis dan membantu menciptakan pengalaman pengguna yang mulus dan menarik. Mereka memberikan petunjuk visual kepada pengguna bahwa konten sedang datang, daripada membuat mereka menunggu di halaman kosong.

Membuat Placeholders

mari kita mulai dengan dasar-dasar. Membuat placeholder di Bootstrap adalah hal yang mudah! Ini adalah contoh sederhana:

<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>

Kode ini membuat placeholder dengan lebar penuh yang membentang di keseluruhan halaman. Kelas placeholder-glow menambahkan animasi subtil, membuatnya jelas bahwa ada sesuatu yang terjadi di belakang layar.

Lebar Placeholder

Seperti halnya Anda tidak akan menggunakan kasur besar untuk mewakili meja kopi kecil dalam analogi membangun rumah, Anda dapat menyesuaikan lebar placeholders Anda untuk mencocokkan konten yang mereka wakili. Bootstrap menggunakan sistem grid 12 kolom, jadi Anda dapat mudah menetapkan lebar placeholders Anda.

Ini adalah contoh:

<p class="placeholder-glow">
<span class="placeholder col-6"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-4"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-8"></span>
</p>

Dalam kode ini, kita membuat tiga placeholders dengan lebar yang berbeda. Yang pertama mengambil setengah lebar (6 kolom), yang kedua mengambil seperempat (4 kolom), dan yang ketiga mengambil dua seperempat (8 kolom).

Warna Placeholder

Sekarang, mari kita menambahkan warna ke placeholders kita! Seperti halnya Anda mungkin menggunakan kotak berwarna yang berbeda untuk mewakili jenis furniture yang berbeda, kita juga dapat menggunakan warna yang berbeda untuk placeholders kita.

Ini adalah cara Anda dapat melakukannya:

<p class="placeholder-glow">
<span class="placeholder col-12 bg-primary"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-12 bg-secondary"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-12 bg-success"></span>
</p>

Dalam contoh ini, kita membuat tiga placeholders lebar penuh dengan warna yang berbeda. Kelas bg-primary, bg-secondary, dan bg-success memberikan kita placeholders berwarna biru, abu-abu, dan hijau masing-masing.

Ukuran Placeholder

Seperti halnya furniture ada dalam ukuran yang berbeda, placeholders kita juga bisa! Bootstrap memungkinkan kita untuk mudah mengatur ukuran placeholders kita menggunakan kelas yang sudah ditentukan.

Periksa kode ini:

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

Di sini, kita membuat empat placeholders dengan ukuran yang berbeda. Kelas placeholder-lg membuat placeholder besar, sedangkan placeholder-sm dan placeholder-xs membuat placeholders yang lebih kecil. Yang tanpa kelas ukuran adalah ukuran default.

Animasi Placeholder

Terakhir namun tidak kurang penting, mari kita menambahkan animasi ke placeholders kita! Ini seperti menambahkan tanda "Coming Soon" ke furniture karton kita - itu memberitahu pengguna bahwa ada sesuatu yang sedang terjadi.

Ini adalah cara Anda dapat menganimasikan placeholders Anda:

<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>

Dalam contoh ini, kita menggunakan dua gaya animasi yang berbeda. Kelas placeholder-glow membuat efek pulsa subtil, sedangkan placeholder-wave membuat animasi gelombang dari kiri ke kanan.

Menggabungkan Semua

Sekarang kita telah belajar tentang semua fitur placeholders yang menarik ini, mari kita gabungkan mereka dalam satu contoh super:

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top placeholder-glow" alt="...">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>

Kode ini membuat kartu dengan placeholders untuk gambar, judul, teks, dan tombol. Itu seperti kita sedang menyiapkan pameran di toko furniture karton kita!

Kesimpulan

Dan begitu, teman-teman! Anda telah belajar bagaimana menggunakan placeholders Bootstrap seperti seorang ahli. Ingat, placeholders adalah seperti pembukaan konser - mereka menyiapkan panggung dan membangun kesenangan untuk acara utama (konten sebenarnya).

Sekarang Anda terus melanjutkan perjalanan pengembangan web Anda, Anda akan menemukan banyak cara kreatif untuk menggunakan placeholders. Mereka tidak hanya fungsional; mereka juga dapat menjadi cara menyenangkan untuk menambahkan personalitas ke layar muat.

Tetap latih, tetap eksperimen, dan terutama, tetap bersenang-senang dengannya. Sebelum Anda tahu, Anda akan membuat situs web yang terlihat bagus bahkan sebelum mereka selesai dimuat!

Metode	Deskripsi
Membuat Placeholders	Gunakan <span class="placeholder"></span> dalam <p class="placeholder-glow"> atau <p class="placeholder-wave">
Menetapkan Lebar	Gunakan kelas kolom Bootstrap, misalnya col-6 untuk setengah lebar
Mengubah Warna	Terapkan kelas warna latar belakang seperti bg-primary, bg-secondary, dll.
Mengatur Ukuran	Gunakan kelas placeholder-lg, placeholder-sm, atau placeholder-xs
Menambahkan Animasi	Letakkan placeholders di dalam <p class="placeholder-glow"> atau <p class="placeholder-wave">

Happy coding, dan may placeholders Anda selalu ditempatkan dengan baik!

Credits: Image by storyset