bootstrap tutorial 2 : membuat navbar bootstrap Langsung ke konten utama

bootstrap tutorial 2 : membuat navbar bootstrap

setelah sebelumnya kita sudah mengenal bootstrap sekarang kita lanjut untuk membuat sebuah navbar pada bootstrap atau navbar bootstrap responsive. dan nanti kita coba memberitahu apa itu navbar pada bootstrap dan apa itu navbar dalam sebuah website. namun sebelumnya seperti biasa izinkan diri ini terlebih dahulu untuk mengucapkan

Salam sobat semua

Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah Allah berikan kepada diri ini secara gratis sehingga diri ini bisa menulis dan berbagi dengan kalian dalam tulisan ini, tak lupa Sholawat serta salamku akan tetap tercurah dan terpanjatkan hanya untuk junjugan Nabi besar Muhammad S.A.W. beserta keluarga dan para sahabatnya.

Bismillahir rohmaanir rohiim, navbar dalam suatu website ialah suatu deretan atau barisan menu navigasi atau menu petunjuk untuk isi dalam website kita, sedangkan navbar pad bootstrap adalah barisan menu navigasi yang dibuat dengan bootstrap. sehingga navbar tersebut bisa menjadi navbar yang responsive dan menarik. untuk membuat navbar pada bootstrap kita wajib menyimpan file kode html navbar kita satu folder dengan folder bootstrap bagaiamana seperti yang sudah kita coba pada tulisan sebelumnya yaitu pada tulisan bootstrap tutorial 1 : cara memulai bootstrap . 

dan sekarang kita lanjut sebelum membuat file navbar kita buat dulu file bootstrapnya seperti berikut kurang lebihnya

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap v5.1</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
 
</head>
<body>
<header class="border-bottom">
</header>
</body>
</html>

setelah itu kita search tentang kode untuk membuat navbar pada bootstrap pada website resmi bootsrap  dan nanti akan muncul output atau tampilan seperti berikut

 

output search navbar bootstrap

setelah kita dapat maka kita baca dan pahami apa yang ada di kode tersebut disana sudah sangat lengkap sekali, jika kita belum paham maka kita translate saja ke bahasa indonesia menggunakan fitur translate google chrome seperti contoh berikut

Bagaimana navbar kode bekerja
Inilah yang perlu Anda ketahui sebelum memulai dengan navbar:

Navbar memerlukan pembungkus .navbar dengan .navbar-expand{-sm|-md|-lg|-xl|-xxl} class untuk pembuatan responsif dan kelas skema warna .
Navbar dan isinya adalah fluid secara default. Ubah wadah untuk membatasi lebar horizontalnya dengan cara yang berbeda.
Gunakan spacing dan flex class utilitas untuk mengontrol penspasian dan perataan dalam navbars.
Navbar responsif secara default, tetapi Anda dapat dengan mudah memodifikasinya untuk mengubahnya. Perilaku responsif bergantung pada plugin JavaScript kami.
Pastikan aksesibilitas dengan menggunakan <nav> elemen atau, jika menggunakan elemen yang lebih umum seperti a <div>, tambahkan a role="navigation" ke setiap bilah navigasi untuk mengidentifikasinya secara eksplisit sebagai kawasan tempat bagi pengguna teknologi pendukung.
Tunjukkan item saat ini dengan menggunakan aria-current="page" untuk halaman saat ini atau aria-current="true" untuk item saat ini dalam satu set.
kemudian dibawahnya ada keterangan lagi yaitu 
- .navbar-brand untuk nama dari website kita
- .navbar-nav untuk navbar full tingginya dan terang lebar navigation (bisa juga support untuk dropdowns).
- .navbar-toggler digunakan untuk plugin lainnya seperti collapse plugin dan navigasi toggle lainnya.

jadi menurut keterangan diatas dari web resmi bootstrap untuk membuat navbar kita harus memakai tag seperti berikut

<nav class="navbar"></nav>

dan biar responsive kita tambahin class navbar-expand seperti berikut kurang lebih nya

<nav class="navbar navbar-expand-lg"></nav>

jadi untuk kodenya menurut keterangan dan contoh dari web resmi bootstrap maka kurang lebih akan menjadi seperti ini

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="container-fluid">

<div class="container">

<ul class="navbar-nav">

<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>

<li class="nav-item"><a class="nav-link" aria-current="page" href="#">About</a></li>

<li class="nav-item"><a class="nav-link" aria-current="page" href="#">Contact</a></li>

