Bootstrap - Demi Masonry
Pendahuluan Mengenai Bootstrap Masonry
Hai, para pengembang web yang sedang belajar! Hari ini, kita akan mendalaminya dunia yang menarik Bootstrap Masonry. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk mengantar Anda dalam perjalanan ini. Meskipun Anda belum pernah menulis satu baris kode sebelumnya, jangan khawatir – kita akan mengambil langkah demi langkah, dan segera Anda akan menciptakan tata letak yang indah dan dinamis seperti seorang ahli!
Apa Itu Bootstrap Masonry?
Bootstrap Masonry adalah teknik tata letak yang kuat yang memungkinkan Anda menciptakan kisi elemen dengan tinggi yang berbeda. Bayangkan dinding yang terdiri dari batu bata berukuran berbeda yang cocok secara sempurna – itu esensi Masonry! Ini sangat berguna untuk menciptakan galeri gambar, portfolio, atau konten lain dimana Anda ingin tampil rapi dan teratur tanpa membuang ruang.
Memulai dengan Bootstrap Masonry
Menyiapkan Proyek Anda
Sebelum kita masuk ke kode, mari kita siapkan proyek kita. Kita akan perlu menyertakan Bootstrap dan pustaka Masonry dalam file HTML kita. Jangan khawatir jika ini terlihat membingungkan pertama kali – saya akan menjelaskan setiap bagian secara mendetail saat kita melanjutkan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Masonry Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Konten kita akan berada di sini -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js"></script>
</body>
</html>Mari kitauraikan ini:
- Kita mulai dengan struktur HTML dasar.
- Dalam
<head>, kita menambahkan tautan ke file CSS Bootstrap. - Di bagian bawah
<body>, kita menyertakan file JavaScript Bootstrap dan Masonry.
Files ini memberikan kita alat yang diperlukan untuk menciptakan tata letak Masonry.
Membuat Tata Letak Masonry Pertama Anda
Sekarang, mari kita buat tata letak Masonry sederhana dengan beberapa kotak berwarna. Kita akan menambahkan kode ini di dalam tag <body>:
<div class="container my-5">
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-primary text-white">
<div class="card-body">
<h5 class="card-title">Kotak 1</h5>
<p class="card-text">Ini adalah kotak pendek.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-success text-white">
<div class="card-body">
<h5 class="card-title">Kotak 2</h5>
<p class="card-text">Kotak ini sedikit tinggi. Masonry akan menyesuaikan!</p>
<p class="card-text">Lihat bagaimana itu cocok.</p>
</div>
</div>
</div>
<!-- Tambahkan lebih banyak kotak di sini -->
</div>
</div>Mari kitauraikan ini:
- Kita menciptakan wadah dengan baris di dalamnya.
- Atribut
data-masonry='{"percentPosition": true }'mengatakan ke Bootstrap untuk menggunakan tata letak Masonry untuk baris ini. - Setiap kotak adalah kolom (
col-sm-6 col-lg-4) dengan kartu di dalamnya. - Kita menggunakan warna latar belakang yang berbeda (
bg-primary,bg-success) untuk membuat kotak kita secara visual berbeda.
Menyesuaikan Tata Letak Masonry Anda
Sekarang kita memiliki tata letak dasar, mari kita jelajahi beberapa cara untuk menyesuaikannya.
Menambahkan Elemen Dengan Ukuran Berbeda
Salah satu keindahan Masonry adalah bagaimana ia menangani elemen dengan ukuran berbeda. Mari kita tambahkan beberapa kotak dengan konten yang berbeda:
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-warning">
<div class="card-body">
<h5 class="card-title">Kotak 3</h5>
<p class="card-text">Ini adalah kotak yang sangat tinggi!</p>
<p class="card-text">Itu memiliki banyak konten.</p>
<p class="card-text">Masonry akan memastikan itu cocok sempurna.</p>
<p class="card-text">Tidak peduli seberapa tinggi itu menjadi.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title">Kotak 4</h5>
<p class="card-text">Kembali ke kotak pendek.</p>
</div>
</div>
</div>Menambahkan Gambar ke Tata Letak Masonry
Masonry sangat cocok untuk galeri gambar. Mari kita tambahkan beberapa gambar ke tata letak kita:
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Gambar acak">
<div class="card-body">
<h5 class="card-title">Kartu Gambar</h5>
<p class="card-text">Kartu ini memiliki gambar.</p>
</div>
</div>
</div>Kode ini menambahkan kartu dengan gambar acak dari Lorem Picsum. Gambar akan dimuat dalam ukuran 300x200 piksel, tetapi Anda dapat menyesuaikan angka-angka ini untuk mendapatkan gambar berukuran berbeda.
Teknik Tingkat Lanjut
Menyaring Item Masonry
Salah satu fitur menarik yang kita dapat tambahkan adalah kemampuan menyaring item Masonry. Mari kita tambahkan beberapa tombol filter dan beri kategori pada item kita:
<div class="container my-5">
<div class="mb-3">
<button class="btn btn-primary filter-btn" data-filter="all">Semua</button>
<button class="btn btn-secondary filter-btn" data-filter="category1">Kategori 1</button>
<button class="btn btn-secondary filter-btn" data-filter="category2">Kategori 2</button>
</div>
<div class="row" id="masonry-grid" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category1">
<!-- Konten item -->
</div>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category2">
<!-- Konten item -->
</div>
<!-- Item lainnya... -->
</div>
</div>Untuk membuat ini bekerja, kita perlu menambahkan beberapa JavaScript:
<script>
document.addEventListener('DOMContentLoaded', function() {
var grid = document.querySelector('#masonry-grid');
var msnry = new Masonry(grid, {
percentPosition: true
});
var filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(function(button) {
button.addEventListener('click', function() {
var filterValue = this.getAttribute('data-filter');
var items = grid.querySelectorAll('.masonry-item');
items.forEach(function(item) {
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
msnry.layout();
});
});
});
</script>Skrip ini melakukan hal berikut:
- Inisialisasi Masonry pada grid kita.
- Menambahkan pendengar klik ke tombol filter.
- Saat tombol diklik, ia menampilkan/menyembunyikan item berdasarkan kategori.
- Setelah penyaringan, ia memanggil
msnry.layout()untuk mengatur ulang item yang terlihat.
Kesimpulan
Selamat! Anda telah menciptakan tata letak Masonry pertama Anda. Dari kisi dasar hingga penyaringan tingkat lanjut, Anda sekarang memiliki alat untuk menciptakan tata letak yang dinamis dan responsif yang akan membuat halaman web Anda menonjol.
Ingat, kunci untuk menjadi ahli dalam pengembangan web adalah latihan. Cobalah untuk menerobos dengan konten yang berbeda, tata letak, dan fitur. Jangan khawatir untuk memecahkan hal-hal – itu sering kali bagaimana kita belajar les les terbaik dalam pemrograman.
Terus bangun, terus belajar, dan terutama, bersenang-senang dengan itu! Sebelum Anda sadari, Anda akan menciptakan tata letak web yang akan membuat bahkan tukang batu paling terampil iri. Selamat coding!
Credits: Image by storyset