Sabtu, 11 Maret 2017

Membuat Nav Bar pada Bootstrap

on Maret 11, 2017 Tidak ada komentar


Membuat Navigation Bar pada Bootstrap
kita kalau ingin Membuat Navigation Bootstrap sebelumnya kita hanya perlu menambahkan class yang sudah di sediakan oleh bootstrap. Membuat Navigation Bootstrap ini akan saya jelaskan sedikit tentang cara menu navigasi dengan sangat mudah dan cepat. Secara defalut Navigation Bar Bootstrap memiliki dua warna yaitu :
  • Default
  • Inverse
Navigation Bar Bootstrap di buat dengan menggunakan tag <nav> dan tag tersebut cukup meletakkan nya di dalam tag <body> HTML paling atas.
     Contoh Membuat Navigation Bar Bootstrap
Di bawah ini adalah hasil dari script di atas



Perhatikan contoh di atas tadi. Di sini saya akan jelaskan sedikit masing-masing kegunaan dari class dalam Membuat Navigation Bar Bootstrap dan dapat kita lihat pada contoh di atas tadi. Untuk membuat menu Navigation Bootstrap tersebut kita hanya perlu gunakan class di bawah ini :

<nav class="navbar navbar-default">
Class "navbar-defalut" digunakan untuk Membuat Navigation Bar dengan model standart saja  dan kita juga bisa menggantinya dengan "navbar-invers" untuk membuat menu navigation bar bootstrap dengan model gelap anda hanya perlu class di bawah ini :

 <div class="container-fluid">
 Class yang di atas ini digunakan untuk membuat sisi menu navigation full. Teman-teman juga bisa menggantinya lagi menjadi class di bawah ini :

<div class="container">
 Untuk membuat sisi menu navigation bar tidak full width cukup dengan class di bawah ini :

<div class="navbar-header">
    <a class="navbar-brand"</div>
  Itu di gunakan untuk membuat begian header dari menu navigaton bootstrap. "navbar-header" ini untuk mendefinisikan bagian header menu navigationnya dan "navbar-brand" itu digunakan untuk mendefinisikan judul website. Dan di bawah ini adalah coding nya kalau teman-teman belum paham :

<ul class="nav navbar-nav">
    <li class="active"><a href"#"> Home</a></li>
    <li><a href="#">Profil</a></li>
    <li><a href="#">kontak</a></li>
    <li><a href="#">berita</a></li>
</ul>
 Di atas itu digunakan untuk membuat link menu navigation. Dan class di bawah ini digunak untuk membuat link menu yang terletak pada bagian sebelah kanak dari menu navigation bar bootstrapnya :

<ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )