Bootstrap Uygulama Örnekleri - Navbar Uygulaması.

Navbar web sayfamızda menüler için kullandığımız menü başlığı çubuğudur. Çubuk üzerine menü elemanları koymaya yarıyor ve çubuk tamamen responsive şekilde çalışmaktadır.

Navigasyon çubuğu uzatılabilir ya da ekran boyutuna bağlı olarak daraltılabilir. Bu kısa açıklamadan sonra navigasyon bar çeşitlerini tek tek uygulamalı olarak inceleyelim.

1-Default (Varsayılan) Navbar:

Sayfamızın üst kısmında yerleştirilecek bir default navbar kodları aşağıdaki gibidir:

<nav class="navbar navbar-default">


     <div class="container-fluid">


          <div class="navbar-header">


            <a class="navbar-brand" href="#">Logo Gelecek</a></div>


               <ul class="nav navbar-nav">


                    <li class="active"><a href="#">Home</a></li>


                    <li><a href="#">Page 1</a></li>


                    <li><a href="#">Page 2</a></li>


                    <li><a href="#">Page 3</a></li>


               </ul>


       </div>


</nav>

Navigasyon çubuğuna logo yerleştirme:

4. satırdaki Logo Gelecek yazısını <img> ile değiştirerek kendi logonuzu yerleştirebilirsiniz. veya hem logo, hem de site adı görünsün istiyorsanız aşağıdaki kodu <navbar-header> divinin içine yerleştirebilirsiniz. genişlik ve yükseklik değerlerini ise css kodlarıyla ayarlayabilirsiniz.

Örnek kod:

<img src=".Logo Adresi gelecek.."alt="Logo Gelecek" >

Navigasyon çubuğuna Arama çubuğu yerleştirme:

Bunun için aşağıdaki kodu container divinin içine en alta yapıştırılır ve navbarın neresinde gözükmesini istiyorsak left veya right özelliğini kullanarak sağa veya sola yerleştiririz.

<form class="navbar-form navbar-left" role="search">


    <div class="form-group">


         <input type="text" class="form-control" placeholder="Ara">


    </div>


         <button type="submit" class="btn btn-default">Gönder</button>


</form>

Navigasyon barının sağ tarafına menü yerleştirme:

Bunun için nav navbar-nav  sınıfına aşağıda görüldüğü gibi navbar-right eklenir.

<ul class="nav navbar-nav navbar-right">


       <li><a href="#">Link</a></li>


       <li class="dropdown">


       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role=


"button" aria-haspopup="true" aria-expanded="false">Dropdown 


   <span class="caret"></span></a> 


<ul class="dropdown-menu">


       <li><a href="#">Action</a></li>


       <li><a href="#">Another action</a></li>


       <li><a href="#">Something else here</a></li>


       <li role="separator" class="divider"></li>


       <li><a href="#">Separated link</a></li>


</ul>


       </li>


</ul>

Yukarıdaki örnekte navbarın sağ tarafına Link adında bir menü ve bir  de dropdown (açılır) menü eklenmiştir.

2-Sayfann üstünde veya altında sabit (Fixed) olarak yerleştirilen navbar:

Navbar sayfanın en üstünde sabit (Fixed) olarak yerleştirmek için yukaarıda 1. şıkta ki default navbar kodları ile aynı olup, sadece navbar navbar-default klasına aşağıdaki gibi navbar-fixed-top kodu eklenir.

<nav class="navbar navbar-default manbar-fixed-top">


      <div class="container-fluid">


             <div class="navbar-header">


                  <a class="navbar-brand" href="#">Logo Gelecek</a>


             </div>


             <ul class="nav navbar-nav">


                     <li class="active"><a href="#">Home</a></li>


                     <li><a href="#">Page 1</a></li>


                     <li><a href="#">Page 2</a></li>


                     <li><a href="#">Page 3</a></li>


            </ul>


      </div>


</nav>

Navbarı sayfanın en altına sabitlemek için ise; yukarıdaki kodlara sadece navbar navbar-default klasına navbar-fixed-botton kodu eklenir

GÖRÜNTÜLE:

Uygulamayı  aşağıdaki videodan veya youtube kanalımdan görsel olarak izleyebilirsiniz.