Cara Membuat Navbar dengan menggunakan Bootstrap

Navbar merupakan suatu navigasi pada web yang umumnya terletak di atas taman. Navbar mempunyai guna buat berikan petunjuk pengguna melalui data menu/ jenis yang diberikan, Sehingga user dapat dengan gampang berpindah taman bersumber pada link yang diberikan lewat navigasi bar tersebut. Kali ini aku hendak share serta mangulas secara lengkap metode membuat navbar dengan bootstrap. 

Konfigurasi Bootstrap

Sebelum kita membuat navbar dengan bootstrap, maka tentunya kita perlu konfigurasi css bootstrap nya terlebih dahulu ya, ada dua metode yang bisa kita gunakan yang pertama adalah metode dengan teknik CDN (Content Delivery Network) dengan teknik ini kita dapat langsung menggunakan bootstrap melalui koneksi jaringan internet tanpa perlu instalasi atau download ke lokal drive kita. Berikut ini adalah beberapa file yang dibutuhkan untuk membuat navbar. Diantaranya css bootstrap dengan versi 4.3.1, Jquery dengan versi 3.4.1 popper.js dan js dari bootstrap sendiri.

<!-- Load file CSS Bootstrap dengan CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Jika kalian tidak ingin menggunakan metode CDN, maka kalian perlu mendownload file2 tersebut kedalam lokal driver kalian. Lalu kemudian di panggil dari dalam tag <head>.

Oke langsung saja buat sebuah file bisa dengan format html maupun php. Copy script dibawah ini, lalu coba jalankan di browser.

<!DOCTYPE html>
<html>
<head>
    <!-- Load file CSS Bootstrap melalui CDN-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body><div class="container">
    <nav class="navbar navbar-expand-sm bg-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
        </ul>
    </nav>

</body></html>
Dari Script program diatas akan menghasilkan navbar dengan tipe standar ya, seperti pada gambar berikut:
navbar standar
Dengan Bootstrap kita bisa membuat navbar dengan berbagai warna dan juga fitur tambahan, seperti menambahkan logo, menu dropdown dan collaps. Simak pembahasan dibawah ini:
Medifikasi Warna Navbar
Didalam bootstrap terdapat bermacam-macam warna yang bisa kita gunakan untuk navbar yang kita buat. Caranya juga sangat mudah kita cukup memanggil class bg-color pada element navbarnya.
  1. bg-primary
  2. bg-success
  3. bg-info
  4. bg-warning
  5. bg-danger
  6. bg-secondary
  7. bg-light
  8. bg-dark
Contoh kita akan membuat navbar dengan warna background orange, maka kita gunakan class bg-warning
  1.     <nav class="navbar navbar-expand-sm bg-warning">
    .........
    </nav>
    mengatur warna navbar di bootstrap
    Kalian bisa coba sendiri dengan warna yang lain berdasarkan class background yang saya sebutkan diatas.
  2. Navbar dengan Logo Gambar
    Selanjutnya dengan bootstrap kita juga dapat membuat navbar dengan style logo didalamnya. Fitur ini bisa kita pakai untuk memasang logo website kita. Caranya kita perlu menambah tag <a> lalu di ikuti dengan atribut class=’navbar-brand’. Contohnya seperti pada sintak dibawah ini
    <nav class="navbar navbar-expand-sm bg-dark navbar-light">
  <a class="navbar-brand" href="#">
     <img src="apple.png" alt="Logo" style="width:40px;">
  </a>
  ...
</nav> 
    navbar dengan logo
    Navbar dengan Menu DropDown
    Selanjutnya kita juga bisa membuat menu dropdown di navbar. Yang perlu kita lakukan adalah memanggil class dropdown pada list item di navbar yang kita buat. Untuk lebih jelasnya perhatikan sintak dibawah ini:
  3. <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <!-- Brand -->
        <a class="navbar-brand" href="#">
            <img src="apple.png" alt="Logo" style="width:40px;">
        </a>

        <!-- Links -->
        <ul class="navbar-nav">
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    Dropdown link
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>
        </ul>
    </nav>
