Anasayfa / Yazılım / ASP.NET / BootStrap Nedir

BootStrap Nedir

BootStrap bir HTML, CSS ve JavaScript fremoworküdür. MVC 5 uygulamalarında BootStrap otomatik olarak yüklenir ve varsayılan her uygulama için de yer almaktadır. HTML’in temel kullanımı sayesinde kendinize özel CSS classları oluşturarak çok güzel WEB sayfaları yapabilmemize olanak sağlar. Ben temel özelliklere değineceğim, bunlar menüler, butonlar ve alertler olacak. Eğer daha fazla bootstrap komponentleri ile ilgili bilgi almak istiyor iseniz aşağıdaki adresi ziyaret etmenizi öneririm.

http://getbootstrap.com/components/

Tabi orada göreceğiniz bazı komponentler aynı zamanda JavaScript, HTML ve CSS kodlarının kombinasyonundan oluşabilir. Dolayısı ile bu tip komponent kullanımında Knockout.js ile entegre edilmesi gerekir. Bir başka yazıda da Knockout.js dosyasını ele alacağız. Şimdi temel bir MVC Projesi oluşturduğumuzda standart yani varsayılan olarak zengin tasarımı ve duyarlısı menüsü ile hazır olarak gelir. Şimdi bu yapıyı yavaş yavaş inceleyelim. BootStrap ile alakalı ilgili dokümanı Views/Shared/_Layout.cshtml kısmında görebilirsiniz. _Layout.cshtml dokümanını bir tarayıcıda açtığımızda aşağıdaki gibi bir sayfa görürürüz.

2016012505

Bu sayfada görülen menü div etiketi içerisinde yer alan bir class ile oluşturulmuştur, kodları aşağıdaki gibidir:

Burada iki sınıf mevcut, bunlar: navbar-inverse ve navbar-fixed-top. navbar-inverse classı renklendirme için kullanılır. Varsayılan renk olarak üstte görüleceği üzere menü siyah zemin üzerine şeffat grimsi yazı şeklindedir. navbar-fixed-top ise menünün sürekli olarak sayfanın en üstte yer almasını sağlamaktadır. Menüde yer alan Home, About ve Contact butonları html ul etiketi ile nav classı içerisinde yazılmıştır. Burada sıralama da li etiketi ile gerçekleştirilmiştir.

Görüleceği üzere daha önce yazımızın başında belirttiğimiz gibi BootStrap duyarlı bir WEB düzeni sağlamaktadır. Bu şu anlama geliyor, sayfa herhangi bir tarayıcı görüntülendiğinde çözünürlüğe göre kendini otomatik olarak ayarlayabilmektedir.

 

Şimdi yukarıdaki kodlarda div tagi içinde navbar-collapse classı dahilinde ul tagi ile taglenmiş olan 3 adet analinkin olduğunu görüyoruz. navbar-collapse classı sayesinde tarayıcının çözünürlüğüne göre veya küçük mobil cihazlar veya tabletlerin tarayıcılarının çözünürlüğüne göre menümüz otomatik olarak boyutlanıyor. Burada div içinde yer alan collapse classı ise eğer menü tek bir satıra sığmaz ise menüyü gizli yapar. Tabi çok kullanışlı bir özellik değildir aslında bu.

Menüde herhangi bir bağlantı linki butonu üzerine gelinde yazı rengi parlak beyaz rengini almaktadır. Bu kısım ile alakalı kodlar:

Görüleceği üzere buradaki tüm işlemler, bu görünüm özellikleri HTML elementleri içerisinde yer alan CSS classları sayesinde olmaktadır. Ayrıca menüde için JavaScript kodları da kullanılmaktadır.

Menü ile alakalı olarak data-toggle ve data-target sınıfları ile alakalı kod kısmı:

Aşağıda menü ile alakalı olarak görünümünde değişiklik yapabilmek için ayrı bir kod görmektesiniz.

MVC tarafından varsayılan olarak oluşturulan menüler görüleceği üzere kapsamlı ve dinamik bir yapıda. Sadece şimdiye kadar bahsettiğimiz durumlar değil daha farklı bir çok işlevsellik de menülere kazandırabiliriz. Örneğin menü içinde drop-down yapısı veya menü içinde bir search box yapısı gibi.

 

Örnek olarak aşağıdaki gibi bir navigasyon bar oluşturduğumuzu düşünelim. İçindeki classları tanımlayalım.

Örnek kodlar:

