Indonesia

Tutorial Bootstrap

Tata Letak Bootstrap

Konten Bootstrap

Komponen Bootstrap

Bootstrap Formulir

Pembantu Bootstrap

Utilitas Bootstrap

Demos Bootstrap

Terjemahan ke Bahasa Indonesia

Bootstrap - Demo Navbar Footer Sticky

Halo teman-teman pengembang web yang bersemangat! Hari ini, kita akan melangsungkan sebuah perjalanan menarik untuk membuat navbar footer sticky menggunakan Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya akan menggイド Anda melalui proses ini secara langkah demi langkah, memastikan Anda memahami setiap bit kode yang kita tulis. Jadi, ambil minuman kesukaan Anda, duduk relaxed, dan mari kita masuk ke dalam!

Bootstrap-Sticky footer navbar Demo

Apa Itu Navbar Footer Sticky?

Sebelum kita mulai mengoding, mari kita pahami apa yang kita inginkan. Navbar footer sticky adalah navbar yang tetap berada di bagian bawah halaman, tidak peduli berapa banyak konten yang ada di halaman atau berapa jauh Anda menggulir. Itu seperti teman yang setia yang selalu bersama Anda dalam keadaan apapun!

Mengapa Menggunakan Navbar Footer Sticky?

  1. Itu menyediakan akses mudah ke tautan atau aksi yang penting.
  2. Itu menyimpan ruang layar, khususnya di perangkat mobile.
  3. Itu meningkatkan pengalaman pengguna dengan menjaga opsi navigasi selalu terlihat.

Sekarang kita tahu apa yang kita bangun dan mengapa itu berguna, mari kita mulai berkaca dengan kode!

Menyiapkan Struktur HTML

Pertama, kita perlu mengatur struktur dasar dokumen HTML kita. Jangan khawatir jika Anda baru belajar HTML; saya akan menjelaskan setiap bagian saat kita melakukannya.

<!DOCTYPE html>
<html lang="id" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Demo Navbar Footer Sticky</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<!-- Kita akan menambahkan konten disini -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

mari kitauraikan ini:

  1. <!DOCTYPE html>: Ini memberitahu browser bahwa kita menggunakan HTML5.
  2. <html lang="id" class="h-100">: Elemen root halaman kita. Kita menambahkan kelas h-100 untuk membuatnya mengambil 100% tinggi viewport.
  3. Dalam tag <head>:
  • Kita mengatur pengkodean karakter dan viewport.
  • Kita memberi halaman kita judul.
  • Kita menautkan file CSS Bootstrap.
  1. <body class="d-flex flex-column h-100">: Kita menggunakan kelas Bootstrap untuk membuat body menjadi wadah flex yang mengambil 100% tinggi viewport.
  2. Di akhir <body>, kita masukkan file JavaScript Bootstrap.

Membuat Header

Sekarang, mari kita tambahkan header ke halaman kita:

<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar sticky</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tautan</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Nonaktif</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Cari" aria-label="Cari">
<button class="btn btn-outline-success" type="submit">Cari</button>
</form>
</div>
</div>
</nav>
</header>

Kode ini membuat navbar responsif yang tetap berada di bagian atas halaman. Ini termasuk nama merek, tautan navigasi, dan formulir pencarian. Navbar menyusut menjadi menu hamburger di layar yang lebih kecil.

Menambahkan Konten Utama

Berikutnya, mari kita tambahkan konten utama ke halaman kita:

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Footer sticky dengan navbar fixed</h1>
<p class="lead">Pin footer ke bagian bawah viewport di browser desktop dengan HTML dan CSS custom ini.</p>
<p>Gunakan <a href="#">footer sticky dengan navbar fixed</a> jika perlu, juga.</p>
</div>
</main>

Kelas flex-shrink-0 pada <main> memastikan bahwa itu tidak menyusut saat tidak cukup ruang, mendorong footer kita ke bawah.

Membuat Footer Sticky

Sekarang untuk bintang pertunjukan kita, footer sticky:

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Letakkan konten footer sticky di sini.</span>
</div>
</footer>

Kelas mt-auto mendorong footer ke bawah halaman saat tidak cukup konten untuk mengisi viewport.

Menambahkan CSS Custom

Untuk membuat semua halaman bekerja sempurna, kita perlu menambahkan sedikit CSS custom. Masukkan ini di dalam tag <style> di <head> dokumen Anda:

<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>

CSS ini menambahkan padding ke atas konten utama (agar tidak disembunyikan oleh navbar fixed) dan menetapkan warna latar belakang footer.

Menggabungkan Semua

Ini adalah kode lengkap kita:

<!DOCTYPE html>
<html lang="id" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Demo Navbar Footer Sticky</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar sticky</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tautan</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Nonaktif</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Cari" aria-label="Cari">
<button class="btn btn-outline-success" type="submit">Cari</button>
</form>
</div>
</div>
</nav>
</header>

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Footer sticky dengan navbar fixed</h1>
<p class="lead">Pin footer ke bagian bawah viewport di browser desktop dengan HTML dan CSS custom ini.</p>
<p>Gunakan <a href="#">footer sticky dengan navbar fixed</a> jika perlu, juga.</p>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Letakkan konten footer sticky di sini.</span>
</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Kesimpulan

Dan begitu juga, teman-teman! Kita telah berhasil membuat halaman web dengan navbar footer sticky menggunakan Bootstrap. Ingat, pengembangan web seperti memasak - itu memerlukan latihan untuk mendapatkannya benar. Jadi, jangan frustasi jika itu tidak terlihat sempurna pada percobaan pertama Anda. Tetap mencoba, tetap belajar, dan sebelum Anda menyadari, Anda akan membuat halaman web yang indah seperti chef yang ahli!

Berikut ini penjabaran singkat apa yang kita pelajari:

Komponen Tujuannya
Struktur HTML Menyediakan struktur dasar halaman web kita
Bootstrap CSS Memberikan kita komponen dan kelas utilitas yang terlebih dahulu
CSS Custom Memungkinkan kita untuk menyesuaikan tampilan halaman kita
Header Mengandung navbar kita
Konten Utama Menyimpan konten utama halaman kita
Footer Tetap berada di bagian bawah halaman, bahkan saat konten pendek
Bootstrap JS Mengaktifkan komponen interaktif seperti navbar yang dapat disembunyikan

Ingat, kunci untuk menjadi ahli dalam pengembangan web adalah latihan dan keingintahuan. Jadi, terus mengoding, terus belajar, dan terutama, bersenang-senang! Sampai jumpa lagi, selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:
Demo Dashboard Bootstrap
Tutorial Selanjutnya:
Demo Bootstrap-Masonry