Tahap pertama kita panggil dulu class nav-item dropdown nya kemudian dri item tersebut ketika di klik maka akan muncul list item dropdown-nya.
navbar dengan menu dropdown
Navbar dengan Form dan Button
Selanjutny kita dapat membuat navbar yang didalamnya terdapat form input dan button. Saya sering lihat fitur ni sering digunakan oleh website yang biasanya menggunakan template dari bootstrap. Untuk membuatnya kita cukup menambahkan tag <form> didalam navbar yang kita buat. Yang perlu diperhatikan sebaiknya form menggunakan class form-inline sehingga komponen form akan sejajar dengan navbar-nya.
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="#">
    <input class="form-control mr-sm-2" type="text" placeholder="Cari">
    <button class="btn btn-primary" type="submit">Cari</button>
  </form>
</nav> 
navbar dengan form input dan button
Navbar dengan fitur Collaps
Terakhir, kita dapat menambahkan fitur Collaps untuk membuat efek responsive navbar. Jadi ketika navbar dibuka pada layar smartpohe dapat di buka dengan tombol collaps
 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav> 
Sekian dari saya mengenai cara membuat navbar dengan bootstrap. Semoga bermanfaat, dan inilah laporan magang saya pada blog ini maaf jika ada kekurangan pada blogg ini mohon dimaafkan, terima kasih.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara membuat Kalender Konten di Spreadsheet

Gambar
Pada hari kedua kami magang, kami diajarkan cara membuat kalender konten di Spreadsheet.  Apa itu Kalender Konten?, Pada dasarnya konsep dari konten berjudul kalender di media sosial menjadi agenda seputar ketentuan tipe serta waktu konten yang hendak di posting. Penafsiran konten kalender ini lebih fokus kepada proses posting di media sosial yang kalian pakai. Wujud konten media sosial dengan tema kalender ini dapat berikan penunjang pekerjaan di sebagian zona. Sehingga sosial media specialist ini dapat memberikan konsep yang menarik serta seluruhnya dapat dikelola lebih menarik. Untuk itu kita akan membuatnya di Spreadsheet. Namun kita tidak tau, Apa itu Spreadsheet?. Spreadsheet adalah sebuah program komputer yang digunakan untuk menyimpan, menampilkan, serta mengolah data dalam bentuk baris dan kolom. Baris biasanya menggunakan label angka 1,2,3 dan seterusnya, Sedangkan kolom menggunakan label abjad seperti A, B, C, dan seterusnya. Kurang lebih aplikasi ini mirip seperti Micro...
Baca selengkapnya

Cara Login dan membuat blog di Blogger untuk Pemula Melalui di Laptop

Gambar
Blogger ialah suatu platform kepunyaan Google yang menyediakan hosting serta alamat web secara gratis. Namun perlu diketahui, bahwa alamat Web ataupun web kita nantinya, buka www.namablog.blogspot.com. Blogger merupakan orang yang membuat ataupun mempunyai serta mengelola web, memberikan pemikiran dan perspektif kepada audiens buat tujuan individu ataupun bisnis. Sebab kita memakai platform dari Google. Ini namanya sub domain. Jika hosting, secara sederhana merupakan tempat file yang hendak kita posting ataupun upload di web kita. Berikut merupakan metode Login Web lewat Blogger buat pendatang baru:  1. Pertama-tama, buka browser (Google atau Microsoft Edge) di komputer anda dan langsung kunjungi alamat www.blogger.com 2. Anda akan langsung dibawa ke halaman utama blogger, untuk membuat blog baru, dari halaman utama ini klik saja "Create Your Blog". Disini kebetulan komputer saya menggunakan bahasa Inggris Silahkan disesuaikan. 3. Kemudian, siapkan akun Email (Gmail), sekaran...
Baca selengkapnya