BS Navigasyon ve Animasyon

Bu yazımızda Bootstrap CSS kullanılarak web sayfamız üzerinde çeşitli navbar sınıflarını kullanmak ve sayfamıza dinamik anlamda renk katacak animasyonları uygulamak adına gerekli olan temel sınıflardan bahsedeceğiz. Bu iki konu birbiriyleriyle bağlantılı olduğu için ikisini bir arada ele aldık. Yararlandığım kaynak genelde w3School sitesi ile kendim edindiğim deneyimlerim olacaktır.

BOOTSTRAP TEMEL NAVİGASYON SINIFLARI

1. Bootstrap Navbar

Sayfamızın en üstünde navigasyon için gerekli olan menuler için hazırlanmış bu sınıfımız sayesinde tasarımı gayet şık olan ana menuler oluşturabiliriz. Örnek kodumuz için kendindene sitemizden faydalanabilirsiniz.

Bu sınıf tanımlamalarını kullanarak hiçbir css kodlaması yapmadan pratik olarak güzel bir tasarım elde edebiliriz. Bootstrap bu açıdan  web tasarımcıları için gerçekten büyük kolaylık sağlıyor.

Navbar-Inverse : Bu sınıfı kullanarak arkaplanı siyah ve menu öğesini tıkladığınızda öğenin arkaplanı gri olacak şekilde bir tasarım söz konusudur. Uygulamak için yukarıda vermiş olduğum kodda default olan sınıf tanımlamasını içerisinde “default” yerine “inverse” yazmanız yeterlidir.

Navbar-Fixed-Bottom : Sınıfı kullanarak menumuzu sayfanın alt kısmında gösterebiliriz.Uygulamak için navbar-inverse class tanımlamasında bir boşluk bıraktıktan sonra “navbar-fixed-bottom” yazmanız yeterlidir.Sonuç aşağıda yer almaktadır. Gördüğünüz üzere menumuz aşağıya inmiştir.

Navbar-Right : Menu öğelerini sağa dayalı olarak tasarlamak üzere kullanılan bir Bootstrap sınıfıdır. Genelde kayıt ol veya giriş yap gibi linkleri ayrı olarak göstermek için kullanılır.

Önemli Not : Kodlarınızı uygulamak için Notepad++ programında dosyayı HTML formatında kaydetmeniz yeterlidir.

Daha fazla bilgi için w3school sitesinden faydalanabilirsiniz. Linkle ulaşmak için tıklayınız.

2. Bootstrap Tabs

Genellikle tek bir sayfa üzerinde içeriklere ulaşmak gerekir ise bu sınıftan faydalanılmalıdır. Bir web sayfası içerisinde ayrı ayrı bir çok sayfa içeriğini bu özellik yardımıyla çok kolay bir şekilde gerçekleştirebilirsiniz.

Dynamic-Tabs : Dinamik olarak menu linklerine tıkladığınızda içeriğin değişmesini sağlayan css sınıfıdır. İlgi çekici bir tasarım elde etmek için sayfanızda kullanabilirsiniz. Tüm tabs kodlarının uygulandığı sayfa linkimize ulaşmak için aşağıdakine tıklayınız. Kodlara ulaşmak için çıkan sayfaya sağ tıklayıp kaynak göster kısmına ulaşmanız yeterlidir.

Dynamic tabs ve diğer Tabs Kodlarımız için link : http://tolgasariyildiz.com.tr/wp/tabs.html

3. Bootstrap Pills

Temel olarak tabs ile aynı kullanıma sahiptir. Ancak daha şık bir tasarıma sahiptir ve bu yüzden eğer sayfanızda kullanacaksanız bunu kullanmanızı tavsiye ederim. Genel tasarım görüntüsü aşağıdaki gibidir. Kodları pills konusunun en altında yer alan linkteki sayfanın kaynak kodlarından görebilirsiniz.

Pills sınıflarının bir diğer önemli özelliği de dikey menuler tasarlamanıza olanak vermesidir. Böylece web sitenizin içeriğini daha öne çıkaran bir şablon tasarımı gerçekleştirebilirsiniz. Tasarımın genel görüntüsü ise şu şekildedir.

