Hai semuanya!

Ini adalah website lama kami, pada akhir agustus 2020 website ini akan di ahlikan ke https://sekolahprogram. Website yang baru Anda bisa diskusi, membuat artikel dan membagikan karya aplikasi mu.


New Sekolah Program

Bootstrap 4 – Navbar

Febri Hidayan Komentar

Bootstrap 4 – Navbar

Pada pembuatan suatu website baik untuk bisnis maupun pribadi, navbar peran yang paling utama agar struktur menu akan lebih baik lagi. Proses pembuatan navbar cukup panjang, mulai menyusun ketika ukuran browser, menentukan menu, dropdown dan lainnya. Kita bisa lihat hasilnya dibawah ini.

Kode Navbar - Bootstrap 4
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Sekolah Program</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-md-0">
      <input class="form-control" type="text" placeholder="Search" aria-label="Search">
    </form>
  </div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Sekolah Program</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar1">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-md-0">
        <input class="form-control" type="text" placeholder="Search" aria-label="Search">
      </form>
    </div>
  </div>
</nav>

Setidaknya kita bisanya memiliki keburukan dalam pembuatan navbar yaitu tinggal copy paste. Akan tetapi kalau kita ingin mempelajarinya itu bukan semua masalah, tetapi kalau kita ingin langsung saja tinggal copy paste biasanya keinginan kita untuk melihat hasilnya. Kalau seperti itu kita bisa lihat penjelasan dari beberapa class pada navbar.

  • Navbar dan navbar-dark class utama untuk membuat navbar (wajib).
  • Navbar-expand-md sebagaimana untuk menentukan posisi navbar, jadi apabila ukuran browser mobile maka tampilannya akan berubah. Ada sm, md, lg.
  • Navbar-brand sebagai logo atau nama website kita.
  • Navbar-collapse dan collapse merupakan hal wajib digunakan apabila menu kita pada halaman mobile posisi menu akan di dropdown dengan class navbar-toggler dan menggunakan class navbar-toggler-icon sebagai iconnya.

Jika ada kesalahan dan kata yang tidak mengerti pada pembahasan kita kali ini saya mohon maaf J

Category Bootstrap


Mari Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *