Cara membuat NavBar dengan bootstrap(responsive)
petama-tama saya akan mejelaskan apa itu navbar dan apa itu bootstrap?
NavBar atau navigasi bar adalah suatu kotak yang berisi,biasanya logo website atau blog,link,kotak pencarian dan lain-lain
sedangkan bootstrap adalah.....
oke....... langkah pertama untuk membuat NavBar dengan Bootstrap adalah:
1.siapkan file bootstrap yang berisi css,js,font
kalian bisa download dulu di google,yahoo atau yang lain
ini tampilnya
.....
2.kalau sudah download pastikan kalian mempunyai aplikasi Xampp,text editor,browser
Xampp adalah aplikasi
3.buka text editornya .... saya memmakai sublime text untuk text editornya
sebelum membuat file index.html,buatlah folder benama navbar
buat file bernama index.html
save ke dalam folder navbar didalam htdocs
ini scriptnya
<html>
<head>
<title>Latihan Navbar</title>
<link href="css/bootstrap.min.css" rel="stylesheet"><!--memanggil file bootstrap.min.css-->
</head>
<body>
<!--navbar_pertama--><br><br><br>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">KUTABANJARNEGARA</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="index.hrml">ARTIKEL</a></li>
<li><a href="index.html">GALERI</a></li>
<li><a href="index.html">WILAYAH</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://twitter.com/SBootstrap"><span class="glyphicon glyphicon-send"></span> Login ke twitter</a></li>
<li><a href="https://facebook.com/SBootstrap"><span class="glyphicon glyphicon-phone"></span> Login ke facebook</a></li>
</ul>
</div>
</nav>
<script src="js/jquery.min.js"></script><!--memanggil file jquery.min.js-->
<script src="js/bootstrap.min.js"></script><!--memanggil filebootstrap.min.js-->
</body>
</html>
4.copy file bootstrap yang kalian download kedalam folder navbar
yang dicopy css,js,font
5.buka aplikasi xampp , aktifkan apache
6.buka browser dan ketikan di urlnya "localhost/navbar"
tampilanya akan seperti ini....
7.jika memakai bootstrap kalau browsernya di perkecil maka navbar akan menyesuaikan dengan browser...
....itu salah satu kegunaan bootstrap
petama-tama saya akan mejelaskan apa itu navbar dan apa itu bootstrap?
NavBar atau navigasi bar adalah suatu kotak yang berisi,biasanya logo website atau blog,link,kotak pencarian dan lain-lain
sedangkan bootstrap adalah.....
oke....... langkah pertama untuk membuat NavBar dengan Bootstrap adalah:
1.siapkan file bootstrap yang berisi css,js,font
kalian bisa download dulu di google,yahoo atau yang lain
ini tampilnya
.....
2.kalau sudah download pastikan kalian mempunyai aplikasi Xampp,text editor,browser
Xampp adalah aplikasi
3.buka text editornya .... saya memmakai sublime text untuk text editornya
sebelum membuat file index.html,buatlah folder benama navbar
buat file bernama index.html
save ke dalam folder navbar didalam htdocs
ini scriptnya
<html>
<head>
<title>Latihan Navbar</title>
<link href="css/bootstrap.min.css" rel="stylesheet"><!--memanggil file bootstrap.min.css-->
</head>
<body>
<!--navbar_pertama--><br><br><br>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">KUTABANJARNEGARA</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="index.hrml">ARTIKEL</a></li>
<li><a href="index.html">GALERI</a></li>
<li><a href="index.html">WILAYAH</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://twitter.com/SBootstrap"><span class="glyphicon glyphicon-send"></span> Login ke twitter</a></li>
<li><a href="https://facebook.com/SBootstrap"><span class="glyphicon glyphicon-phone"></span> Login ke facebook</a></li>
</ul>
</div>
</nav>
<script src="js/jquery.min.js"></script><!--memanggil file jquery.min.js-->
<script src="js/bootstrap.min.js"></script><!--memanggil filebootstrap.min.js-->
</body>
</html>
4.copy file bootstrap yang kalian download kedalam folder navbar
yang dicopy css,js,font
5.buka aplikasi xampp , aktifkan apache
6.buka browser dan ketikan di urlnya "localhost/navbar"
tampilanya akan seperti ini....
7.jika memakai bootstrap kalau browsernya di perkecil maka navbar akan menyesuaikan dengan browser...
....itu salah satu kegunaan bootstrap
ini tutorialnya