cara membuat dan menggunakan boostrap4

ASSALAMUALAIKUM WR.WB

 

Nama : Agung Ramadhan


 Pada umumnya navbar mempunyai desain secara horizontal, namun dalam pengembangannya sekarang ada juga navbar secara vertikal. Hal ini ada kaitannya dengan perkembangan teknologi yang dulunya akses internet dilakukan lewat komputer PC/laptop kini sudah banyak yang menggunakan smartphone. Sehingga diperlukan navigasi bar yang responsive terhadap semua jenis perangkat yang mengaksesnya. Dengan framework CSS Bootstrap kita dapat membuat keduanya, baik horizontal maupun vertikal.

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.

Untuk Membuat link didalam navbar tersebut maka kita akan gunakan tag <ul> sedikit meriview tag <ul> meruakan tag untuk membuat list (daftar) dengan jenis tidak terurut (unordered list).

Baca pada : List di html

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>.


Rekomendasi : Cara menggunakan Bootstrap

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

    <nav class="navbar navbar-expand-sm bg-warning">
    .........

selanjutnya cara membuat navbar dengan boostrap 4

    </nav><nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
      <div class="container">

    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <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" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>


 Di atas adalah hasil dari membuat navbar dengan boostrap 4

Komentar

Posting Komentar