Navigasyon Barlar
Gezinti çubuğu sayfanın üst kısmında yer alan bir navigasyon başlığıdır:
Ile Bootstrap , bir gezinme çubuğu uzatabilir veya ekran boyutuna bağlı olarak, çöküş.
Standart bir gezinti çubuğu ile oluşturulan <nav class="navbar navbar-default"> .
Aşağıdaki örnek Sayfanın en üstüne bir gezinti çubuğu nasıl ekleneceğini gösterir:
Örnek
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
Kendin dene " Bu sayfadaki örnekler tüm küçük ekranlarda çok fazla yer kaplıyor bir gezinti çubuğu (ancak, gezinti çubuğu büyük ekranlarda tek bir hat üzerinde olacak - çünkü gösterecektir Bootstrap duyarlı). (Küçük ekranlı) Bu sorun bu sayfadaki son örnekte çözülecektir.
Ters Gezinme Çubuğu
Varsayılan gezinme çubuğunda stilini beğenmezseniz, Bootstrap alternatif, siyah navbar sağlamaktadır:
Sadece değiştirmek .navbar-default halinde sınıfı .navbar-inverse :
Örnek
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Kendin dene " Sabit Gezinme Çubuğu
gezinti çubuğu da üstünde veya sayfanın alt kısmında sabitlenebilir.
Sabit bir gezinti çubuğu sabit bir konumda görünür kalır (top or bottom) sayfa kaydırma bağımsız.
.navbar-fixed-top sınıf üst kısmında sabit bir gezinme çubuğu yapar:
Örnek
<nav class="navbar navbar-inverse
navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> Kendin dene " .navbar-fixed-bottom sınıf altta gezinti çubuğu konaklama yapar:
Örnek
<nav class="navbar navbar-inverse
navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> Kendin dene " Açılır menüsünü kullanarak Gezinme Çubuğu
Gezinti çubukları, açılır menüler tutabilir.
Aşağıdaki örnek için bir açılır menü ekler "Page 1" butonu:
Örnek
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Page
1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Page
1-1</a></li>
<li><a href="#">Page
1-2</a></li>
<li><a href="#">Page
1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> Kendin dene " Sağa hizalı Gezinme Çubuğu
.navbar-right sınıf sağ-align gezinti çubuğu düğmeleri için kullanılır.
Aşağıdaki örnekte bir insert "Sign Up" butonuna ve "Login" gezinme çubuğunda sağdaki düğmeyi. Ayrıca iki yeni düğmelerin her birine bir glyphicon ekleyin:
Örnek
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a href="#"><span
class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</nav> Kendin dene " Navigasyon Bar Çöken
gezinti çubuğu küçük bir ekranda çok fazla yer kaplar.
Biz gezinti çubuğu gizlemek gerekir; Gerektiğinde ve sadece bunu göstermek.
Aşağıdaki örnekte gezinti çubuğu sağ üst köşede bir düğme ile değiştirilir. düğmesi tıklandığında Yalnızca, gezinti çubuğu görüntülenir:
Örnek
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a href="#"><span
class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav> Kendin dene " Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»