</ul>

</div>

</div>

</nav>

dan juga menurut keterangan dari web resmi bootstrap tadi kalau ingin memberi nama pada navbar ini maka kita bisa memberinya dengan kode sebagai berikut kurang lebihnya

<a class="navbar-brand" href="#">Navbar Bootstrap 5</a>

dan jika kita taruh kode diatas kedalam file kode navbar.html kita maka akan menjadi seperti berikut

<html>

<head>

<title>Navbar Bootstrap 5</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.min.js"></script>

</head>

<body>

<header class="border-bottom">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="container-fluid">

<a class="navbar-brand" href="#">Navbar Bootstrap 5</a>

<div class="container">

<ul class="navbar-nav">

<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>

<li class="nav-item"><a class="nav-link" aria-current="page" href="#">About</a></li>

<li class="nav-item"><a class="nav-link" aria-current="page" href="#">Contact</a></li>

</ul>

</div>

</div>

</nav>

</header>

</body>

</html>

dan hasil yang diperoleh dari output kode diatas adalah seperti berikut

output navbar responsive bootstrap

dan sekarang kita coba resize browser kita dan maka hasil outputnya sudah responsive tapi belum menarik seperti tampak berikut

output navbar responsive bootstrap resize browser


 biar lebih menarik menurut keterangan dari web resmi bootstrap kita pakai toggle menu dan class collapse, jadi kita ganti div class container pada navbar diatas dengan kode yang kurang lebih seperti berikut

<div class="collapse navbar-collapse" id="isinavbar"></div>

sehingga menjadi seperti berikut untuk kode lengkapnya

<html>

<head>

<title>Navbar Bootstrap 5</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.min.js"></script>

</head>

<body>

<header class="border-bottom">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="container-fluid">

<a class="navbar-brand" href="#">Navbar Bootstrap 5</a>

<div class="collapse navbar-collapse" id="isinavbar">

<ul class="navbar-nav">

<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>

<li class="nav-item"><a class="nav-link" aria-current="page" href="#">About</a></li>

<li class="nav-item"><a class="nav-link" aria-current="page" href="#">Contact</a></li>

</ul>

</div>

</div>

</nav>

</header>

</body>

</html>

maka jika kita running atau kita reload file navbar.html kita dengan posisi browser masih resize maka akan meghasilkan output sebagai berikut

output collapse navbar bootstrap

maka untuk bisa mengkases menu navbar, kita harus kasih toggler icon yang kodenya menurut web resmi bootstrap seperti berikut

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#isinavbar">
<span class="navbar-toggler-icon"></span>
</button>

dan untuk kode toogle ini yang perlu di cermati adalah pada attribut data-bs-target="#isinavbar" ini harus sama dengan id div class collapse navbar-collapse. karena kalau nanti tidak sama maka ketika kita klik icon toggler bootstrap maka tidak akan muncul. dan untuk penempatan sebaiknya diletakkan sebelum div id isinavbar. dan untuk kode lengkapnya kurang lebih seperti berikut

<html>

<head>

<title>Navbar Bootstrap 5</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.min.js"></script>

</head>

<body>

<header class="border-bottom">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="container-fluid">

<a class="navbar-brand" href="#">Navbar Bootstrap 5</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#isinavbar">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="isinavbar">

<ul class="navbar-nav">

<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>

<li class="nav-item"><a class="nav-link" aria-current="page" href="#">About</a></li>

<li class="nav-item"><a class="nav-link" aria-current="page" href="#">Contact</a></li>

</ul>

</div>

</div>

</nav>

</header>

</body>

</html>

dan jika kita running kode diatas maka navbar responsive dengan bootstrap kita sudah jadi seperti tampak berikut

output navbar collpase toggle bootstrap

dan ketika ingin merubah warna kita cukup melihat lagi color scheme yang ada di menu on page di sebelah kanan pada web resmi bootstrap yaitu seperti berikut

color scheme navbar bootstrap


dan jika kita rubah tag nav pada kode kita yang kurang lebihnya seperti berikut 
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

maka navbar yang sudah kita buat akan berubah seperti berikut

output navbar background primary


 dan output ketika browser resize menjadi kecil maka akan tampak seperti berikut

output responsive navbar bootstrap


