Bootstrap Navbar

Hazırlayan: Tolin İbrahim

Bootstrap 5 navbar nedir

Bootstrap 5'teki Navbar (gezinme çubuğu) , bir web sitesinin tüm ilgili web sayfalarını birbirine bağlayarak kullanıcıların bunlar arasında gezinmesini kolaylaştırır. Bir web sitesinin, sayfa adlarını ve bunlara bağlantıları ve kullanıcı ihtiyaçlarına göre uyarlanmış bir arama kutusunu içeren gezinme çubuğu çok önemli bir unsurdur.

Duyarlı daraltma ve renk düzeni sınıfları için, gezinme çubuklarının ".navbar"ı ".navbar-expand-sm|-md|-lg|-xl|-xxl" ile sarması gerekir. Varsayılan olarak, gezinme çubukları ve içerikleri akıcıdır.

Temel gezinme çubuğu

Konteyner, yatay genişliğini birçok şekilde sınırlamak için değiştirilebilir. Gezinme çubukları içindeki aralığı ve hizalamayı ayarlamak için esneklik ve aralık için yardımcı program sınıflarımızı kullanın.

Varsayılan olarak, gezinme çubukları yanıt verir, ancak bunu bootstrap 5 sınıfıyla kolayca değiştirebilirsiniz. Duyarlı gezinme çubuğu işlevi, JavaScript'i Daralt eklentimize bağlıdır.

Erişilebilirliği sağlamak için bir "nav" öğesi kullanın veya "div" gibi daha genel bir öğe kullanıyorsanız, role = "navigation" özniteliğini ekleyin. Bu rol, bir yer işareti alanı gibi yardımcı teknolojilerin kullanıcılarına anlaşılmasını sağlamak için her gezinme çubuğunu kullanır.

Geçerli sayfayı belirtmek için aria-current = "page" veya bir kümedeki geçerli öğeyi belirtmek için aria-current="true" kullanın.

Temel gezinme çubuğu (Basic navbar function)

Girdi:

<a class = "nav-link" href = "#"> First </a>

</li>

<a class = "nav-link" href = "#"> Second </a>

</li>

<a class = "nav-link" href = "#"> Third </a>

</li>

<a class = "nav-link" href = "#"> Fourth </a>

</li>

</ul>

</div>

</nav>

Çıktı:

Dikey gezinme çubuğu(Vertical navbar)

".navbar-expand-sm|-md|-lg|-xl|-xxl" sınıfı, duyarlı yatay gezinme çubuğunu kullanır. Navbar genişletme sınıfını kullanmazsak, navbar işlevi otomatik olarak dikey biçimde görüntüler. <nav> etiketi, dikey gezinme çubuğunu göstermek için gerekli arka plan sınıfıyla birlikte navbar sınıfını kullanır.

Örnek 1:

Bir html sayfasının içeisinde yazılırsa

<!DOCTYPE html>

<head>

<title> Bootstrap Navbar </title>

</head>

<body>

<h4> Dikey gezinme çubuğu</h4>

<a class = "nav-link" href = "#"> Birinci </a>

</li>

<a class = "nav-link" href = "#"> İkinci </a>

</li>

<a class = "nav-link" href = "#"> Üçüncü</a>

</li>

<a class = "nav-link" href = "#"> Dördüncü</a>

</li>

</ul>

</div>

</nav>

</div>

</body>

</html>

Çıktı:

Ortalanmış gezinme çubuğu

"justify-content-center" " class, gezinme çubuğu öğelerini orta konuma yerleştirir. Öğeleri son konuma yerleştirmek istiyorsak, " "justify-content-end" " class'ı kullanın. Bu sınıf, "navbar" sınıfı ile <nav> etiketinin içine yerleştirilmiştir.

Örnek:

(NOT: örneklerde bir html sayfasının içeisinde yazmıyacağım sadece verilern özelliği blok şekilinde vericem ancak siz özellikleri denerken örnek 1 deki gibi bir html sayfası içerisinde deneyin )

Girdi:

<a class = "nav-link" href = "#"> Birinci</a>

</li>

<a class = "nav-link" href = "#"> İkinci </a>

</li>

<a class = "nav-link" href = "#"> Üçüncü </a>

</li>

<a class = "nav-link" href = "#"> Dördüncü </a>

</li>

</ul>

</nav>

Çıktı:

Renkli gezinme çubuğu

