Bootstrap Nedir ?

Merhabayın uzun zaman sonra Bootstrap ile ilgili bir takım yazılar yazayım dedim. Etrafta doğru düzgün şu bootstrap’ in ne olduğunu bilen ya da eğitimini veren yok. Türkiye’ de bilen çok ama bilmek isteyene yardım eden de bir o kadar az.

Öncelikle kısa çapta Bootstrap nedir ne değildir ne zaman çıkmıştır gibi kısa bilgi verelim : Bootstrap Twitter adlı zat-ı muhterem sitenin alt yapısıdır. Bu alt yapı o kadar kusursuz ve de iyi ki ödüllere doymak bilmedi. En iyi iskelet seçildi vs. Sonrasında Twitter insanları dediler ki yahu millet kullansın şu bizim altyapımızı da nemalansın garibanlar dediler ve altyapılarını ortaya serdiler adı ise : Bootstrap oldu. Öyle bir iskelet sistemi ki bundan sonra Responsive denilen kavram yayılmaya başladı. Velhasıl Twitter Bootstrap ile tanıştı insanlar ve daha mutlu tasarımcılar oluşuverdi güzelim dünyada.

Bootstrap tam olarak nedir derseniz eğer ; içerisinde css, js kodlarını barındıran, css sınıflarını sadece yan yana yazarak responsive web siteleri oluşturabileceğiniz, kullanımı aşırı kolay bir altyapıdır. 4 ana ekran’ dan oluşur ; large, medium, small ve extra small… bu ekranların her birisinde ayrı ayrı nasıl görünmesini istediğinizi belirtirsiniz css sınıfları ile ve de bootstrap’ i öğrenme aşamanız başlamış olur.

Eskiden web sitelerinin genişlikleri düz hesap olsun 960 px genişlikte olsun derdik şimdi bootstrap ile bu strandart 1170 px’ e çıkartıldı. yani bundan sonra web sitenizin genişliği en az 1170 px boyutunda olmalı.

Bootstrap’ in en güzel özelliklerinden birisi ise ; kolon yapısıdır. Nedir bu kolon yapısı ? Bir satır 12 kolondan oluşur ve de 12 kolon üzerinden tasarımlarınızı yaparsınız. bootstrap’ in kolon sınıfları mevcuttur ve bunlar col- ile başlar sonrasında daima ekran boyutu gelir yani col-lg ya da col-md ya da col-sm , col-xs gibi… Burada amaç şudur : Web sitenizde bir kolon var büyük ekranda kaplayacağı yer ile küçük ekranlarda kaplayacağı yerleri belirtiyorsunuz. Örneğin col-lg-12 demek 12 kolonu kapsa demek ve eğer ki col-lg-12 col-sm-6 yazarsak ; bu sınıfı verdiğimiz div büyük ekranın tamamını kapsarken mobil ekranda ekranın yarısını kapsayacaktır. maksimum 12 kolon genişliğindedir ve 12 kolonun genişliği 1170 px’ dir.

Tabiki de daha da bahsedeceğim sadece özet geçmek manasında bunları yazıyorum.