A. Navs Bootstrap
Nav atau navs adalah singkatan dari navigation, nav merupakan komponen yang disediakan oleh bootstrap untuk membuat navigasi pada website. Navigasi adalah sebuah komponen yang biasanya terdiri dari beberapa link atau hyperlink yang berbentuk seperti menu.
Biasanya navs atau navigasi berguna sebagai menu yang mengarahkan pengunjung ke halaman-halaman website sesuai keinginan.
1. Navigasi Dengan Bootstrap
Untuk membuat navigasi atau navigation kita bisa menggunakan class .nav yang sudah disediakan oleh bootstrap, selanjutnya di dalam elemen .nav buat item-item elemen .nav dengan menggunakan class .nav-item.
Pada contoh ini dibuat menu navigasi menggunakan elemen list HTML untuk membuat komponen navs bootstrap.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<center>
<h3>Tutorial Membuat Navigasi Bootstrap</h3>
</center>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontak Kami</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Tentang</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Berita</a>
</li>
</ul>
</div>
</body>
</html>
Atau kita juga bisa menggunakan elemen <nav> dan langsung mengisi link (<a> .. </a>) di dalamnya.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<center>
<h3>Tutorial Membuat Navigasi Bootstrap</h3>
</center>
<nav class="nav">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Kontak Kami</a>
<a class="nav-link disabled" href="#">Tentang</a>
<a class="nav-link" href="#">Berita</a>
</nav>
</div>
</body>
</html>
Untuk membuat menu navigasi atau navigation (Navs) gunakanlah class .nav, kemudian item-item dari navigasi ini kita buat dengan hyperlink yang kita beri class .nav-item, selanjutnya kemana link tersebut akan diarahkan ketika diklik bisa kita isi sesuai keinginan.
Hasilnya :
2. Mengubah Posisi Navigasi
Untuk mengubah posisi dari menu navigasi, kita bisa gunakan class .justify-content-center untuk meletakkan menu navigasi ke tengah, class .justify-content-end untuk mengubah posisi navigasi ke sebelah kanan. Kedua class tersebut bisa digunakan salah satunya untuk diletakkan beriringan dengan class .nav.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<center>
<h3>Tutorial Membuat Navigasi Bootstrap</h3>
</center>
<h4>Menu navigasi di kiri</h4>
<nav class="nav">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Kontak Kami</a>
<a class="nav-link disabled" href="#">Tentang</a>
<a class="nav-link" href="#">Berita</a>
</nav>
<br/>
<h4>Menu navigasi di tengah</h4>
<nav class="nav justify-content-center">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Kontak Kami</a>
<a class="nav-link disabled" href="#">Tentang</a>
<a class="nav-link" href="#">Berita</a>
</nav>
<br/>
<h4>Menu navigasi di kenan</h4>
<nav class="nav justify-content-end">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Kontak Kami</a>
<a class="nav-link disabled" href="#">Tentang</a>
<a class="nav-link" href="#">Berita</a>
</nav>
</div>
</body>
</html>
Hasilnya :
3. Menu Navigasi Vertikal
Untuk membuat menu navigasi vertikal kita bisa gunakan class .flex-column.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<center>
<h3>Tutorial Membuat Navigasi Bootstrap</h3>
</center>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Kontak Kami</a>
<a class="nav-link disabled" href="#">Tentang</a>
<a class="nav-link" href="#">Berita</a>
</nav>
</div>
</body>
</html>
Hasilnya :
4. Menu Navigasi Tab
Untuk membuat menu navigasi yang berbentuk tab dengan bootstrap, kita bisa menggunakan komponen navs dengan menambahkan class .nav-tabs beriringan dengan class .nav.
Contoh :
<!DOCTYPE html>
<html>
<head> <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<center>
<h3>Tutorial Membuat Navigasi Bootstrap</h3>
</center>
<nav class="nav nav-tabs">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Kontak Kami</a>
<a class="nav-link disabled" href="#">Tentang</a>
<a class="nav-link" href="#">Berita</a>
</nav>
</div>
</body>
</html>
Hasilnya :
5. Menu Navigasi Pills
Menu navigasi pills sama seperti menu navigasi tabs, hanya berbedanya pada bentuk menu navigasi, jika menu navigasi tab berbentuk seperti tab, maka menu navigasi pills lebih berbentuk pil atau kapsul. Untuk membuat navigasi pills, kita bisa menggunakan class .nav-pills.
Contoh :
<!DOCTYPE html>
<html>
<head> <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<center>
<h3>Tutorial Membuat Navigasi Bootstrap</h3>
</center>
<nav class="nav nav-pills">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Kontak Kami</a>
<a class="nav-link disabled" href="#">Tentang</a>
<a class="nav-link" href="#">Berita</a>
</nav>
</div>
</body>
</html>
Hasilnya :
6. Menu Navigasi Dropdown
Bootstrap juga membuat komponen nav bisa memiliki komponen dropdown.
Contoh :
<!DOCTYPE html>
<html>
<head> <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Profil</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sejarah</a>
<a class="dropdown-item" href="#">Visi dan Misi</a>
<a class="dropdown-item" href="#">Profil Kepala Sekolah</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Tautan Kemdikbud</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontak</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link Nonaktif</a>
</li>
</ul>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
Contoh di atas kita menggunakan nav tab (.nav-tabs), jika ingin nav dropdown-nya dibuat dengan nav pills, bisa terapkan class .nav-pills seperti cara sebelumnya.
Hasilnya :
7. Membuat Navs Dengan Tab dan Pills
Dengan komponen navs, kita juga bisa membuat semacam komponen tab pada website, kegunaannya sangat banyak, salah satunya membuat tampilan ulasan, review dan lain-lain pada tampilan toko online.
Kita bisa membuat fitur tersebut dalam bentuk tab, jadi user tinggal melakukan klik pada judul-judul tab tergantung ingin menampilkan data ulasan, review atau lain-lain.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<h4>Membuat Komponen Tab</h4>
<br />
<nav>
<div class="nav nav-tabs" id="nav-tab">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab">Home</a>
<a class="nav-item nav-link" id="nav-profil-tab" data-toggle="tab" href="#nav-profil" role="tab">Profil</a>
<a class="nav-item nav-link" id="nav-kontak-tab" data-toggle="tab" href="#nav-kontak" role="tab">Kontak</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel">
<h4>Home</h4>
<p>Selamat datang di www.agussuratna.net </p>
</div>
<div class="tab-pane fade" id="nav-profil" role="tabpanel">
<h4>Profil</h4>
<p>Saya adalah guru di jurusan RPL</p>
</div>
<div class="tab-pane fade" id="nav-kontak" role="tabpanel">
<h4>Kontak</h4>
<p>Email : agussuratna@gmail.com</p>
</div>
</div>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
Pada contoh di atas kita membuat 3 buah tab, yaitu ada tab home, profil dan kontak. Judul tab kita buat dalam element <nav> .. </nav>, kemudian di dalam element nav kita buat class .nav dan di dalamnya lagi kita buat class .nav-item sebagai item-item dari judul atau nama tab yang ingin kita buat.
Kemudian dibagian class .tab-content kita membuat isi dari masing-masing tab, misalnya isi dari tab home, tab profil dan tab kontak.
Cara kerjanya masing-masing tab ditampilkan berdasarkan judul tab yang diklik, perhatikan pada judul-judul tab yang sudah kita buat, atribut href=”” dari masing-masing judul tab tersebut kita isi dengan nama masing-masing isi tab yang akan ditampilkan jika judul tab tersebut diklik, misalnya tab profil diklik, maka konten yang ditampilkan adalah kontan yang memiliki id “nav-profil“.
Hasilnya :
Untuk bentuk Navs Pills pada class .nav nav-tabs kita ganti dengan .na nav-pills
8. Membuat Tab Vertikal
Jika contoh sebelumnya membahas cara membuat navigasi tab yang berbentuk horizontal atau ke samping, pada sub judul ini kita akan membahas cara membuat tab yang berbentuk vertikal atau kebawah.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profil-tab" data-toggle="pill" href="#v-pills-profil" role="tab" aria-controls="v-pills-profil" aria-selected="false">profil</a>
<a class="nav-link" id="v-pills-kontak-tab" data-toggle="pill" href="#v-pills-kontak" role="tab" aria-controls="v-pills-kontak" aria-selected="false">Kontak</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<h4>Home</h4>
<p>Selamat datang di www.agussuratna.net</p>
</div>
<div class="tab-pane fade" id="v-pills-profil" role="tabpanel" aria-labelledby="v-pills-profil-tab">
<h4>Profil</h4>
<p>Saya adalah guru di jurusan RPL</p>
</div>
<div class="tab-pane fade" id="v-pills-kontak" role="tabpanel" aria-labelledby="v-pills-kontak-tab">
<h4>Kontak</h4>
<p>Email : agussuratna@gmail.com</p>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
Hasilnya :
B. Navbar Bootstrap
Navbar adalah singkatan dari navigation bar, merupakan komponen website yang berupa menu yang biasanya diletakkan pada header website.
Komponen navbar biasanya digunakan untuk membuat menu navigasi yang terletak pada bagian header website. bisa kita sebut sebagai menu utama dari sebuah website karena terletak dibagian header yang paling atas.
Komponen navbar sangat powerfull dan responsive, pada navbar juga bisa kita letakkan logo atau nama website, atau bahkan nama dan logo sekaligus.
Untuk membuat komponen navbar bootstrap, perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head> <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">SMK Indonesia</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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profil</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">Tutorial</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Sejarah</a>
<a class="dropdown-item" href="#">Visi dan Misi</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Profil Kepala Sekolah</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link Nonaktif</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Cari" aria-label="Cari">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cari</button>
</form>
</div>
</nav>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
Navbar yang dibuat ini sudah responsive jika diakses dari layar yang berukuran kecil seperti smartphone.
Hasilnya :
Pada menu navigation bar di atas terdapat beberapa komponen yang sudah kita buat, diantaranya adalah judul website yang di contoh di atas saya buat dengan “SMK Indonesia”, link menu dropdown, dan form pada navbar untuk form pencarian.
1. Membuat Logo Website Pada Navbar
Untuk menambahkan gambar logo pada navbar, bisa menambahkan element <img> di tengah-tengah class .navbar-brand.
Contoh :
<!DOCTYPE html>
<html>
<head> <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Navbar Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="Agus Suratna">
</a>
</nav>
<br>
<br>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="Agus Suratna">
agussuratna.net
</a>
</nav>
</div>
</body>
</html>
Pada class .navbar-brand yang pertama, kita tampilkan dengan gambar, pada element <img> kita juga memberi pengaturan lebar sebesar 30px dan tinggi 30px.
Pada class .navbar-brand yang kedua kita menampilkan judul website dan logo sekaligus.
Hasilnya :
2. Menambah Elemen Lain ke Navbar
Pada sub bab ini kita akan membuat navbar dengan menambahkan text atau tombol ke navbar, misal menambahkan tombol login dan tombol daftar atau register pada bagian pojok kanan navbar.
Menambahkan Tombol
Untuk menambahkan elemen atau komponen tombol pada navbar, kita bisa menambahkannya pada bagian navbar seperti contoh berikut :
<!DOCTYPE html>
<html>
<head> <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Navbar Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">agussuratna.ne</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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tentang</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">
Profil
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Sejarah</a>
<a class="dropdown-item" href="#">Visi dan Misi</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Profil Kepala Sekolah</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link Nonaktif</a>
</li>
</ul>
<a href="#" class="btn btn-outline-success mr-3">Login</a>
<a href="#" class="btn btn-outline-danger">Daftar</a>
</div>
</nav>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
ppada contoh di atas, kita menambahkan 2 buah link tombol pada navbar, yaitu class .btn btn-outline-success mr-3 (Login) dan class .btn btn-outline-danger (Daftar), pada tombol login kita tambahkan class .mr-3, agar ada jarak margin pada tombol login, margin dengan bootstrap akan dibahas di tutorial selanjutnya.
Hasilnya :
Menambahkan Text
Tidak hanya tombol, kita juga bisa menambahkan text pada navbar.
Contoh :
<!DOCTYPE html>
<html>
<head> <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Navbar Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">SMK Indonesia</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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profil</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">Tutorial</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Sejarah</a>
<a class="dropdown-item" href="#">Visi dan Misi</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Profil Kepala Sekolah</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link Nonaktif</a>
</li>
</ul>
<span class="navbar-text mr-3">
Silahkan login atau daftar akun
</span>
<a href="#" class="btn btn-outline-success mr-2">Login</a>
<a href="#" class="btn btn-outline-danger">Daftar</a>
</div>
</nav>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
Hasilnya :
3. Mengubah Posisi Menu
Semua menu yang ada pada navbar yang kita buat sebelumnya berada di sebelah kiri, kita bisa memindahkan menu tersebut ke sebelah kanan. caranya pada class .navbar-nav, ada class .mr-auto, kita ubah class .mr-auto menjadi .ml-auto, sehingga posisi menu akan pindah ke kanan.
Contoh :
<!DOCTYPE html>
<html>
<head> <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Navbar Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">SMK Indonesia</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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profil</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">Tutorial</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Sejarah</a>
<a class="dropdown-item" href="#">Visi dan Misi</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Profil Kepala Sekolah</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link Nonaktif</a>
</li>
</ul>
</div>
</nav>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
Hasilnya :
4. Mengubah Warna Navbar Bootstrap
Untuk mengubah warna navbar ada 2 buah class yang bisa kita pakai. yaitu class .navbar-light dan .bg-light yang ada pada bagian class .navbar.
Class .navbar-light bertujuan untuk mengatur warna tulisan pada navbar, ada 2 pilihan :
- navbar-light
digunakan untuk membuat tulisan navbar berwarna hitam - navbar-dark
digunakan untuk membuat tulisan navbar berwarna putih
Kemudian class .bg-light berguna untuk pengaturan warna background navbar, ada beberapa pilihan class yang bisa menggantikan class .bg-light, yaitu :
- .bg-primary
navbar berwarna biru - .bg-success
navbar berwarna hijau - .bg-danger
navbar berwarna merah - .bg-warning
navbar berwarna kuning - .bg-info
navbar berwarna hijau toska - .bg.dark
navbar berwarna gelap - .bg-light
navbar berwarna terang
Contoh :
<!DOCTYPE html>
<html>
<head> <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Navbar Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<!-- navbar primary (biru)-->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">SMK Indonesia</a>
<span class="navbar-text">
Navbar Primary
</span>
</div>
</nav>
<br/>
<!-- navbar success (hijau)-->
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<div class="container">
<a class="navbar-brand" href="#">SMK Indonesia</a>
<span class="navbar-text">
Navbar Success
</span>
</div>
</nav>
<br/>
<!-- navbar danger (merah)-->
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<div class="container">
<a class="navbar-brand" href="#">SMK Indonesia</a>
<span class="navbar-text">
Navbar danger
</span>
</div>
</nav>
<br/>
<!-- navbar warning (kuning)-->
<nav class="navbar navbar-expand-lg navbar-dark bg-warning">
<div class="container">
<a class="navbar-brand" href="#">SMK Indonesia</a>
<span class="navbar-text">
Navbar warning
</span>
</div>
</nav>
<br/>
<!-- navbar info (hijau toska)-->
<nav class="navbar navbar-expand-lg navbar-dark bg-info">
<div class="container">
<a class="navbar-brand" href="#">SMK Indonesia</a>
<span class="navbar-text">
Navbar info
</span>
</div>
</nav>
<br/>
<!-- navbar gelap (hitam)-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">SMK Indonesia</a>
<span class="navbar-text text-white">
Navbar dark
</span>
</div>
</nav>
<br/>
<!-- navbar light (terang)-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">SMK Indonesia</a>
<span class="navbar-text">
Navbar Light
</span>
</div>
</nav>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
Hasilnya :
Referensi :
- https://getbootstrap.com/docs/4.3/components/navs
- https://getbootstrap.com/docs/4.3/components/navbar/
- https://www.malasngoding.com/navs-bootstrap-4/
- https://www.malasngoding.com/navbar-bootstrap-4/