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>
0 yorum:
Yorum Gönder