nah gimana mudah kan. semua sudah disediakan di web resmi bootstrap kita tinggal pilih dan memahami kemudian kita copy paste kode yang sudah ada di web resmi bootstrap. jadi seperti itulah kurang lebihnya untuk membuat sebuah navbar pada bootstrap responsive. dan saya rasa cukup sekian dulu untuk tulisan kali ini tentang apa itu navbar pada bootstrap dan apa itu navbar dalam sebuah website dan cara membuat navbar pada bootstrap. dan kita lanjut di next tulisan Insya Allah. mudah-mudahan tulisan ini bisa memberi manfaat bagi kita semua, Aamiiin.
Salam sobat semua
#bootstrap #jquery #navbar #javascript #css #html #free #share #berbagi #gratis #web #website #navigation #toggle



 

Komentar

Posting Komentar

Postingan populer dari blog ini

cara membuat redirect dengan header php

redirect adalah suatu pengalihan ke halaman lain dengan maksud dan tujuan tertentu. terkadang kita sering menemukan ketika di suatu applikasi web sesorang yang kemudian dengan automatis kita dialihkan ke halaman lain seperti contoh adf.ly atau  https://antarurl.blogspot.com/p/redirect-all-url.html?targeturl?baseurl=google,com yang mana kita akan secara automatis dilaihkan kepada suatu halaman. nah sebelum kita mencoba membuatnya seperti biasa izinkan diri ini terlebih dahulu untuk mengucapkan salam sobat semua Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah Allah berikan kepada diri ini secara gratis sehingga diri ini bisa menulis dan berbagi dalam tulisan ini. dan tak lupa sholawat serta salamku akan tetap tercurah dan terpanjatkan hanya untuk baginda sayyidina Muhammad ibni Abdillah S.A.W. beserta keluarga dan para sahabatnya. Bismillahir rohmaanir rohiim,kali ini kita akan mencoba apa yang namanya redirect dengan header php. redirect sudah dijelaskan diatas juga b...
Posting Komentar
Baca selengkapnya

menampilkan enter textarea php

pada penulisan kita pada textarea jika langsung kita tampilkan terkadang atau bahkan enter yang kita buat pada textarea tidak akan tampil atau tidak work atau tidak berfungsi, karena pada html enter itu adalah tag br atau tag break seperti yang sudah kita coba pada penulisan sebelumnya disini https://notemazdopunk.blogspot.com/2021/05/belajar-html-part-3-mengenai-tag.html . jadi kali ini kita akan mencoba Text Area agar enter terbaca dengan PHP. tapi seperti sebelumny izinkan diri ini terlebih dahulu untuk mengucapkan Salam sobat semua Alhamdulillahi Robbil 'alamiin segala puji bagi Allah S.W.T. yang telah memberi nikmat kepada diri ini secara gratis sehingga diri ini bisa menulis dan berbagi lagi dalam tulisan ini. tak lupa sholawat serta salam akan tetap terpanjat dan tercurahkan atas baginda Sayyidina Muhammad ibni Abdillah S.A.W. beserta kepada keluarga dan sahabat beliau. Bismillahir rohmaanir rohiim kali ini kita akan mencoba membuat enter textarea pada tampilan html atau php...
Posting Komentar
Baca selengkapnya

bootstrap tutorial 5 : membuat dashboard admin bootstrap

Dan kali ini mari bersama kita mencoba untuk membuat layout atau template dashboard admin dengan bootstrap setelah sebelumnya kita sudah pernah mencoba membuat template simple admin dashboard dengan html,css dan jquery . karena page admin dashboard ini memang wajib untuk pembuat applikasi web kita nantinya. tapi seperti biasanya sebelum memulai percobaan kita untuk membuat simple template admin dashboard dengan bootstrap izinkan diri ini terlebih dahulu untuk mengucapkan Salam sobat semua Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah Allah berikan kepada diri ini secara gratis sehingga diri ini bisa menulis dan berbagi dengan kalian dalam tulisan ini. tak lupa sholawat serta salamku akan tetap tercurah dan terpanjatkan hanya untuk junjungan Sayyidina Muhammad ibni Abdillah S.A.W. beserta keluarga dan para sahabatnya. Bismillahir rohmanir rohiim, kali ini mari kita bersama mencoba membuat dashboard admin template dengan bootstrap yang simple atau sederhana tapi elegan...
Posting Komentar
Baca selengkapnya

membuat perulangan bintang dengan php

