Bootswatch adalah tema buatan dari bootstrap, kita bisa memakainya dengan gratis, kalian bisa buka di link ini.. https://bootswatch.com/ . Di dalam Bootswatch kita bisa pakai class class yang sudah disediiakan dari beberapa tema dari bootswatch. di sana kalian bisa pilih sesuai kebutuhan dan selera kalian yah teman teman. Nah kali ini kita akan Membuat Navbar dengan Tema flatly Bootswatch .. ayo kita praktekan teman teman.
kalian ke link tadi https://bootswatch.com/ dan pilih tema flaty bootswatch, lihat contoh gambar
lalu kalian bisa klik download dan copy linknya, https://bootswatch.com/4/flatly/bootstrap.min.css
di tema in sudah di sediakan 3 navbar.
setelah itu kalian bisa buka text editor kalian dan ketikan kode berikut yah teman teman dan save file dengan nama index.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mmebuat Navbar dengan tema Flatly Bootswatch</title> <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-12"> <h4 class="text-center">Membuat Navbar dengan Tema Bootswatch</h4> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor01"> <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="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" placeholder="Search" type="text"> <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <br> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation" style=""> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor02"> <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="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" placeholder="Search" type="text"> <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <br> </div> </div> </div> </body> </html>
hasilnya seperti gambar di bawah ini.
nah mudah sekali bukan, disamping desainnya yang bagus di dalam bootswatch juga di sediakan banyak seklai tema tema untuk bootstrap.
sekian tutorial Membuat Navbar dengan Tema Flatly Bootswatch. Semoga bermanfaat yah teman teman
The post Membuat Navbar dengan Tema Flatly Bootswatch appeared first on Kursus Website Terbaik.