Bootstrap derslerimizi devam ediyoruz.Bu derste
navbar sistemini işleyeceğiz.Daha önce
http://ustaderslik.com/konu/Bootsrap_Ders-3_Navs navs dersin de bazı menüleri görmüştük.Navbar da ise ana menü türü menüler koymaya yarıyor.Bu menüler tamammen reponsive şekildedir.3 tür navbar bulunmakta.Bunları tek tek inceleyelim.
İndir : http://ustaderslik.com/dosya/bootstrap-navbar.zip
İncele : http://ustaderslik.com/ornek/bootstrap-navbar/
1-navbar-default
Bu standart menüdür.Sayfa da istediğimiz yere koyabiliriz.
<div class="navbar navbar-default" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-2"><span class="sr-only"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Menü-2</a>
<div class="navbar-collapse collapse" id="menu-2">
<ul class="nav navbar-nav">
<li><a href="#">Buton</a></li>
<li class="active"><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
</ul>
</div>
</div>
Standar menüyü oluşturmak için ana div'in classına
navbar navbar-default rolesine de
navigation veriyoruz.Yukarıda ilk button menü küçüldüğün de oluşacak icon için.Bu buton
data-target ile açılacak menüden bir seçici atıyoruz.
navbar-brand ile de menüye bir başlık girebiliyoruz.En son da bir div ile de buton seti oluşturup,butonları belirtiyoruz.Temel kalıbı bu şekil de.
2-navbar-static
Bu menü ise de sayfanın en üstün de boydon boya oluşan bir menü.Tüm işlemleri yukarıdaki ile aynı.Tek fark ana divin classına
navbar navbar-default navbar-static veriyoruz.
<div class="navbar navbar-default navbar-static" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-1"><span class="sr-only"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Menü-1</a>
<div class="navbar-collapse collapse" id="menu-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
</ul>
</div>
</div>
3-navbar-fixed
Bu da sayfanın en alt ve en üstünde sabit kalan bir menü eklememiz için.Bunun da yapısı ilki ile aynı.Tek farkı ise en üste olması için ana dive
navbar navbar-default navbar-fixed-top en altta olması için
navbar navbar-default navbar-fixed-bottom vermemiz yeterli.
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-3"><span class="sr-only"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Menü-3</a>
<div class="navbar-collapse collapse" id="menu-3">
<ul class="nav navbar-nav">
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li class="active"><a href="#">Buton</a></li>
</ul>
</div>
</div>
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>UstaDerslik.com</title>
<style type="text/css">
.ortala{width:100%;max-width:1000px;margin:auto;margin-top:75px;text-align:Center;}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-static" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-1"><span class="sr-only"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Menü-1</a>
<div class="navbar-collapse collapse" id="menu-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
</ul>
</div>
</div>
<div class="ortala">
<div class="navbar navbar-default" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-2"><span class="sr-only"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Menü-2</a>
<div class="navbar-collapse collapse" id="menu-2">
<ul class="nav navbar-nav">
<li><a href="#">Buton</a></li>
<li class="active"><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-3"><span class="sr-only"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Menü-3</a>
<div class="navbar-collapse collapse" id="menu-3">
<ul class="nav navbar-nav">
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li class="active"><a href="#">Buton</a></li>
</ul>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Görüntüsü :
UstaDerslik
