Bootstrap Ders-5 Navbar
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Bootstrap Ders-5 Navbar

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(3963)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/5s54as2d1s.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol