Bootstrap Ders-3 Navs
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-3 Navs

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