Bootstrap 4 Gezinme Çubuğu
Gezinme Çubukları
Gezinme çubuğu, sayfanın en üstüne yerleştirilmiş bir gezinme başlığıdır:
Temel Gezinme Çubuğu
Bootstrap ile bir gezinme çubuğu, ekran boyutuna bağlı olarak uzayabilir veya daraltılabilir.
Sınıfla birlikte standart bir gezinme çubuğu oluşturulur .navbar
, ardından yanıt veren bir çöken sınıf gelir: .navbar-expand-xl|lg|md|sm
(gezinti çubuğunu çok büyük, büyük, orta veya küçük ekranlarda dikey olarak istifler).
Gezinme çubuğunun içine bağlantılar eklemek için <ul>ile bir öğe kullanın class="navbar-nav". Ardından , bir sınıfa ve ardından bir sınıfa sahip bir öğeye sahip <li>öğeler ekleyin :.nav-item<a>.nav-link
Örnek
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Dikey Gezinti Çubuğu
.navbar-expand-xl|lg|md|smDikey gezinme çubuğu oluşturmak için sınıfı kaldırın :
Örnek
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
ortalanmış gezinme çubuğu
.justify-content-centerGezinme çubuğunu ortalamak için sınıfı ekleyin .
Aşağıdaki örnek, gezinme çubuğunu orta, büyük ve ekstra büyük ekranlarda ortalayacaktır. Küçük ekranlarda dikey ve sola hizalı olarak görüntülenecektir (.navbar-expand-sm sınıfı nedeniyle):
Örnek
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
renkli gezinme çubuğu
.bg-colorGezinme çubuğunun arka plan rengini değiştirmek için sınıflardan herhangi birini kullanın ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkve .bg-light)
İpucu: Gezinme çubuğundaki tüm bağlantılara sınıfla birlikte beyaz bir metin rengi ekleyin veya siyah bir metin rengi eklemek için sınıfı kullanın
..navbar-dark.navbar-light
Örnek
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Etkin/devre dışı durum : Geçerli bağlantıyı vurgulamak için .activesınıfı bir
öğeye veya bağlantının tıklanamaz olduğunu belirtmek için sınıfı ekleyin.<a>.disabled
Marka logosu
Sınıf .navbar-brand, sayfanızın markasını/logosunu/proje adını vurgulamak için kullanılır:
Örnek
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Sınıfı görüntülerde kullanırken .navbar-brand, Bootstrap 4 görüntüyü gezinme çubuğuna dikey olarak sığacak şekilde otomatik olarak biçimlendirir.
Örnek
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
Gezinti Çubuğunu Daraltma
Çok sık, özellikle küçük ekranlarda, gezinme bağlantılarını gizlemek ve tıklandığında ortaya çıkması gereken bir düğme ile değiştirmek istersiniz.
Daraltılabilir bir gezinme çubuğu oluşturmak için ile bir düğme kullanın . Ardından, gezinme çubuğu içeriğini (bağlantılar, vb.) bir div öğesinin içine ve ardından düğmenin şuyla eşleşen bir kimlikle sarın: " thetarget ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Örnek
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
</ul>
</div>
</nav>
İpucu: Ayrıca, gezinme çubuğu bağlantılarını HER ZAMAN gizlemek ve geçiş düğmesini görüntülemek için .navbar-expand-md sınıfını kaldırabilirsiniz.
Açılan Gezinme Çubuğu
Gezinti çubukları ayrıca açılır menüleri de tutabilir:
Örnek
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Navbar Formları ve Düğmeleri
Girişleri ve düğmeleri yan yana gruplamak için bir <form>öğe ekleyin :class="form-inline"
Örnek
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Giriş alanının yanına bir simge veya yardım metni eklemek .input-group-prependveya gibi diğer giriş sınıflarını da kullanabilirsiniz . .input-group-appendBootstrap Inputs bölümünde bu sınıflar hakkında daha fazla bilgi edineceksiniz.
Örnek
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
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-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
Sabit Gezinti Çubuğu
Gezinme çubuğu ayrıca 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 .fixed-top, gezinme çubuğunu en üste sabitler :
Örnek
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Gezinme çubuğunun sayfanın altında.fixed-bottom kalmasını sağlamak için sınıfı kullanın :
Örnek
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>