Membuat Top Fixed Responsive Navbar Twitter Bootstrap

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Top Fixed Responsive Navbar Twitter Bootstrap"

Agus Johan
7 tahun lalu
Tontonan:

2 Membuat Top Fixed Responsive Navbar Twitter Bootstrap Oleh: ricky orlando napitupulu Salam bro and sis :), selamat datang di tulisan tutorial pertama ane ni, makasi da mau singga disini ye walopun kesasar juga gapapa da :D cucok..., sekian salam dari saya, kalo mau kenal lebih lanjut PM aja ye, no MAHO :D kali ini ane mau ngasi tutorial buat bro n sis yaitu tentang framework css twitter bootstrap dengan judul membuat responsive top fix navbar dari framework css twitter boot... Salam bro and sis :), selamat datang di tulisan tutorial pertama ane ni, makasi da mau singga disini ye walopun kesasar juga gapapa da :D cucok..., sekian salam dari saya, kalo mau kenal lebih lanjut PM aja ye, no MAHO :D kali ini ane mau ngasi tutorial buat bro n sis yaitu tentang framework css twitter bootstrap dengan judul membuat responsive top fix navbar dari framework css twitter bootstrap ini, langsung aja gan ga usa banyak cingong Berikut penampakanya gambar menu navigasi ketika dilayar normal gambar menu navigasi ketika dilayar kecil gambar menu navigasi di klik icon menu nya pertama-tama buat sudah pasti kita siapkan dokumen html kita <!doctype html> <html> <head> <meta charset="utf-8">

3 </head> <body> </body> </html> nah selanjutnya download file yang akan kita gunakan yaitu twitter bootstrap reset.css, dan jquery semuanya bisa di download disini langkah selanjutnya ialah include beberapa file yang kita butuhkan tadi <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/reset.css" type="text/css"> <link rel="stylesheet" href="css/bootstrap.css" type="text/css"> <style type="text/css"> body {padding-top: 60px;} </style> <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css"> <script src="js/jquery.js"></script> <script src="js/bootstrap.js"></script> </head> <body> </body> </html> perhatikan code diatas saya menambahkan css padding-top nya, itu agar header halaman web kita tidak ditutupi oleh navbar tersebut Untuk memastikan kalau tahap ini sudah benar dilakukan anda dapat mengikuti langkah berikut : pertama tekan ctrl + u (view source) lalu klik link css dan js yang ada pokoke klik aja yang ada tulisan.css dan.js, nah jika saat diklik ditampilkan code maka itu pertanda sukses dan jika not found berarti peletakkan file masih salah. Cara mengatasinya coba perhatikan lagi struktur file nya atau bisa dilihat di file demo. langkah selanjutnya adalah tambahkan code berikut setelah body  <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span>

4 <span class="icon-bar"></span> </a> <a class="brand" href="#">bootstrap</a> <div class="nav-collapse"> <ul class="nav"> <li><a href="#"><i class="icon-home icon-black"></i> Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-film icon-black"></i> Features <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-envelope icon-black"></i> Features</a></li> <li><a href="#"><i class="icon-road icon-black"></i> Another action</a></li> <li><a href="#"><i class="icon-tint icon-black"></i> Something else here</a></li> <li class="divider"></li> <li class="nav-header">nav header</li> <li><a href="#"><i class="icon-fire icon-black"></i> Separated link</a></li> <li><a href="#"><i class="icon-heart icon-black"></i> One more separated link</a></li> </ul> </li> <li><a href="#"><i class="icon-picture icon-black"></i> Screenshoots</a></li> <li><a href="#"><i class="icon-comment icon-black"></i> Bug Reports</a></li> <li><a href="#"><i class="icon-heart icon-black"></i> Download</a></li> <li><a href="#"><i class="icon-info-sign icon-black"></i> FAQ</a></li> </ul>  <form class="navbar-form form-search pull-right" method="post" action=" accept-charset="utf-8"> <div class="input-append"> <input type="text" name="q" class="span2 search-query" placeholder="snipp or Tag"> <button type="submit" class="btn">search</button> </div> </form>  </div> </div> </div>

5 </div> Kostumisasi Judul <a class="brand" href="#">bootstrap</a> Daftar Menu <li><a href="#"><i class="icon-home icon-black"></i> Home</a></li> Icon Menu <i class="icon-home icon-black"></i> daftar class icon yang bisa digunakan menu tanpa icon hilangkan tag <i> sebelum anchor text nya <li><a href="#"> Home</a></li> Membuat Sub Menu <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-film icon-black"></i> Features <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-envelope icon-black"></i> Features</a></li> <li><a href="#"><i class="icon-road icon-black"></i> Another action</a></li> <li><a href="#"><i class="icon-tint icon-black"></i> Something else here</a></li> <li class="divider"></li> <li class="nav-header">nav header</li> <li><a href="#"><i class="icon-fire icon-black"></i> Separated

6 link</a></li> <li><a href="#"><i class="icon-heart icon-black"></i> One more separated link</a></li> </ul> </li> Nah jika sudah, save lalu coba preview di browser anda, dan taraaa... gimana cakep bukan :D Ok, sampai disini dulu tutorial kali ini, jika ada pertanyaan monggo di tulis dikotak komentar atau PM See You :D Required File : download Demo : download Tentang Penulis ricky orlando napitupulu Nothing special :) Saya seorang lelaki, mahasiswa, blogger, cinta musik dan juga sedang mencoba ilmu desain grafis. Tidak banyak pengetahuan yang bisa saya bagikan, Namun saya akan sangat senang membagikan pengetahuan tersebut bila dibutuhkan :).

dokumen-dokumen yang mirip

Tutorial Penggunaan Twitter Bootstrap

Tutorial Penggunaan Twitter Bootstrap Oleh: Gilang Sonar Amanu Terimakasih telah mengunjungi tutorial saya lagi, setelah tutorial sebelumnya tentang Pengenalan Twitter Bootstrap Oke.. sebelum melangkah