Bootstrap merupakan library framework CSS yang telah dibuat khusus untuk mengembangkan front end disebuah website.
Bootstrap adalah framework CSS, HTML, Javascript yang sangat populer. Jadi singkat penjelasannya adalah Bootstrap itu akan membantu kita dalam hal membangun sebuah website dan didalam bootstrap sendiri sudah ada folder yang berisikan CSS. Jadi kita tinggal memanggil nama sesuai dengan yang ada di CSS nya .
Navbar disini itu untuk penempatannya yaitu di sebelah kiri atas. Baiklah langsung saja, pertama – tama kita harus download dulu file Bootstrap di websitenya Bootstrap. Setelah sudah kalian download, kalian compressed dan pastikan namanya sesuai dengan project yang akan kalian buat.
Setelah sudah ter-compressed kalian buka folder Bootstrap kalian lalu bikin file bernama index.html. Lalu isikan source code sebagai berikut :
index.html
<!DOCTYPE html> <html> <head> <title>Belajar Membuat Navbar</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </head> <body> <!-- navbar --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="https://dosenit.com/wp-content/uploads/2020/10/html.jpg" class="image" border="0" width="30" height="30"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only"> (current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="">beli paket</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">HTML</a> <a class="dropdown-item" href="#">CSS</a> <a class="dropdown-item" href="#">PHP</a> <a class="dropdown-item" href="#">MYSQL</a> <a class="dropdown-item" href="#">JAVASCRIPT</a> <a class="dropdown-item" href="#">JQUERY</a> </div> </li> </ul> </div> </nav> <!-- End Navbar --> </div> </body> </html>
Untuk<href="#">kalian ganti # dengan link sesuai source code kalian. Contoh :<href="index.html">Jadi nanti ketika kalian klik akan masuk ke menu index.html. Jadi kalau kalian ingin mengambil data CSS di Bootstrap kalian tinggal memasukkan data berikut ini di bagian atas :
<link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs /font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com /bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384- MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384- q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3 /umd/popper.min.js" integrity="sha384- ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3 /js/bootstrap.min.js" integrity="sha384- ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Jadi Script tersebut bisa kalian ambil juga di website nya Bootstrap .