Şimdi burada yine bağlantı butonlarımız yani linklerimiz aynı. Ama buna ek olarak ayrıca farklı linklerde tanımlayacağız, bunlar drop-down menü altında olacak linkler olacak . Şimdi Home, About ve Contact olmak üzere 3 adet bağlantı link mevcut. Amacımız About ve Contact altında drop-down menü ile alt linkler oluşturmak. Ayrıca örneğin About linki altında 3 adet alt link bulunsun, bunların 2 tanesi ile diğerini de bir divider (çizgi) ile ayıralım. Şimdi bu drop-down menü kodlarımızı yazalım:



Burada drop-down classı ile açılır listeleri li etiketi altında gösterdik. Kodlarda görüleceği üzere data-toggle ve dropdown-toggle classları kullanılmış.

About linki altında ayrıca aşağıdaki linkler oluşturulmuş, burada yer alan divideri oluşturmak için boş bir li etiketi kullanıldığını görebilirsiniz.

Şimdi navbarın sağ tarafına aynı hizada olabilecek şekilde bir search box ekleyelim. Kodlar aşağıdaki gibi olsun.



Aşağıdaki gibi bir menü elde etmiş oluruz:

2016012506

Butonlar : Birazda butonlara değinelim. WEB sayfalarında en çok kullanılan bir diğer komponent butonlar, bootstarp tarafından bize sunulan bir kaç buton örneğini aşağıda görebilirsiniz:

2016012507Örnek olarak buton oluşturabilmek için kodları yazalım:






Kodlarda görüleceği üzere her buton iki tane class ile oluşturulmuş durumda.  İlki btn, bu tüm butonlar için geçerli olan class. İkinci class ise btn- ile başlayan ve butona özel olarak tanımlanmış diğer classlar. btn-success, btn-danger gibi. Bu classlar sadece HTML etiketleri ile sınırlı değildirler. Bunlar link olarak kullanılan butonlarda olabilirler, normal buton şeklinde de kullanılabilirler. Yani birbirine ardına açılan drop down menüler gibi bu butonlarda kullanılabilirler. Böylelikle kullanıcı açısından hem daha rahat hem de görsel açıdan çok daha güzel tasarımlar gerçekleştirilebilir.

Örnek olarak drop-down yapısında oluşturulmuş bir buton grubunun kodu aşağıda görülmektedir:

Bu kodların ekran çıktısı aşağıdaki gibidir:

2016012508Yukarıdaki kodda görüleceği üzere drop-down menü buton grubumuz ul etiketi içinde yer alıyor. Her bir seçenek ise li etiketi içinde yer almakta.

Şimdi alerts’e değinelim. BootStrap sayesinde alert kullanımı çok daha kolay bi hale gelmiştir. Örnek olarak aşağıda 4 adet alert mesaj görünümünü görebilirsiniz.

2016012509

Sağ tarafında yer alan x ile alert mesajlarının kapatılması da sağlanabiliyor. Şimdi bu kapatılabilen alert mesajlar içn bir kod örneği verelim:

Görüleceği üzere alert mesaj oluşturmak da tıpkı bir buton oluşturmak gibi gayet kolay. Butonda iki class mevcuttu, bunlar btn ve btn- şeklinde devam eden butona özel olan diğer class. Burada da alert ve alert-success gibi classlar mevcut. Ek olarak bir de alert-dismissible classı da kapatılabilme özelliği için yer alıyor. Yalnız ek bir bilgi vermekte fayda var, alerts birincil ve varsayılan classları desteklemezler, butonlar ise desteklerler. Eğer ben bir danger veya warning alerti oluşturmak istiyor isem yukarıda yer alan örneğin alert-success clasını alert-danger veya alert-warning ile değiştiririm. alert-dismissible ise yukarıda da açıkladığım gibi ilgili alertin kapatılabilmesini imkan sağlamak için sağ üst köşede x işareti yani kapatma oluşturulmadısı sağlar.

Son olarak temalar hakkında kısa bilgi verip yazıyı sonlandıralım. Butonlar ve alertlerde olduğu gibi BootStrap tema düzenlemesi yapmamıza da imkan tanımaktadır. BootStrap yapısında ilgili CSS dosyasında istediğiniz gibi renkler üzerinde, kenarlıklar, boşluklar gibi bir çok alanda düzenlemeler yapabilir ve kendinize göre bir tema oluşturabilirsiniz. Bunu yapabilmek için content klasörü içinde yer alan bootstrap.css dosyasını kullanmalısınız.

2016012510

Ayrıca internet üzerinde biraz araştırma yaparak ücretsiz olarak bootstrap temaları veya az bir ücret karşılığında daha profesyonel bootstrap temaları satın alabilmeniz, elde edebilmeniz mümkün.

Bir yorum

  1. Anlatım için teşekürler

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir