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.
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.
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 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
Çok uzun süredir aradığım bilgiydi çok teşekkür ederim