"contextual " sınıflar, renkli gezinme çubuğunu görüntülemek için navbar sınıfıyla birlikte <nav> etiketine yerleştirilir. Gezinme çubuğu, gerekli bg-* sınıfına göre arka plan rengini değiştirir. Renkli gezinme çubuğu, gezinme işlevinin anlamını verir veya uygulamanın temasına göre gezinme çubuğunu gösterir. CSS stili ve bootstrap 5 sınıfları ile değişiklik yapabiliriz.

Örnek:

Girdi:

<a class = "nav-link text-dark" href = "#">Birinci </a>

</li>

<a class = "nav-link text-dark" href = "#"> İkinci </a>

</li>

<a class = "nav-link text-dark" href = "#"> Üçüncü</a>

</li>

<a class = "nav-link text-dark" href = "#"> Dördüncü </a>

</li>

</ul>

<br>

</nav>

<a class = "nav-link text-dark" href = "#"> Birinci </a>

</li>

<a class = "nav-link text-dark" href = "#"> İkinci</a>

</li>

<a class = "nav-link text-dark" href = "#"> Üçüncü</a>

</li>

</ul>

</nav>

Çıktı:

Logolu Navbar işlevi

"Navbar-brand", gezinme çubuğunun logosunu, resimlerini ve animasyonlu işlevini gösterir. Bu işlev, şirketin sloganını veya logosunu temsil etmeye yardımcı olur. Bu sınıf, nav öğesini gerekli logoyla değiştirmek için <a> etiketine yerleştirilir.

Örnek:

Girdi:

<a class = "navbar-brand" href = "#"> LOGOO </a>

</div>

<a class = "nav-link" href = "#"> Birinci </a>

</li>

</ul>

</nav>

Çıktı:

Form ile Navbar işlevi

Navbar işlevi, anında kullanıcı etkileşimi için bir form kullanır. Gezinme çubuğu, kullanıcıların e-posta adresi veya iletişim numarası gibi verilerini göndermek için bir form kullanır. Bir web sayfasından herhangi bir şey aramak istiyorsak, gezinme çubuğu gönder düğmesiyle birlikte bir arama işlevi kullanır.

Örnek:

Girdi:

<!DOCTYPE html>

<head>

<title> Bootstrap Navbar </title>

</head>

<body>

<h4> Form ile navbar işlemi </h4>

<a class = "nav-link" href = "#"> Birinci</a>

</li>

<a class = "nav-link" href = "#"> İkinci </a>

</li>

<a class = "nav-link" href = "#"> Üçüncü</a>

</li>

</ul>

</form>

</nav>

</div>

</body>

</html>

Çıktı:

Menülü Navbar

Geçiş gezinme çubuğu, her boyuttaki cihaz için duyarlı bir işlev oluşturmaya yardımcı olur. Gezinme çubuğu, büyük boyutlu cihazlarda varsayılan boyutta gösterilir. Cihazın ekranı xl veya sm boyutundaysa, ekranda geçiş düğmesi görünür. Bu düğme, gezinme bağlantısı içeren bir açılır menü olarak çalışır.

Örnek:

Girdi:

</button>

<a class = "nav-link" href = "#"> First </a>

</li>

<a class = "nav-link" href = "#"> Second </a>

</li>

<a class = "nav-link" href = "#"> Third </a>

</li>

</ul>

</div>

</nav>

Çıktı:

Yapışkan Navbar işlevi

Navbar işlevi, web sayfalarında bir yere yerleştirilir. Web sayfası bilgilerle yukarı kaydırılır ve ardından navbar işlevi sayfanın üst kısmına yapışır ve yalnızca gövde içeriğine kaydırılır. "sticky-top" veya "sticky-bottom" konumunu kullanarak yapışkan üst veya alt konuma sahip bir gezinme çubuğu oluşturabiliriz.

sticky-top için (Üst)

</nav>

sticky bottom için (Alt)

</nav>

Kodları kullanılır .

Örnek bir sayfanın çıktısı aşağdaki gibidir

Sabit Konumlu Navbar

"Sabit üst" veya "sabit alt" sınıfı, navbar işlevini varsayılan olarak en üste veya en alta yerleştirir. Navbar işlevi, web sayfasında sabit bir konum görüntüler.

Sabit üst konumlu navbar için aşağıdaki kod kullanır.

</nav>

Sabit alt konumlu navbar için aşağıdaki kod kullanılır.

</nav>

Aşağıdaki örnek, Bootstrap 5 sınıflarını kullanan sabit konumlu gezinme çubuğunu gösterir. ilk gezinme çubuğu uygulamanın üst tarafında ve ikinci gezinme çubuğu uygulamanın alt tarafında gösterilir. Gezinme çubuğu işleviyle diğer kapsayıcı verilerini görebiliriz.

Örnek:

Page updated

Report abuse