Bootstrap - Sidebar Demo
Halo, para pengembang web yang berbakat! Hari ini, kita akan melakukan perjalanan yang menarik ke dunia sidebar Bootstrap. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk mengantar Anda melalui topik ini. Jadi, ambil minumannya yang favorit, 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 dimaksudkan oleh sidebar dalam desain web!
Sidebar adalah kolom vertikal yang biasanya ditempatkan di sebelah kiri atau kanan halaman web. biasanya berisi 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="id">
<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 ditempatkan di sini -->
</div>
<!-- Konten utama -->
<div class="col-md-9 main-content">
<!-- Konten utama akan ditempatkan 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 wadah 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 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. Tempat dimana informasi utama halaman Anda akan ditampilkan.</p>
</div>Menengahkan 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>
<!-- ... konten sidebar lainnya ... -->
</div>Ini menambahkan kotak pencarian di bagian atas sidebar kita, memberikan pengguna cara cepat untuk menemukan konten.
Menambahkan Menu Dropdown
Mari kita tambahkan menu dropdown 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 dropdown untuk "Produk".
Membuat Sidebar Responsif
Salah satu tantangan dengan sidebar adalah membuatnya bekerja baik pada perangkat mobile. Mari kita buat 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>Kita menambahkan tombol toggle yang hanya muncul pada layar kecil (d-md-none), dan kita mengemas konten sidebar dalam div yang collapsible. Pada layar yang lebih besar, sidebar akan selalu terlihat (d-md-block).
Menyusun Sidebar
Akhirnya, mari kita tambahkan sedikit CSS khusus untuk membuat sidebar kita terlihat lebih bagus:
<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 full-height, menambahkan bayangan halus, dan mensusun tautan navigasi.
Kesimpulan
Selamat! Anda telah membuat sidebar Bootstrap yang sepenuhnya berfungsi dan responsif. Ingat, latihan membuat master, jadi jangan khawatir untuk mencoba dengan berbagai macam tata letak dan gaya. Terus coding, 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 itu akan membawa Anda!
Berikut adalah tabel yang menggabungkan kelas Bootstrap utama yang kita gunakan:
| Kelas | Tujuan |
|---|---|
| container-fluid | Membuat wadah berlebar penuh |
| row | Membuat kelompok vertikal kolom |
| col-md-3 | Membuat kolom 3 unit lebar pada layar medium dan keatas |
| bg-light | Menambahkan warna latar belakang yang terang |
| nav | Menandai komponen navigasi |
| nav-item | Meng gayakan item navigasi |
| nav-link | Meng gayakan tautan navigasi |
| dropdown | Membuat menu dropdown |
| btn | Meng gayakan tombol |
| form-control | Meng gayakan masukan form |
Terus coding, 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 itu akan membawa Anda!
Credits: Image by storyset