Cara menggunakan membuat navbar dengan bootstrap

Question

Melanjutkan tutorial saya yang kemarin tentang breadcrumb sekarang saya akan membuat tutorial yang gak beda jauh dengan breadcrumb yaitu membuat navbar pada website dengan menggunakan bootstarp 4.

Table of Contents Show

Menampilkan Judul Pada Navbar
Button toggler
Membuat Menu pada Navbar
Cara membuat menu dropdown sederhana
Membuat Navigation Bar Pada Bootstrap
Dropdown Menu Pada Navigation Bar Bootstrap
Menu Navigation Responsive Di Bootstrap
Apa itu navbar pada bootstrap?
Navigasi bar itu apa?
Manakah Class pada bootstrap yang digunakan untuk membuat navigasi tetap berada di atas?

Seperti namanya navbar berfungsi sebagai navigasi bar, tempat menyimpan menu dalam sebuah website. Cara membuat navbar dengan bootstrap 4 adalah dengan menggunakan tag html "nav".

Baca Juga : Membuat breadcrumb dengan bootstrap 4


//isi dari navbar

Kode html di atas adalah contoh sederhana dari navbar light dengan bacground warna dark. Untuk mengganti bacground pada navbar kamu dapat mengganti "bg-dark" dengan bg{-primary | -secondary | -success | -danger | -warning | -info | -light | -dark | -white}. Sedangkan tema dari warna navbar kamu dapat mengganti "navbar-dark" dengan navbar{-primary | -secondary | -success | -danger | -warning | -info | -light | -dark | -white}. Untuk expand navbar kamu dapat menambahkan class navbar-expand{-sm|-md|-lg|-xl}.

Sekarang saya akan tambahkan gambar, link, dan tulisan untuk nemampilakn judul pada navbar dengan cara memasukan kode html di bawah ini pada html tag nav.

  
    
    [RumahCode.ORG]

Button toggler

Untuk membuat navbar menjadi responsive dan dapat memunculkan menu ketika browser dikecilkan ukuran nya kita membutuhkan button toggler dengan menambahkan kode html di bawah ini setelah kode di atas

Sekarang kita buat menu pada navbar dengan menggunakan tag ul,li



      
        Bootstrap 4 - 04.1: Component
      
      
        Bootstrap 4 - 04.2: Image Slide

sehingga kode html membuat navbar dan menu nya kan menjadi seperti ini


  
    
    [RumahCode.ORG]
  
  
    
    


      
        Bootstrap 4 - 04.1: Component
      
      
        Bootstrap 4 - 04.2: Image Slide

contoh kode html di atas adalah contoh untuk membuat navbar sederhana. Bagaimana caranya membuat menu dropdown pada navbar? cara membuat menu dropdown dengan bootstrap 4 adalah memambahkan kode html di bawah ini

  
        
          Bootstrap 4 - 03.1: Content
          Bootstrap 4 - 02.3: Layout pada Bootstrap 4
          
          Tutorial Dasar Bootstrap 4

sehingga menjadi seperti ini


  
    
    [RumahCode.ORG]
  
  
    
    


      
        Bootstrap 4 - 04.1: Component
      
      
        Bootstrap 4 - 04.2: Image Slide
        

        
          Bootstrap
        
  
        
          Bootstrap 4 - 03.1: Content
          Bootstrap 4 - 02.3: Layout pada Bootstrap 4
          
          Tutorial Dasar Bootstrap 4

Jika kamu masih bingung dengan cara membuat navbar, menu, atau membuat sub menu dropdown dengan menggunakan bootstrap 4 kamu dapat melihat demo dan mengoprek nya sehingga kamu dapat mengerti bagaimana caranya membuat navbar dengan menu dropdwon sederhana

lebakcyber.net – Membuat Navigation bar menggunakan bootstrap. Pada kesempatan kali ini kita akan belajar mengenai bagaimana cara untuk membuat sebuah navigation bar pada bootstrap.

Cara untuk membuat sebuah navigation bar pada Bootstrap tidak begitu sulit. Seperti pada tutorial-tutorial mengenai bootstrap yang sebelumnya sudah banyak kita bahas, kita hanya memerlukan penambahan class-class yang telah disediakan bootstrap.

Di tutorial belajar bootstrap kali ini kita akan mempelajari mengenai bagaimana membuat sebuah menu navigasi dengan cepat dan juga mudah. Bootstrap sendiri menyediakan dua buah warna pada navigtaion bar, yaitu default dan juga inverse yang akan kita bahas secara detail pada artikel ini.

Advertisements

<div class="container-fluid">

