Indonesia

Tutorial Bootstrap

Tata Letak Bootstrap

Konten Bootstrap

Komponen Bootstrap

Bootstrap Formulir

Pembantu Bootstrap

Utilitas Bootstrap

Demos Bootstrap

Bootstrap - Demo Masonry

Pengenalan ke Bootstrap Masonry

Halo, para pengembang web yang sedang belajar! Hari ini, kita akan melompat ke dunia yang menarik dari Bootstrap Masonry. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Meskipun Anda belum pernah menulis 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!

Bootstrap-Masonry Demo

Apa itu Bootstrap Masonry?

Bootstrap Masonry adalah teknik tata letak yang kuat yang memungkinkan Anda menciptakan kisi elemen dengan tinggi yang berbeda. Bayangkan sebuah tembok dari batu bata berukuran berbeda yang cocok secara sempurna – itu adalah essensi 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 memasukkan Bootstrap dan pustaka Masonry ke dalam file HTML kita. Jangan khawatir jika ini terlihat membingungkan pada awalnya – saya akan menjelaskan setiap bagian saat kita maju.

<!DOCTYPE html>
<html lang="id">
<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:

  1. Kita mulai dengan struktur HTML dasar.
  2. Dalam <head>, kita menautkan file CSS Bootstrap.
  3. Di bagian bawah <body>, kita memasukkan file JavaScript Bootstrap dan Masonry.

File-file 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 agak tinggi. Masonry akan menyesuaikan!</p>
<p class="card-text">Lihat betapa rapihnya itu cocok.</p>
</div>
</div>
</div>
<!-- Tambahkan lebih banyak kotak di sini -->
</div>
</div>

Mari kitauraikan ini:

  1. Kita menciptakan sebuah wadah dengan baris di dalamnya.
  2. Atribut data-masonry='{"percentPosition": true }' mengatakan ke Bootstrap untuk menggunakan tata letak Masonry untuk baris ini.
  3. Setiap kotak adalah kolom (col-sm-6 col-lg-4) dengan kartu di dalamnya.
  4. Kita menggunakan warna latar belakang yang berbeda (bg-primary, bg-success) untuk membuat kotak kita tampak berbeda secara visual.

Menyesuaikan Tata Letak Masonry Anda

Sekarang kita memiliki tata letak dasar, mari kita eksplor beberapa cara untuk menyesuaikannya.

Menambahkan Elemen Dengan Ukuran Berbeda

Salah satu keindahan Masonry adalah bagaimana ia menangani elemen berukuran 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 secara sempurna.</p>
<p class="card-text">Tak matter 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 mengatur 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 kategori dan berikan item kita kategori:

<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="kategori1">Kategori 1</button>
<button class="btn btn-secondary filter-btn" data-filter="kategori2">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="kategori1">
<!-- Konten item -->
</div>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="kategori2">
<!-- Konten item -->
</div>
<!-- Item lain... -->
</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:

  1. Inisialisasi Masonry pada grid kita.
  2. Menambahkan event listener klik ke tombol penyaringan.
  3. Saat tombol diklik, itu menampilkan/sembunyikan item berdasarkan kategorinya.
  4. Setelah penyaringan, ia memanggil msnry.layout() untuk menata ulang item yang terlihat.

Kesimpulan

Selamat! Anda baru saja 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 tampak menonjol.

Ingat, kunci untuk menjadi ahli pengembang web adalah latihan. Cobalah untuk meng eksperimen dengan konten, tata letak, dan fitur lainnya. Jangan takut untuk merusak hal-hal – itu seringkali bagaimana kita belajar les les terbaik dalam coding.

Terus bangun, terus belajar, dan terutama, bersenang-senang dengan itu! Sebelum Anda menyadari, Anda akan menciptakan tata letak web yang akan membuat bahkan tukang batu paling ahli merasa iri. Selamat coding!

Metode Deskripsi
Masonry(element[, options]) Inisialisasi Masonry pada elemen
msnry.layout() Trigger layout setelah membuat perubahan
msnry.appended(elements) Tambahkan dan susun elemen item baru
msnry.prepended(elements) Tambahkan dan susun elemen item baru di awal
msnry.destroy() Hapus sepenuhnya fungsionalitas Masonry

Credits: Image by storyset

Tutorial Sebelumnya:
Bootstrap Demo Footer Sticky Navbar
Tutorial Selanjutnya:
Demo Template awal Bootstrap