Bootstrap 4 Navs

Bootstrap Menüler (Navs)

Basit Menü(Simple Nav)

Bootstrap4'te ul ve li elemanlarını kullanarak basit bir menü yapmak için aşağıdaki kodlar kullanılır.
Aşağıdaki kod yapısı incelendiğinde en dıştaki ul elemanına nav,
içteki li elemanlarına nav-item,
link için kullanılan a elamanlarına ise nav-link
sınıf özellikleri verilmelidir.
Ayrıca aktif link için active ve engelli link için disabled özellikleri eklenir. <ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">Aktif Sayfa</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Sayfa 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Sayfa 2</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Engelli Sayfa(Disabled)</a> </li> </ul> Menüler varsayılan olarak sola hizalanmış olarak sayfaya eklenir. Bazı durumlarda menülerisağa ya da ortaya hizalamak gerekebilir. Bunun için dışta bulunan ul nesnesine
ortaya hizalamak için => justify-content-center,
sağa hizalamak için => justify-content-end,
sınıf özelliklerinin eklenmesi yeterlidir.

Menü elemanlarının içinde bulundukları HTML elemanının (örneğin div vb.) tamamını doldurması olayına fill özelliği denir.
fill özelliğini kullanmak için yine en dışta bulunan ul elemanına nav-fill özelliği eklenir.
Hem sayfanın tamamını kaplaması hem de buton büyüklüklerinin eşit olması istenirse nav-fill yerine nav-justified özelliği eklenmelidir. Yatay menüyü dikey duruma getirmek için yalnızca ul elemanının class özelliğine flex-column değeri verilmesi yeterlidir.

Pill ve Tab Menüler

Hap şeklinde görünümü olan menülere pill menü adı verilir. Bu menüyü oluşturmak için diğer örneklerde olduğu gibi en dıştaki ul elemanına nav-pills class değeri verilir.
Tab (Sekmeli) menü oluşturmak için ise ul elemanına nav-tabs class değeri verilmesi yeterlidir.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com