Class “navbar-header” digunakan untuk membuat header dari menu navigation pada bootstap dan juga digunakan untuk mendefinisikan suatu header pada menu navigation serta class “navbar-brand” untuk mendefinisikan judul dari suatu website seperti dibawah ini :

<div class="navbar-header">
     <a class="navbar-brand" href="https://www.lebakcyber.net">Lebak Cyber</a>
</div>

Dan untuk membuat link pada menu navigation kita harus memanggil class “nav navbar-nav” seperti dibawah ini :

<ul class="nav navbar-nav">
        <li class="active"><a href="https://www.lebakcyber.net">Home</a></li>
        <li><a href="#">Artikel</a></li>
        <li><a href="#">Tentang Kami</a></li>
        <li><a href="#">Portofolio</a></li> 
        <li><a href="#">Kontak</a></li> 
</ul>

Untuk membuat sebuah link menu yang ada pada bagian kanan dari sebuah menu navigation pada bootstrap, kita menggunakan class “nav navbar-nav navbar-right” seperti dibawah ini :

<ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
</ul>

Sekarang kita akan mencoba membuat sebuah dropdown menu dengan menggunakan bootstrap yang ada didalam navigation bar, silahkan buat sebuah file index.html baru lalu masukan perintah seperti dibawah ini untuk membuat dropdown menu pada navigation bar.

<!DOCTYPE html>
<html>
<head>
    <title>Navigation bar Bootstrap - Lebakcyber.net</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="https://www.lebakcyber.net">Lebak Cyber</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="https://www.lebakcyber.net">Home</a></li>
                <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Artikel
            <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">PHP</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">Bootstrap</a></li>
                <li><a href="#">JavaScript</a></li>				
            </ul>
        </li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Portofolio</a></li> 
                <li><a href="#">Kontak</a></li> 
            </ul>
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
            </ul>
        </div>
    </nav>
    
    <h1>Contoh Navigation Bar Pada Bootstrap</h1> 
 
</body>
</html>

Nanti hasilnya akan seperti pada gambar dibawah ini :

Jadi untuk membuat sebuah dropdown menu pada navigation bar pada bootstrap kita harus memanggil class “dropdown-menu” seperti dibawah ini :

<ul class="dropdown-menu">
        <li><a href="#">PHP</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">Bootstrap</a></li>
        <li><a href="#">JavaScript</a></li>				
</ul>

Sekarang kita akan mencoba untuk membuat sebuah menu navigation yang responsive dengan menggunakan bootstrap agar pada saat halaman web dibuka pada smartphone ataupun monitor yang memiliki resousi yang kecil, menu tersebut dapat menyesuaikan sesuai dengan ukuran layarnya.

Untuk membuat menu navigation yang responsive pada bootstrap langsung saja kita praktekan caranya, silahkan buat sebuah file index.html baru lalu masukan perintah seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Navigation bar Bootstrap - Lebakcyber.net</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
   <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="https://www.lebakcyber.net">Lebak Cyber</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">				
                <li class="active"><a href="https://www.lebakcyber.net">Home <span class="sr-only">(current)</span></a></li>
                <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Artikel
            <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">PHP</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">Bootstrap</a></li>
                <li><a href="#">JavaScript</a></li>				
            </ul>
        </li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Portofolio</a></li> 
                <li><a href="#">Kontak</a></li> 
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div>
</nav>
 
<h1>Membuat Navigation Pada Bootstrap</h1> 
 
</body>
</html>

Nanti hasilnya akan seperti pada gambar dibawah ini :

Oke jadi seperti itulah bagiamana cara untuk membuat navigation bar pada bootstrap, caranya cukup mudah bukan? Semoga tutorial sederhana ini bisa bermanfaat dan sampai jumpa pada tutorial belajar bootstrap selanjutnya.

Seperti namanya navbar berfungsi sebagai navigasi bar, tempat menyimpan menu dalam sebuah website. Cara membuat navbar dengan bootstrap 4 adalah dengan menggunakan tag html "nav".

Navigasi bar itu apa?

B.NavBar atau Navigation Bar adalah sebuah balok navigasi yang terletak di bagian atas halaman blog. Bentuknya kecil memanjang secara horizontal. NavBar berfungsi baik bagi pemilik atau pengunjungnya untuk melakukan hal-hal tertentu yang masih terkait dengan navigasi blog.

Manakah Class pada bootstrap yang digunakan untuk membuat navigasi tetap berada di atas?

Didalam Bootstrap untuk menggunakan standar navigasi bar kita gunakan class . navbar, lalu bisa kita ikutkan dengan fitur responsive collaps dengan beberapa ukuran standar yang diberikan seperti extra large, large, medium atau small.

kode bootstrap