Her Yönüyle Bootstrap!

Bu yazımda sizi Bootstrap hakkında kısaca bilgilendirip,kullanımını anlatacağım.Öncelikle  nedir ve ne değildir sorularımızı yanıtlayalım.Twitter tarafından geliştirilmiş açık kaynak kodlu(MIT Lisansına Sahip) bir CSS front-end frameworktur(Önplan kütüphanesi diyebiliriz.).Web projelerin daha hızlı ve daha şık olması için hazırlanmıştır.Web sitenizi birçok cihaz için uyumlu bir hale getirebilir.Buton,giriş,ikon,bildirge gibi birçok elementi kolayca projelerimizde kullanabiliriz.Birçok elementin yanısıra ikonlarlada donatılmış muazzam bir proje!.

Bakabileceğin »

 


Projeye Çağırma

Projemize eklemenin iki yolu vardır.Birincisi indirip proje sayfalarınızda çağırmak, ikincisi ise indirmeden CDN sunucularından çağırmaktır.Ağır projelerde kendi sunucunuz üzerinden çağırmanız daha mantıklı olacaktır. Seçim size kalmış.Hafif bir proje için CDN üzerinden çağırmanızı öneririm

Birinci yoldan kurulumunu anlatayım.

İlk olarak bu adresten indirip dosyayı çıkarmalısınız.Dizininde css,js ve fonts klasörlerini görebilirsiniz.Bu dosyaları kendi proje dizininize yapıştırın.

Ardından kullanacağınız tüm dosyalarda çağırın.

Örneğin;

					
					

İkinci yoldan kullanımda ise kullanmak istediğimiz dosya içerisinde çağırıyoruz.İndirmemize gerek kalmadan doğrudan CDN üzerinden çekiyoruz.

Örneğin;

>



					

 


Bootstarp ile neler yapılabilir?

Bir web sitesi için gerekli olan tüm ögeleri içerdiği için bir siteyi komple bir bütün olarak tasarlayabilirsiniz. Tipografik ögeler, tablolar, imajlar, slider, carousel, modal pencereler, butonlar, dropdown menüler, navigasyon bar, sayfalandırma, etiketler, thumbnaili uyarı ve bilgilendirme balonları, yükleme barları vb gibi bir çok tasarım ögesi hazır olarak sunulmuş ve yapmanız gereken tek şey ihtiyacınız olan kodu kopyala yapıştır yapmak. Aşağıda hazırlanmış örnekleri görebilirsiniz:

See the Pen fsxzt by only (@onlynext) on CodePen.

 

 

Projeyi Bootstarp'la Yapılandırma

Hazır bir sistem olması dolayısıyla neredeyse her şeyi kopyala yapıştır yaparak kullanabiliyorsunuz. Ama öncelikle ana template dosyanız için bazı olmazsa olmazlar var. Sayfamız Html5 olmalı ve Bootstrap için ana css dosyası ve jquery scriptini de sayfanıza eklemelisiniz.

Sayfanızda kullanacağınız her bir öge için getbootstrap.com sitesi referans siteniz olacak. Siteye girdiğinizde üst menüde yer Getting Started, CSS, Component ve JavaScript alanlarına sıkça başvurup gerekli kodları buralardan kopyala yapıştırla alacağız.

 

Hazır bir sistem olması dolayısıyla neredeyse her şeyi kopyala yapıştır yaparak kullanabiliyorsunuz. Ama öncelikle ana template dosyanız için bazı olmazsa olmazlar var. Sayfamız Html5 olmalı ve Bootstrap için ana css dosyası ve jquery scriptini de sayfanıza eklemelisiniz.

 

.col-md-1 class’ı 12ye bölünen satırın her bir sütununu ifade ediyor. Satırımızı kaça bölmek istiyorsak bu classtan faydalanıyoruz. Farklı bir örnek verecek olursak satırı iki eşit sütuna bölmek istiyorsak ilk sütuna .col-md-6 ve ikinci sütuna da .col-md-6 classlarını veriyoruz. Toplamda 12 yapıyor bu da satırın 2 eşit parçaya bölünmesini sağlıyor. Bu oranları değiştirerek (toplamda 12 olacak şekilde) sütun genişliklerini ayarlayabilirsiniz. Aşağıdaki görselden satırların class’larla nasıl sütunlara bölündüğünü daha iyi anlayabilirsiniz:

 

Özellikle sütunların cihazlara göre duyarlı olmasını aşağıdaki class’lar ile sağlayabiliriz;

Masaüstü bilgisayarlar için kullanılan class: .col-md-

Cep telefonları için kullanılan class: . col-xs-

Tabletler için kullanılan class: .col-sm-

Farklı cihazlar için bu sütunların farklı davranmasını istediğimizde masaüstü için bu şekilde tablet için bu şekilde mobil telefonlar için bu şekilde genişlikte davran diyerek aynı class etiketi içine bu genişlikleri birlikte verebilirsiniz. Mesela masaüstü bilgisayarlar için .col-md-3 class’ı ile 4e böldüğünüz satırları cep telefonlarında 2 tane 2’li sütun şeklinde görünsün isteyebiliriz. Yani masaüstünde 4lü sütun görünen bir satır, cep telefonlarında classlar kullanılarak 2 satıra dönüştürülüp her bir satırda 2li sütun görünecek şekilde davranmasını sağlayabiliriz.

