Langsung ke konten utama

CARA MEMBUAT NAVBAR DENGAN CODE BOOTSTRAP

 Cara Membuat Navbar dengan 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 bootstrapnya 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
  9. Contoh kita akan membuat navbar dengan warna background orange, maka kita gunakan class bg-warning
        <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.
  10. 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:
  11. <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> 

Waktu Pelaksanaan08.00WIB-16.30WIB
Kesimpulan
Sekian dari saya mengenai cara membuat navbar dengan bootstrap. Semoga bermanfaat,
-Penutup
Berikut laporan magang saya pada blog ini maaf jika ada kekurangan pada blogg ini mohon dimaafkan,terma kasih

Komentar

Posting Komentar

Postingan populer dari blog ini

TUTORIAL MEMBUAT BLOGGER DAN MENGGUNAKAN NYA

Sebelum lanjut ke cara- cara nya apakah kalian tau ga apa itu Blogger? Blogger adalah seseorang yang menjalankan dan mengontrol sebuah blog. Dia berbagi pendapat dan pengetahuannya tentang berbagai topik untuk audiens target. digunakan agar orang bisa menulis tentang kegiatan mereka sehari-hari. Aktivitas sehari-hari atau pikiran mereka menjadi konten untuk situs mini yang mereka miliki, di mana mereka akan merekam pendapat, cerita, foto, dan video. Beberapa situs mini ini juga bisa mendapatkan pengikut, dan akhirnya lahir hobi blogging bagi sebagian orang.sebelum lanjut ke tahap nya,Kalian dapat membuat Blogger dengan menggunakan Laptop atau Komputer, dan Handphone.  Berikut Tahap-Tahap membuat blogger :   1.Buka Aplikasi Chrome 2.Ketik " Blogger " pada situs 3.Setelah masuk website " Blogger " kita akan diminta sign in atau create your blog 4.Jika sudah memiliki akun langsung saja sign in dan jika belum memiliki akun klik create your blog 5.Setelah sig in ka...
Posting Komentar
Baca selengkapnya

CARA MENGGUNAKAN GOOGLE TREND

  Pengertian Google Trends adalah fitur tren pencarian yang berguna untuk menunjukkan seberapa sering sebuah kata kunci atau topik tertentu dimasukkan dalam mesin pencari Google. Google Trends bekerja dengan menampilkan data tentang kata kunci yang kamu cari. Data tersebut akan disajikan dalam bentuk grafik yang memiliki skor mulai dari nol hingga 100. 1.Tahap pertama kalian search di google "Google Trend" Setelah kalian search kalian akan di tampilkan halaman awal seperti gambar di bawah ini. 2.Tahap Kedua kalian bisa masukkan topik yang akan kalian cari,berikut  contoh gambar di bawah ini. 3.Tahap Ketiga kalian bisa klik gambar di bawah ini. 4.Setelah kalian klik gambar seperti gambar di atas kalian bisa mengubah nya ke dua nya untuk membandingkan nya. 5.pada tahap kelima kalian bisa melihat mana yang sedang trend dan mana yang lebih dominan,kalia juga bisa tau mana yang akan di jadikan judul artikel. 6.tahap ke enam ini kalian bisa langsung melihat topik yang sedang trend ...
Posting Komentar
Baca selengkapnya