Malay

Tutorial Bootstrap

Susun Atur Bootstrap

Kandungan Bootstrap

Komponen Bootstrap

Bootstrap Borang

Bantuan Bootstrap

Utiliti Bootstrap

Demos Bootstrap

Bootstrap - Navbar Bawah Tengah Demo

Hai teman-teman yang sedang belajar pemrograman web! Hari ini, kita akan memulai perjalanan yang menarik untuk membuat navbar footer yang sticky menggunakan Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya akan memandu Anda langkah demi langkah dalam proses ini, memastikan Anda mengerti 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, tanpa menghiraukan berapa banyak konten yang ada di halaman atau seberapa jauh Anda menggeser. Itu seperti teman setia yang tetap bersama Anda dalam keadaan apapun!

Mengapa Menggunakan Navbar Footer Sticky?

  1. memberikan akses mudah ke tautan atau aksi penting.
  2. menyimpan ruang layar, terutama pada perangkat mobile.
  3. meningkatkan pengalaman pengguna dengan menjaga opsi navigasi selalu terlihat.

Sekarang kita tahu apa yang kita bangun dan mengapa itu berguna, mari kita mulai berkeringat 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="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Footer Sticky Demo</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="en" class="h-100">: Elemen root halaman kita. Kita menambahkan kelas h-100 agar mengambil 100% tinggi viewport.
  3. Dalam tag <head>:
  • Kita mengatur pengkodean karakter dan viewport.
  • Kita memberikan judul halaman.
  • Kita menghubungkan file CSS Bootstrap.
  1. <body class="d-flex flex-column h-100">: Kita menggunakan kelas Bootstrap untuk membuat body menjadi wadah fleks yang mengambil 100% tinggi viewport.
  2. Di akhir <body>, kita masukkan file JavaScript Bootstrap.

Menambahkan 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 tetap</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 akan menyusut menjadi menu hamburger pada 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">Navbar footer sticky dengan navbar tetap</h1>
<p class="lead">Pin footer ke bagian bawah viewport di browser desktop dengan HTML dan CSS yang disesuaikan ini.</p>
<p>Gunakan <a href="#">navbar footer sticky dengan navbar tetap</a> jika diperlukan, juga.</p>
</div>
</main>

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

Membuat Footer Sticky

Sekarang, mari kita buat bintang utama kita, footer sticky:

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

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

Menambahkan CSS Pribadi

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

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

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

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

Menyatukan Semua

Ini adalah kode lengkap kita:

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Footer Sticky Demo</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 tetap</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">Navbar footer sticky dengan navbar tetap</h1>
<p class="lead">Pin footer ke bagian bawah viewport di browser desktop dengan HTML dan CSS yang disesuaikan ini.</p>
<p>Gunakan <a href="#">navbar footer sticky dengan navbar tetap</a> jika diperlukan, juga.</p>
</div>
</main>

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

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

Kesimpulan

Dan begitu saja, teman-teman! Kita telah berhasil membuat halaman web dengan navbar footer sticky menggunakan Bootstrap. Ingat, pemrograman web seperti memasak - itu memerlukan latihan untuk mendapatkannya benar. Jadi, jangan frustasi jika itu tidak terlihat sempurna pada percobaan pertama Anda. Terus mencoba, terus belajar, dan terutama, bersenang-senang! Sampaijumpa lagi, selamat berkoding!

Berikut adalah peninjauan cepat apa yang kita pelajari:

Komponen Tujuan
Struktur HTML Menyediakan struktur dasar halaman web kita
CSS Bootstrap Memberikan kita komponen dan kelas utilitas yang disesuaikan
CSS Pribadi Memungkinkan kita menyesuaikan penampilan 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 menyusut

Ingat, kunci untuk menjadi ahli pemrograman web adalah latihan dan keingintahuan. Jadi, terus coding, terus belajar, dan terutama, bersenang-senang! Sampaijumpa lagi, selamat berkoding!

Credits: Image by storyset

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