Önyükleme Gezinti Çubuğu
Gezinme Çubukları
Gezinme çubuğu, sayfanın en üstüne yerleştirilmiş bir gezinme başlığıdır:
Bootstrap ile bir gezinme çubuğu, ekran boyutuna bağlı olarak uzayabilir veya daraltılabilir.
ile standart bir gezinme çubuğu oluşturulur <nav class="navbar navbar-default">.
Aşağıdaki örnek, sayfanın en üstüne bir gezinme çubuğunun nasıl ekleneceğini gösterir:
Örnek
<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>
...
Not: Bu sayfadaki tüm örnekler, küçük ekranlarda çok fazla yer kaplayan bir gezinme çubuğu gösterecektir (ancak, gezinme çubuğu büyük ekranlarda tek bir satırda olacaktır - çünkü Bootstrap duyarlıdır). Bu sorun (küçük ekranlarla) bu sayfadaki son örnekte çözülecektir.
Ters Gezinti Çubuğu
Varsayılan gezinme çubuğunun stilini beğenmediyseniz, Bootstrap alternatif bir siyah gezinme çubuğu sağlar:
Sadece .navbar-defaultsınıfı şu şekilde değiştirin .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>
Açılır Menü ile Gezinme Çubuğu
Gezinme çubukları ayrıca açılır menüleri de tutabilir.
Aşağıdaki örnek, "Sayfa 1" düğmesi için bir açılır menü ekler:
Ö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>
Sağa Hizalanmış Gezinme Çubuğu
Sınıf .navbar-right, gezinme çubuğu düğmelerini sağa hizalamak için kullanılır.
Aşağıdaki örnekte, gezinme çubuğunun sağına bir "Kaydol" düğmesi ve bir "Giriş" düğmesi ekliyoruz. Ayrıca iki yeni düğmenin her birine bir glifon ekliyoruz:
Ö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>
</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>
Gezinme Düğmeleri
Gezinme çubuğunun içine düğmeler eklemek için .navbar-btnsınıfı bir Bootstrap düğmesine 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="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Gezinme Çubuğu Formları
Gezinme çubuğunun içine form öğeleri eklemek için, .navbar-formsınıfı bir form öğesine ekleyin ve bir girdi(ler) ekleyin. .form-groupGirdiyi tutan div kabına bir sınıf eklediğimizi unutmayın . Bu, birden fazla girişiniz varsa uygun dolgu ekler (bunun hakkında Formlar bölümünde daha fazla bilgi edineceksiniz).
Ö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>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
Giriş alanının yanına bir simge veya yardım metni eklemek için .input-groupve sınıflarını da kullanabilirsiniz . .input-group-addonBootstrap Inputs bölümünde bu sınıflar hakkında daha fazla bilgi edineceksiniz.
Örnek
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Gezinti çubuğu metni
.navbar-textGezinme çubuğu içindeki bağlantı olmayan öğeleri dikey olarak hizalamak için sınıfı kullanın (uygun dolgu ve metin rengi sağlar).
Örnek
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
Sabit Gezinti Çubuğu
Gezinme çubuğu, sayfanın üstüne veya altına da sabitlenebilir.
Sabit bir gezinme çubuğu, sayfa kaydırmadan bağımsız olarak sabit bir konumda (üst veya alt) görünür durumda kalır.
Sınıf .navbar-fixed-top, gezinme çubuğunu en üste sabitler:
Ö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>
Sınıf .navbar-fixed-bottom, gezinme çubuğunun altta kalmasını sağlar:
Ö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>
Gezinti Çubuğunu Daraltma
Gezinme çubuğu genellikle küçük bir ekranda çok fazla yer kaplar.
Gezinme çubuğunu gizlemeliyiz; ve sadece gerektiğinde gösterin.
Aşağıdaki örnekte, gezinme çubuğunun yerini sağ üst köşedeki bir düğme almıştır. Yalnızca düğmeye tıklandığında gezinme çubuğu görüntülenecektir:
Ö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>