Bootstrap nedir? Temel seviye giriş. | Web bulutu

Bootstrap nedir? Temel seviye giriş.

bootstrap-nedir-temel-seviye-anlatim

Merhabalar  bu yazımızda  bootstrap kullanımı hakkında  bilgiler sunup, ufak tefek örnekler ile nasıl kullanıldığını açıklamaya  çalışacağım. Öncelikle bootstrap, twitter  tarafından oluşturulmuş ve tasarımında  kullanılmak üzere  hazırlanmıştır. Daha sonra  bunu geliştiricilere  sunarak, açık kaynak halinde  paylaştılar ve sürekli güncellenmektedir.

İlk olarak daha çok neden tercih edildiğini sorarsanız eğer, mobil dizayn konusunda  oldukça  fayda sağlamakta. Bir başka  amacı ise, projenizi bitirme  zamanınızı oldukça  düşürmekte. Bir web sitesini kodlarken  responsive  olarak  dizayn  etmek oldukça  zahmetli bir iş, ve çok ciddi  vakit kayıpları demektir. Eğer css konusunda  tecrübe sahibi iseniz, bootstrap’ın kullanımı çok kolay gelecektir. Sadece  class’ların isimlerine  biraz aşina  olmanız  yeterlidir. Fakat bootstrap sadece  css framework’ü demek değildir çünkü içerisinde  javaScript  ve social fontlar da  bulunmakta. Bu yüzden  web geliştiricileri ve yazılım firmalarının vazgeçilmezi arasında  yer almakta.

Grid sistemi ; 

Bootstrap’in en çok tercih edilme  sebebi ise grid sistemidir. Grid sistem tam olarak,  ekranı parçalar  halinde   bölerek çalışmak demektir. Yani Şöyle düşünün, Ekranda yanyana dizilmiş 12 tane div var ve sadece  width değeri atanmış bir şekilde  size sunulmakta. Sizler ekstra class’lar girerek  yükseklik veya diğer  özellikleri belirleyerek kullanıyorsunuz.

col-lg-6 col-lg-6
col-lg-4 col-lg-4 col-lg-4
col-lg-3 col-lg-3 col-lg-3 col-lg-3
col-lg-12

Üstteki örnekte  fark ettiyseniz, divler  kullanılarak  ekranın 12 parçası tamamlanmaya  çalışılır. Bu örnekler çoğaltılabilir, mesela 9+3, 10+2, 1+11 gibi gibi istediğiniz biçimde  parçalar halinde  çalışabilirsiniz.

Grid sistem Class’ları aşağıdaki gibidir.

Col-lg-  :  1200 px ve üzeri cihazlar için geçerli.

Col-md- : 992 px   ve üzeri cihazlar (laptop,masaüstü) için geçerli.

Col-sm- :  768 px ve üzeri cihazlar(tablet) için geçerli.

Col-xs- : 768 px altı cihazlar(Mobil & tablet) için geçerli.

Girid sistemine  daha  detaylı bir şekilde  bir sonraki yazımda  değineceğim. Şimdilik temel  bilgileri ve  nasıl kullanıldığını bilmeniz yeterlidir.


 

 

Components ;

Bootstrap grid sistem dışında,  hazır components’leri sayesinde de  bir hayli sevilmekte. Components, hazır olarak sunulmuş web sitesi araç gereçleridir.  Buraya  tıklayarak, sizlerin kullanımına  sunulmuş  bir sürü içeriğe  ulaşabilirsiniz. Sayfa ingilizce olabilir ama  hiç önemli değil, zaten css bilginiz varsa  ne  anlatmak istediğini kolayca  anlayabilirsiniz.  Components kullanımını bir başka  yazımda  detaylı bir şekilde  anlatmaya çalışırım. Bootstrap  okunarak anlayabilecek veya  yazarak anlatılabilecek gibi bir sistem değil, açıp kurcalayıp öğrenmeniz sizin açınızdan  daha  kolay olacaktır.

bootstrap-turkce-anlatim-components
bootstrap-turkce-anlatim-components

 


 

Hazır temalar ; 

Bootstrap’in  kendi içerisinde  hazır sunduğu bir kaç template mevcut.  Buraya  tıklayarak, hem bootstrap’i sayfanıza  dahil etme  işlemlerini öğrenebilir hem de  biraz aşağıda  yer alan  hazır bootstrap template’ler ile projeye başlangıç yapabilir ve hatta geliştirebilirsiniz.

bootstrap-turkce-anlatim-css-template
bootstrap-turkce-anlatim-css-template

 

Css bilgisine ulaşma ; 

Buraya  tıklayarak açılan sayfada  bulunan components’leri kullanabilir  ve  aldığı değerleri görebilirsiniz. Bazı nesneler, padding veya margin almış olabiliyor, hangilerinin ne değere  sahip olduğunu, web sitesinde nelere  dikkat etmemiz gerektiği anlatılan bu bölümde,  işinizi kolaylaştıracak oldukça zengin bir kaynak bulunmakta.

bootstrap-turkce-anlatim-css-template2

 


 

Bootstrap kabaca, hazırlanmış css bloglarını kullanmaktan ibaret, yani zor bir tarafı yok. Css öğrenmek, bootstrap öğrenmekten daha zordur inanın. Ama projelerinizde  bootstrap’e  yer vermeyi, onu kullanmayı bir deneyin. Oldukça başarılı tasarımlar  çıkartacağınıza  eminim. Bundan sonra  2 yazı daha yayınlamak istiyorum, 1. Bootstrap grid sistemini detaylıca  kullanma, 2. Components’leri kullanmak   olacak.  Bu hafta sonu ygs  muhabbetinden  dolayı pek vakit  bulamayabilirim ama önümüzdeki hafta, 1 güne  2 konuyu da  sığdırabilirim diye düşünüyorum 🙂 Görüşmek üzere..

Web bulutu


1 Comment

Bir cevap yazın

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