1 2 Membuat Top Fixed Responsive Navbar Twitter Bootstrap Oleh: ricky orlando napitupulu Salam bro and sis :), selamat datang di tulisan tutorial pert...
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 <meta charset="utf-8">
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
<meta charset="utf-8"> <style type="text/css"> body {padding-top: 60px;} <script src="js/jquery.js"> <script src="js/bootstrap.js"> 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
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 :).