Bunu yapmak için class yapımızı aşağıdaki şekilde yapıyoruz:

 

Sitemizi düşündüğümüz senaryoya göre hazırlamaya başlayalım. Bootstrap için gerekli dosyaları bu adresten indiriyoruz, gerekli tüm .css, .js vb dosyalar burada var.

 

bootstrap-3.0.1-dist.zip dosyası sayfanız için olmazsa olmazları barındırıyor. bootstrap-3.0.1.zip dosyası ise Bootstrap’ın tüm dosyalarını (tüm script dosyaları, cssler, less dosyaları, font dosyaları vb) barındırıyor. Eğer ana şablonu oluşturmakla uğraşmak istemiyorsanız indirdiğiniz dosyaların içinde örnek sayfalar var. Bu örnek sayfalardan birini alarak kendi şablonunuz olarak kullanabilirsiniz. Tasarımları yaparken zaten bu örnek sayfaları sık sık kullanacaksınız.

Şimdi örnek bir sayfayı birlikte yapalım. Yapacağımız sitemizde senaryo olarak da en üstte header alanında ana menü onun altında carousel, onun altında 3lü sütunda bir alan ve onun altında da footer olsun. bootstrap-3.0.1-dist.zip ve bootstrap-3.0.1.zip dosyalarını zipten çıkaralım. EXAMPLES klasöründeki NAVBAR klasöründeki örneği şablonum olması için index.html dosyasını kopyalayıp bootstrap-3.0.1-dist klasörünün içine yapıştırıyorum. Fakat direk açtığımda düzgün tasarım görünmeyecektir çünkü css dosyası doğru yerde linki değil bunu düzeltmem gerekiyor. Kopyaladığım index.html içindeki css dosyasının ve bootstrap js dosyasının yolunun başındaki iki üst klasörde olduğunu belirten kısmı siliyorum ve kaydediyorum. Dosyaların yolu aşağıdaki gibi olmalı. Bootstarp js dosyası dokümanın sonundadır.

CSS dosyası yolu: 

Bootstrap js dosyası yolu:    
					

Dosyayı açtığımda şablonu görebilirim artık. Header alanımız hazır. Oradaki .jumbotron divi bizim için gerekli değil onu siliyoruz.

Şimdi carousel i ekleyelim. Carousel’imizi eklemek için getbootsrap.com sitesinde JavaScript bölümüne girip oradan carousel kısmından gerekli scripti kopyala yapıştır ile alıyoruz ve sayfamızda görünmesini istediğimiz yere ekliyoruz

Carousel için gerekli kod:


Carousel’de yer alan her bir slide koddaki aşağıdaki kısım içine yerleştirilmeli. Yani her bir slide için aşağıdaki kodu çoğaltmanız gerek. Bu tip düzenlemeleri temek html bilsine sahipseniz çok kolaylıkla yapabileceğiniz düzenlemelerdir.

Her bir slide için gerekli kod aşağıdaki gibidir. Aktif olan slide için gerekli olan .active classı sadece ilk slide divinde olmalıdır diğerlerinden silmeniz gerekir. Ayrıca imajlar için dosya yolunu ve slide içinde kullanılacak metni de kodda düzenlemelisiniz.

Her bir slide için gerekli kod:

...

Üç tane slide olan bir carousel için kod şu şekilde olmalı:


 

 

Carousel kodlarımızdan sonra sayfamızın ekran görüntüsü aşağıdaki gibi oldu:

 

Sırada 3'lü sütun var. Bunun için Bootstrap’ın sitesindeki Components > Thumbnail > Custom Content kodunu (aşağıdaki) kopyalayıp alıyoruz:

...

Thumbnail label

...

Button Button

 

3'lü sütun istediğimiz için row div’inin içindeki div’i çoğaltıyoruz ve kodumuz aşağıdaki gibi oluyor:

...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Bootstrap'ta dikkat etmemiz gereken bir konu var. Bu da imajların en boy ölçülerini yazmıyoruz. Bootrap imajları responsive olacak şekilde kendisi yöneterek büyütüp küçültüyor.

 

3'lü sütunlarımız da tamam. Ekran görüntüsü aşağıdaki gibi oldu:

 

Son olarak footer alanımızı ekleyelim. Bunun için indirdiğiniz EXAMPLES klasöründeki Sticky Footer klasöründeki örnekteki aşağıdaki kodu alıyoruz ve sayfamızda görünmesini istediğimiz yere ekliyoruz:


 

Vee sayfamız bitti. Çok kolay ve pratik bir şekilde sayfamızı oluşturduk. Sayfamızın son halinin ekran görüntüsü aşağıdaki gibi:

 

Metinleri isteğinize göre uygun şekilde düzenleyip tasarımlarınıza son şeklini verebilir Bootstrap'ın bu kolaylıklarından siz de fayalanabilirsiniz. Yapmış olduğumuz örnek çalışmanın dosyalarını buraya tıklayarak indirebilirsiniz.

Siz de burada anlattığım mantıkla siteniz için gerekli ögeleri kolaylıkla uygulayabilirsiniz. Modal pencereler, dropdown menüler, akordion menüler, uyarı etiketleri, farklı renkte ve özellikteki butonları indirdiğiniz zip dosyasındaki örnekleri inceleyek sitenize ekleyebilirsiniz.

Sağlıcakla Kalın...


Ahmet Musa OK

Posted on 10 Eylül 2014