Bootstrap - Sidebar Demo
Hai, para pengembang web yang sedang belajar! Hari ini, kita akan mengemban perjalanan yang menarik ke dunia sidebar Bootstrap. Sebagai guru ilmu komputer tetangga yang ramah, saya sangat senang untuk menghidahkan Anda dalam topik ini. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita masuk ke dalam!
Apa itu sidebar?
Sebelum kita mulai mengoding, mari kita pahami apa sebenarnya sidebar itu. Bayangkan Anda membaca buku, dan ada kolom sempit di samping halaman dengan informasi tambahan atau tautan cepat. Itu sebenarnya apa yang dinamakan sidebar dalam desain web!
Sidebar adalah kolom vertikal yang biasanya ditempatkan di sebelah kiri atau kanan halaman web. Biasanya mengandung tautan navigasi, informasi tambahan, atau konten lain yang mendukung area konten utama. Sidebar membantu mengatur informasi dan meningkatkan pengalaman pengguna dengan menyediakan akses cepat ke elemen penting.
Membuat Sidebar Dasar dengan Bootstrap
Sekarang kita tahu apa itu sidebar, mari kita buat satu menggunakan Bootstrap. Kita akan mulai dengan contoh sederhana dan perlahan-lahan membangunnya.
Langkah 1: Menyiapkan Struktur HTML
Pertama, kita perlu menyiapkan struktur HTML kita. Ini adalah template dasar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Sidebar Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 sidebar">
<!-- Konten sidebar akan diletakkan di sini -->
</div>
<!-- Konten utama -->
<div class="col-md-9 main-content">
<!-- Konten utama akan diletakkan di sini -->
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Dalam template ini, kita telah membuat sebuah kontainer dengan dua kolom: satu untuk sidebar (3 unit lebar) dan satu untuk konten utama (9 unit lebar). Bootstrap menggunakan sistem grid 12 kolom, jadi angka ini menjumlahkan menjadi 12.
Langkah 2: Menambahkan konten ke sidebar
Mari kita tambahkan beberapa konten ke sidebar kita:
<!-- Sidebar -->
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Menu Sidebar</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tentang</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Layanan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontak</a>
</li>
</ul>
</div>Di sini, kita menambahkan judul dan daftar tautan navigasi ke sidebar kita. Kelas bg-light memberikan warna latar belakang yang terang.
Langkah 3: Menambahkan konten utama
Mari kita tambahkan beberapa konten ke area utama:
<!-- Konten utama -->
<div class="col-md-9 main-content">
<h1 class="mt-3">Selamat Datang di Website Kami</h1>
<p>Ini adalah area konten utama. Ini adalah tempat informasi utama halaman Anda akan ditampilkan.</p>
</div>Menengah Sidebar
Sekarang kita memiliki sidebar dasar, mari kita tingkatkan dengan beberapa fitur tambahan.
Menambahkan Kotak Pencarian
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Menu Sidebar</h3>
<form class="d-flex mb-3">
<input class="form-control me-2" type="search" placeholder="Cari" aria-label="Cari">
<button class="btn btn-outline-success" type="submit">Cari</button>
</form>
<!-- ... sisanya konten sidebar ... -->
</div>Ini menambahkan kotak pencarian di bagian atas sidebar, memberikan pengguna cara cepat untuk menemukan konten.
Menambahkan Menu Tenggulir
Mari kita tambahkan menu tenggulir ke sidebar kita:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Produk
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Produk 1</a></li>
<li><a class="dropdown-item" href="#">Produk 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Penawaran Spesial</a></li>
</ul>
</li>Tambahkan kode ini di dalam <ul class="nav flex-column"> di sidebar Anda. Ini membuat menu tenggulir untuk "Produk".
Membuat Sidebar Responsif
Salah satu tantangan dengan sidebar adalah membuatnya bekerja baik di perangkat mobile. Mari kita membuat sidebar kita responsif:
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 sidebar bg-light" id="sidebar">
<button class="btn btn-primary d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent">
Toggle Sidebar
</button>
<div class="collapse d-md-block" id="sidebarContent">
<!-- ... konten sidebar ... -->
</div>
</div>
<!-- Konten utama -->
<div class="col-md-9 main-content">
<!-- ... konten utama ... -->
</div>
</div>
</div>Kami menambahkan tombol toggle yang hanya muncul di layar kecil (d-md-none), dan kita wrap konten sidebar kita di dalam div yang dapat d-collapse. Di layar yang besar, sidebar akan selalu terlihat (d-md-block).
Menyusun Sidebar
Akhirnya, mari kita tambahkan sedikit CSS custom untuk membuat sidebar kita terlihat lebih baik:
<style>
.sidebar {
min-height: 100vh;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
color: #333;
}
.sidebar .nav-link.active {
color: #007bff;
}
</style>Tambahkan ini ke <head> HTML Anda. CSS ini membuat sidebar sepenuhnya tinggi, menambahkan bayangan halus, dan memberikan gaya ke tautan navigasi.
Kesimpulan
Selamat! Anda baru saja membuat sidebar Bootstrap yang fungsional dan responsif. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba dengan berbagai macam tata letak dan gaya.
Berikut adalah tabel yang menggabungkan kelas Bootstrap utama yang kita gunakan:
| Kelas | Tujuan |
|---|---|
| container-fluid | Membuat kontainer lebar penuh |
| row | Membuat grup kolom horisontal |
| col-md-3 | Membuat kolom 3 unit lebar di layar medium dan ke atas |
| bg-light | Menambahkan warna latar belakang yang terang |
| nav | Menandai komponen navigasi |
| nav-item | Menggaya item navigasi |
| nav-link | Menggaya tautan navigasi |
| dropdown | Membuat menu tenggulir |
| btn | Menggaya tombol |
| form-control | Menggaya input formulir |
Terus mengoding, terus belajar, dan terutama, bersenang-senang! Ingat, setiap master pernah menjadi pemula. Perjalanan Anda dalam pengembangan web baru saja dimulai, dan saya sangat menantikan untuk melihat ke mana dia membawa Anda!
Credits: Image by storyset