Bootstrap Dersleri – Navbar(Menü) Oluşturma

Merhaba arkadaşlar. Bootstrap 4 derslerinde 2. günümüzle yine baraberiz. Bugünkü başlığımız bootstrap ile menü oluşturma oluşturma olacak.Dersimize geçmeden, önceki dersimizde öğrendiklerimizin özetini yapacak olursak;

  1.  Bootstrap 4 bizim her ortamda düzgün görüntülenecek siteler yapmamızı sağlıyor. Sitemizin cep telefonunda veya tablette nasıl görüntülendiğini endişe etmemize gerek kalmıyor.
  2. Bootstrap 4 dünya çapında bir kütüphane. Html, Css, Javascript kütüphanelerinide seçime bağlı olarak sayfanıza dahil edebiliyorsunuz.
  3. Bootstrap 4 kütüphanesini kullanabilmemiz için 2  seçeneğimiz var. Biz bunlardan ilkini tercih ettik. Maxcd içerik ağını kullanarak kütüphaneleri sayfamıza dahil ediyoruz. Böylece bootstrap kütüphaneleri sitemizin dışından yüklendiği için sayfamızın yüklenmesine daha az yük oluyor.
  4. Sayfalarımızı oluşturuken sıfırdan kod yazmak yerine önceden hazırlanmış olan yapıları kullanacağız. Ve bunların üzerinde değişiklik yaparak ilerleyeceğiz. Böylece kendi hazır şalonlarımızı oluşturacağız. Bu bizi her yeni çalışmamızdan satırlarca kodu tekrar yazma zahmetinden kurtaracak.
  5. Derslerle ilgili sorularınız için lütfen sayfanın altındaki yorum yaz alanını kullanınız.

Bootstrap Dersleri – 2. gün

Hedefimiz Bootstrap 4 ün bize sağladığı kolaylıkları kullanarak Başlangıç temamızı oluşturmak.

Navbar(Menü) sayfalarınızın üst çatısını oluşturan sitenizle ilgili genel bilgi veren ve sitede rahatça gezinmeyi sağlayan bir araçtır. Bootstrap navbar yani menümüzün cep telefonu ve tabletlerde tam uyumlu çalışmasını sağlamaktadır. Bootstrap ile menü oluşturma çalışmamıza başlayalım.

Navbar(menü) şablonumuzu inceleyerek başlayalım.

Yukarıdaki Navbar kodlarını https://v4-alpha.getbootstrap.com/components/navbar/ adresinden dökümanlar bölümünden aldık. Üzerinde birkaç değişiklik yaptıktan sonra son haline getirip site şablonumuzda <body> etiketinden sonraya yerleştireceğiz.

Menünün içeriğini kendimize göre uyarladım. Bootstrap ile menü oluşturma – Menümde bulunan nesneler şöyledir;

Site ismi (logosu) : KODLEON

Menü Linkleri:  Anasayfa, HTML5, CSS3, Javascript , Bootstrapt4

FORM ÖĞELERİ: Arama text kutusu, Arama butonu

Navbar.html sayfamızın kodu aşağıdaki gibi olacaktır.

şimdi menümüzün büyük halinin ve tablet ve cep telefonlarında görüntülenecek küçük halinin nasıl olduğuna bakalım.

Menümüzün büyük görüntüsü:

bootstrap ile menü oluşturma1

Menümüzün cep telefonu – tablet görüntüsü

bootstrap ile menü oluşturma2

Yukarıda gördüğünüz gibi sayfa penceremizi küçülttüğümüzde sol tarafta Site ismi(logosu) nun olduğu bölüm ve sağ tarafta menü ikonu kaldı. Sayfamız büyük ekrandayken menü ikonu görünmüyordu. Menü ikonuna tıklayarak menümüzü görelim.

bootstrap ile menü oluşturma3

Gördüğünüz gibi menümüz responsive yani tablet-cep telefonu uyumlu. Bunu sağlayan bootstrap kütüphanesinin kendi içerisindeki css kodlarıdır.

Bootstrap ile menü oluşturma – bootstrap kodlarını oynayarak menümüzün görüntüsünü  değiştirelim.

Brand

Menümüze ekleyeceğimiz  brand özelliği ile site ismini (sloganı) menümüzün solunda gösterebiliriz. Kullanımı:

burada KODLEON sitemizin ismidir. Tıklandığında index.html e gider. Burdaki linki değiştirebiliriz.

Menümüzü renklendirme

1.alternatif

bu şekilde değiştirdiğimizde menümüz

bootstrap menü oluşturma

2. alternatif:

bootstrap 4 ile menü oluşturma

Örnek renklendirmeler: 

  1. http://bootstrap.kodleon.com/nav2.html
  2. http://bootstrap.kodleon.com/nav3.html
  3. http://bootstrap.kodleon.com/nav4.html
  4. http://bootstrap.kodleon.com/nav5.html

Menümüze açılır menü ekleme

Menümüze eleman eklerken nav-item öğesini kullannmıştık. Yukarıdaki koddaki gibi nav-item a dropdown-toggle özelliği veriyoruz. Hemen altında div oluşturarak dropdown menümüzdeki elemanları yerleştiriyoruz.

bootstrap ile menü oluşturma10

Örnek : http://bootstrap.kodleon.com/nav6.html

Formlar

.form-inline kullanarak menünüzün içine form elemanları ekleyebilirsiniz.

Container

Menümüzü sayfamızda ortalamak için kullanılır. Menüyü aşağıdaki gibi container div içine alırsak menümüz sayfamızda ortalanır.

Örnek: http://bootstrap.kodleon.com/nav7.html

Menüye Text (Yazı ekleme)

Menümüzü sayfamızın üstüne sabitlemek istiyorsak:

Menümüzü sayfamızın altına sabitlemek istiyorsak:

2. gün dersimizi burada bitiriyoum. Menü oluşturmayla ilgili eksik kalan yerlere ileride tekrar geri dönmek dileğiyle bu konuya ara veriyorum. Bir sonraki dersimizde görüşmek üzere.

 

Leave a Reply

%d blogcu bunu beğendi: