• RSS
  • Facebook
  • Twitter
  • Linkedin
navbar etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
navbar etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

27 Ekim 2014 Pazartesi

Bootstrap Navbar Örneği



       Aşağıda bulunan kodları standart bootstrap linkleri eklenmiş her hangi bir sayfada rahatlıkla kullanabilirsiniz.



<!-- buraya ekleyeceğiniz container (</div> menü sonunda kapatılmak kaydıyla) menüyü ekranın sol ve sağ kısmını sıfır alarak başlatmak yerine, bootstrap ölçülerinde ortalar -->

<nav class="navbar navbar-default navbar-static-top">
<!--navbar-default siyah memü, navbar-inverse gri menü seçeneği sunar -->
<!--navbar-static-top  bar ın alt divle mesafesini ayarlar, bunun yerine navbar-fixed-bottom yazarsanız menü sayfa altında yer alır, navbar-fixed-top menü sayfanın üstünde yer alır  -->

     <div class="container-fluid">
 <!-- container-fluid menüyü içindekiler dahil ekranın solundan ve sağdan sıfır başlatır, sadece container ise menünün çerçevesini ekranın soldan ve sağdan sıfır başlatır fakat menü içeriği bootstrap standarlarında orta alanda kalır--> 

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navekle">
<!--  #navekle ile aşağıdaki navekle birbirleri ile bağlantı kurar, bu şekilde sağdaki icona tıkladığınızda açılır menü haline gelir. burada isimlerin aynı olması gerekmekte id veya class olabilir-->

                            <span class="icon-bar"></span> <!--sağ menüdeki ikonlar -->
                               <span class="icon-bar"></span>
                               <span class="icon-bar"></span>
                      </button>

  <a class="navbar-brand" href="#"> logo</a>
                             <!-- menünün solundaki sabit alan, isteğe bağlı kaldırılabilir -->
</div>

<div class="collapse navbar-collapse" id="navekle">
          <!-- navekle böylece yukarıdaki #naveklenin nereyi etkilediği belirlenir-->

<ul class="nav navbar-nav navbar-right">
                       <!-- navbar-right menüleri sağa yaslar, kullanmadığınız taktirde solda kalır -->
<li> <a href="#"> anasayfa </a></li>
<li> <a href="#"> hakkımızda </a></li>
<li> <a href="#"> referanslar</a></li>
<li> <a href="#"> iletişim </a></li>
</ul>
</div>
</div>
</nav>