Genel olarak tabs kısmında paylaştığımız tüm kodları pills sınıflarında da kullanabilirsiniz. Yukarıda farklı olan özelliklerden bahsetmek istedim. Son olarak ekleyeceğimiz kısım bu menülerin ortalanmış şekilde kullanılmasıdır. Örnek sayfamıza ulaşmak için aşağıdaki linkte yer alan sayfadan ve kaynak kodlarından faydalanabilirsiniz.

Pills Sınıfı ve Diğer menü kodlarımız içi bu linke tıklayınız...

4. Bootstrap Carousel

Carousel son zamanlarda kullanımı en pratik slayt tasarımlarından biridir. Css kodlarımızı kullanarak istediğimiz her alanda slayt kullanımını gerçekleştirebiliriz. Örnek kullanım için aşağıda vermiş olduğum sayfadan yararlanabilir ve sizde kendi web sayfanıza slaytlar ekleyebilirsiniz.

Carousel Slaytımıza ulaşmak için tıklayınız. Kodları görmek için kaynağı görüntüleyiniz.

BOOTSTRAP ANİMASYON SINIFLARI

1. Bootstrap Scrollspy

Web sayfası içeriğinde istediğiniz belli noktalara ulaşmak için kullanabileceğiniz bu sınıf sayesinde kullanıcının menude belirleyeceğiniz anahtar kelimeye tıkladığında ilgili içeriğe ulaşması farklı bir tasarım adına büyük bir avantaj olacaktır. Örnekte içerikleri görmek için oklara tıkladığınızda tüm içeriği görebilirsiniz. Tıkladığınız bağlantıya göre bağlı olan içeriğe ulaşırsınız.

Örnek kullanıma ulaşmak için bu linke tıklamanız yeterlidir. BS Scrollspy Örnek Sayfası…

2. Bootstrap Tooltip

Web sayfanızda bir linkin üstüne geldiğinizde açıklama eklemek için bu sınıfı kullanırız. İsteğiniz pozisyonda bu açıklamayı gösterebilirsiniz.

Örnek kodlara ulaşmak için tıklayınız. Kaynak kodları gör diyerek  kodlara ulaşabilirsiniz.

Not : Kodda bir Javascript fonksiyonu da yer almaktadır. 

3. Bootstrap Popover

Tooltip sınıfından farkı başlık ve içerik alanları içeren link açıklaması eklemenizi sağlamasıdır. Bu yüzden gerekli olan içeriğinize göre tercih yapabilirsiniz. Diğer bir özelliği linkin üstüne geldiğinizde değil tıkladığınız zaman açıklamanın çıkmasıdır.

Örnek kodlara ulaşmak için tıklayınız. Kaynak kodları gör diyerek  kodlara ulaşabilirsiniz.

Not : Kodda bir Javascript fonksiyonu da yer almaktadır. 

4. Bootstrap Modal

Bu sınıf grubunda ise tıkladığınız linke açıklama eklemeniz yanında bu açıklama sayfanın ortasında bir butonla beraber görüntülenir. Kullanım açısında diğer açıklama sınıflarımıza göre daha üst seviye bir sınıftır. Daha iyi anlamanız için vereceğim linkten faydalanabilirsiniz.

Örnek kodlara ulaşmak için tıklayınız. Kaynak kodları gör diyerek  kodlara ulaşabilirsiniz.

Not : Modal sınıfı için büyük ve küçük bir açıklama ekranı açmak için modal-dialog kısmından sonra büyük ekran içim “modal-lg” sınıfını yazmanız,küçük kullanım için ise “modal-sm” yazmanız yeterlidir.

Yazımızın içeriğinde w3school sitesinden önemli ölçüde yardım almakla birlikte , yazılarımızın tümü kesinlikle alıntı değil özgündür. Yazımızın sonuna geldik ve ilerleyen yazılarımızda eksik kalan diğer Bootstrap sınıflarını anlatmaya devam edeceğiz.