Bootstrap serimize devam ediyoruz.Bu derste
navs sistemini işleyeceğiz.Navs sayfaya menü eklememize yarıyor.3 tip nav tipi mevcut.Bunlar
tab,pill ve stacked .Şimdi bunları detaylı inceleyelim.
İndir : http://ustaderslik.com/dosya/bootstrap-Navs.zip
İncele : http://ustaderslik.com/ornek/bootstrap-Navs/
1-nav-tabs
Bir ul-li yapısı oluşturarak ula
nav nav-tabs classlarına atarsak tab sistemimiz hazır.Aktif olmasını istediğimiz li ye
active classını vermemiz yeterli.
<ul class="nav nav-tabs">
<li class="active"><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
</ul>
2-nav-pills
Pills, klasik yatay bir menü bize sunar.Tabsdaki gibi bir tane ul-li yapısı oluşturarak ul'un clasına
nav nav-pills vermemiz yeterli.Aynı şekilde aktif olmasını istediğimiz li ye
active vermemiz yeterli.
<ul class="nav nav-pills">
<li class="active"><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
</ul>
3-nav-stacked
Stacked,pills'in dikey hali bir menüyü bize sunar.Bir ul-li yapısı oluşturalım.Ul'un classına da
nav nav-pills nav-stacked vererek menümüzü aktif edelim.Aktif görünmesini istediğimiz li ye
active cllasını verelim.
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
</ul>
Navlarımız bu kadar.Aşağıdaki örnekte icon ekledim,onu gelecek ders de işleyeceğiz.
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:300px;margin:auto;margin-top:25px;}
</style>
</head>
<body>
<div class="ortala">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
</ul>
<br /><br />
<ul class="nav nav-pills">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Buton</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Buton</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Buton</a></li>
</ul>
<br></br>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
<li><a href="#">Buton</a></li>
</ul>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
