Bootstrap - Navbars: Gerbang导航 Profesional untuk Website

Hai sana, para pengembang web masa depan! Hari ini, kita akan mendalami salah satu komponen paling penting dalam desain web modern: navbar. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk memandu Anda melalui dunia menakjubkan Bootstrap navbars. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita mulai petualangan coding ini bersama!

Bootstrap - Navbars

Cara Kerjanya

Sebelum kita mulai membuat navbars kita, mari pahami apa itu dan bagaimana cara kerjanya. Sebuah navbar, singkatan dari navigation bar, adalah seperti peta website Anda. Ini membantu pengguna menemukan jalan di karya digital Anda. Dalam Bootstrap, navbars adalah responsif dan崩塌默认, yang artinya mereka menyesuaikan diri secara indah ke berbagai ukuran layar. Apakah itu menakjubkan?

Navbar Dasar

Mari kita mulai dengan navbar dasar. Ini adalah contoh sederhana:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

mari kitauraikan ini:

Kita mulai dengan elemen <nav> dengan kelas Bootstrap.
Kelas navbar-brand untuk nama website atau logo Anda.
navbar-toggler untuk tampilan mobile, membuat menu "hamburger" terkenal.
Dalam div navbar-collapse, kita memiliki item navigasi dalam daftar tak berurutan.

Navbar Vertikal

Ingin menggoyangkan halangan? Mari kita coba navbar vertikal:

<nav class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Vertical Nav</a>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</nav>

Magiknya ada di kelas flex-column. Ini mengubah navbar horizontal kita menjadi satu vertikal yang ramping. Menakjubkan, kan?

Navbar Terpusat

Untuk mereka yang menyukai segala sesuatu yang rapih, ini adalah cara untuk menempatkan item navbar Anda di tengah:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>

Kelas mx-auto adalah pahlawan centering kita di sini. Itu memberikan margin otomatis di kedua sisi, menengahkan konten kita.

Brand

Brand Anda adalah identitas Anda. Mari kita lihat bagaimana membuatnya bersinar:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>

Kode ini menambahkan logo di sebelah nama atau brand Anda. Kelas d-inline-block dan align-top memastikan bahwa semua hal berjejer rapih.

Teks

kadang-kadang, Anda hanya perlu teks biasa di navbar Anda:

<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Teks navbar dengan elemen inline
</span>
</nav>

Kelas navbar-text menyesuaikan gaya teks Anda agar cocok dengan penampilan navbar.

Gambar dan Teks

Mari kita gabungkan gambar dan teks untuk navbar yang lebih dinamis:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
<span class="navbar-text">
Selamat datang di website kami!
</span>
</nav>

Ini membuat navbar dengan logo dan pesan welcoming. Tidak terlihat profesional?

Nav

Komponen nav adalah hati dari navbar kita. Mari kita lihat contoh yang lebih kompleks:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Nonaktif</a>
</li>
</ul>
</div>
</nav>

Contoh ini termasuk link aktif, link biasa, dan link nonaktif. Kelas sr-only digunakan untuk pembaca layar, meningkatkan aksesibilitas.

Navbar tanpa List

Untuk penampilan yang lebih bersih, Anda dapat membuat navbar tanpa daftar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Nonaktif</a>
</div>
</nav>

Ini mencapai hasil yang sama tanpa menggunakan tag <ul> dan <li>.

Navbar dengan Dropdown

Siap untuk naik level? Mari kita tambahkan dropdown ke navbar kita:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Link</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Aksi</a>
<a class="dropdown-item" href="#">Aksi lainnya</a>
<a class="dropdown-item" href="#">Hal lain di sini</a>
</div>
</div>
</div>
</nav>

Kelas dropdown-toggle membuat efek dropdown, sedangkan dropdown-menu dan dropdown-item menyiapkan konten dropdown.

Forms

Butuh search bar? Tidak masalah! Ini adalah cara untuk menambahkan form ke navbar Anda:

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>

Kelas form-inline menjaga elemen form dalam satu baris, sempurna untuk navbars.

Skema Warna

Bootstrap menawarkan berbagai skema warna. Ini adalah navbar gelap:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar Gelap</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</nav>

Cukup ubah navbar-light ke navbar-dark dan bg-light ke bg-dark. Sederhana!

Kontainer

Untuk penempatan yang lebih baik, Anda dapat membalut konten navbar Anda dalam kontainer:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar Terbungkus</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</div>
</nav>

Kelas container mengatur konten di tengah dan menyediakan lebar tetap responsif.

Penempatan

Atas Tetap

Ingin navbar Anda tetap di atas? Ini adalah cara:

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Tetap di Atas</a>
</nav>

Kelas fixed-top membuat navbar Anda tinggal di atas halaman saat pengguna gulir.

Perilaku Responsif

Bootstrap navbars adalah responsif secara default. Mereka崩塌 di layar kecil dan diperluas di layar yang lebih besar. Kunci ada di kelas navbar-expand-*:

<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- Konten Navbar -->
</nav>

Navbar ini akan diperluas di layar ukuran medium dan yang lebih besar.

Toggler

Toggler navbar adalah yang membuat menu "hamburger" di perangkat mobile:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- Konten Navbar -->
</div>
</nav>

Tombol navbar-toggler mengendalikan visibilitas konten navbar di layar kecil.

Konten Eksternal

Anda dapat toggle konten di luar navbar juga:

<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Konten崩塌</h5>
<span class="text-muted">Toggleable melalui brand navbar.</span>
</div>
</div>

Ini membuat toggler yang mengendalikan konten di luar navbar itu sendiri.

Offcanvas

Akhirnya, mari kita lihat navbar offcanvas:

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Konten Offcanvas -->
</div>
</div>
</div>
</nav>

Ini membuat sidebar yang muncul dari sisi layar, sempurna untuk navigasi mobile.

Dan itu adalah! Kita telah melintasi dunia Bootstrap navbars, dari struktur dasar hingga fitur advanced. Ingat, latihan membuat Anda sempurna, jadi jangan khawatir untuk mencoba contoh ini. Selamat coding, dan semoga navbars Anda selalu memandu pengguna Anda dengan baik!

Metode	Deskripsi
`.navbar()`	Inisialisasi komponen navbar
`.collapse('toggle')`	Toggle崩塌 navbar
`.collapse('show')`	Tampilkan崩塌 navbar
`.collapse('hide')`	Sembunyikan崩塌 navbar
`.offcanvas('toggle')`	Toggle offcanvas navbar
`.offcanvas('show')`	Tampilkan offcanvas navbar
`.offcanvas('hide')`	Sembunyikan offcanvas navbar

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Modal

Tutorial Selanjutnya:

Bootstrap - Navigasi & tab