pada kali ini kita mencoba bermain dengan pengasahan logika, setelah kita sebelumnya sudah pernah mencoba perulangan dalam tulisan PHP dasar 7 : 3 macam perulangan php . sekarang mari kita coba mengasah logika kita dengan membuat perulangan dalam bentuk bintang karena menurut saya logika nya ini sangat unik untuk dibuat. tapi seperti sebelumnya izinkan diri ini untuk terlebih dahulu untuk mengucapkan Salam sobat semua Alhamdulillahi robbil 'alamiiin atas segala nikmat yang telah Allah berikan kepada diri ini secara gratis sehingga diri ini bisa menulis dan berbagi dalam tulisan ini. tak lupa sholawat serta salamku akan tetap tercurah dan terpanjatkan hanya untuk baginda Sayyidina Muhammad ibni Abdillah S.A.W. beserta keluarga dan para sahabatnya. Bismillahir rohmaanir rohiim, mari kali ini kita bersama-sama mencoba membuat perulangan dengan tulisan bintang dengan berbagai bentuk. untuk bentuk yang pertama kali adalah perulangan bentuk standard yaitu membuat perulangan dengan dengan...
Posting Komentar
Baca selengkapnya

bootstrap tutorial 4 : membuat form login bootstrap sederhana

setelah sebelumnya kita sudah mencoba membuat layout form login website responsive sederhan dengan html dan css , maka sekarang kita akan mencoba membuat responsive form login sederhana dengan bootstrap. karena form login ini juga merupakan bagian terpenting dalam suatu applikasi berbasis web. namun seperti biasa izinkan diri ini terlebih dahulu untuk mengucapkan Salam sobat semua Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah Allah berikan kepada diri ini secara gratis sehingga diri ini bisa menulis dan berbagi dalam tulisan ini, tak lupa sholawat serta salamku akan tetap tercurah dan terpanjatkan hanya untuk Junjungan baginda sayyidina Muhammad ibni Abdillah S.A.W. beserta keluarga dan para sahabatnya. Bismillahir rohmanir rohiim, mari kali ini kita bersama-sama mencoba membuat form login yang responsive dan sederhana dengan bootstrap, sehingganya ketika nanti kita mau buat suatu applikasi berbasis web sudah tidak bingung mencari sana-sini lagi, karena kita sudah pu...
Posting Komentar
Baca selengkapnya

Install Mysql Connector ODBC pada windows 8 atau windows 10

Salam sobat semua Alhamdulillah saya panjatkan di waktu ini karena bisa menulis,membuat video dan berbagi lagi. untuk kali ini saya akan berbagi sesuatu yang mungkin untuk kebanyakan orang applikasi ini kurang penting atau bahkan tidak penting sama sekali, tapi untuk para programer atau coder ini sangat penting dan aplikasi ini sudah bertahun tahun menemani saya membuat program database mysql.dari namanya saja mysql connector, maka fungsi dari applikasi ini adalah untuk mengkoneksikan dari applikasi visual ke database mysql. kurang lebihnya seperti itu. jadi nanti kalo pemrograman visual sudah sampai pada pembuatan data base maka kita butuh applikasi kecil ini.oke langsung saja bagaimana cara installnya. karena cara installnya juga sangat sangat mudah sekali - download dulu applikasinya disini 1. ekstrak applikasi yang baru saja di download  2. klik dua kali aplikasi installernya atau .msi aplikasinya,dan kemudian klik next ketika sudah keluar atau tombol next seperti pada gambar 3...
Posting Komentar
Baca selengkapnya

Penggunaan data variable visual basic

seperti halnya php dan pemrograman lainnya, didalam visual basic juga terdapat istilah data dan variable. namun aturan penulisan variabel pada visual basic ini sedikit berbeda dengan pemrograman php dan pemrograman lainnya. sehingga kita juga harus mengetahui dan memahami penggunaan data dan variable visual basic dan kita juga harus mengetahui dan memahami bagaimana aturan penulisan variabel pada visual basic karena data dan variable pada visual basic akan sering digunakan dalam setiap pembuatan program atau applikasi dengan visual basic nantinya. seperti biasa sebelum kita memulainya maka izinkan diri ini terlebih dahulu untuk mengucapkan salam sobat semua Alhamdulillahi Robbil 'alamiin segala puji bagi Allah pencipta semesta alam ini yang telah memberikan nikmat kepada diri ini secara gratis sehingga diri ini bisa menulis dan berbagi dalam tulisan ini. dan tak lupa sholawat serta salam akan tetap tercurah dan terpanjatkan untuk baginda Sayyidina Muhammad ibni Abdillah beserta kep...
Posting Komentar
Baca selengkapnya