Kapat
Anasayfa 540 0

BootStrap Nedir? Nasıl Kullanılır?

Bootstrap, dünyanın en çok kullanılan front end aracıdır. Web sitelerinin ihtiyacı olan bileşenleri tek çatı altında sunan bir kütüphanedir. Yapısı itibariyle mobil uyumlu web sitesi tasarımı yapmayı kolaylaştırır, bileşenleri ve javascript kütüphaneleriyle zengin içerikler oluşturmanızı sağlar. Görsel ve işlev açısından birçok avantaj ve kolaylık sağlamaktadır.

Ne İşe Yarar?

Çağımızda her şey internet üzerine taşındı. İşlerimiz, marketler, mağazalar… Bir web sitesinden aranan özellikler de haliyle çok arttı. Bir web sitesi oluşturmak istiyorsanız; kontrol etmeniz gereken çok iş yükü var. Bootstrap ise sizi birçok ciddi iş yükünden kurtarır. Bir web sayfası, bir arayüzü kodlarken pek çok değişken göz önünde bulundurulmalı. Bunları temel olarak 3 bölüme ayırabiliriz; ölçeklendirme, mobil uyumluluk ve bileşenler (butonlar, uyarılar vb.). Bu içerikte öncelikle Ölçeklendirme anlatılacaktır.

1)Bootstrap ile Ölçeklendirme ve Hizalama

Web siteniz, farklı çözünürlüklere sahip kullanıcılar tarafından ziyaret edilir. Her biri farklı boyuttaki ekranlardan sitenizi ziyaret edebilir. Bu nedenle sahip olduğunuz site bilgisayar, tablet, her türlü cep telefonu ile de uyumlu olmalıdır. Örneğin; 1920x1080px ekran çözünürlük değeri yeni nesil bilgisayarda artık varsayılan bir değerdir. Yapacağınız tasarım, bu çözünürlüğün içinde bir yerde olmalı.

Yeni nesil web sitesi tasarımlarında içerikler, 1140px ile 1360px genişlik değerleriyle ortalanıyor. İşte biz buna “Container” diyoruz. “Taşıyıcı alan” da denilebilir. Tıpkı yük taşımak için kullanılan konteyner yapıları gibi düşünebilirsiniz. Web sitenizin çoğu kritik verileri ortalanmış bu ana taşıyıcılar içinde yer alır. Bootstrap, CSS dosyasında varsayılan bir değer ile bu ölçeklendirmeyi yapar. İstediğimiz gibi değiştirebiliriz. Yani; varsayılan olarak 1080px geliyorsa, siz bunu 1200px yapabilirsiniz.

@media (min-width: 1200px) .container { max-width: 1200px; }

 Container sınıfları sayesinde sitenin içerik sınırlarını soldan ve sağdan belirli bir ölçüyle kolayca sınırlayabiliriz. Ayrıca bunu her ekran için ayrı ayrı belirtebiliriz. @media + CSS etiketleri ile mobil cihazların dikey ve yatay ekranları, tablet bilgisayarın dikey ve yatay ekranları ve bilgisayarlar için aynı işlemleri kolayca yapabiliriz. Bootstrap bize “hazır ve uygun” bir biçimde tamamını sunuyor.

Site içeriğinin ortalanması dışında, bir sonraki kritik ölçeklendirme işlemi ise satır ve sütunlarda yapılır. Sitenizin her bir içeriği, aslında birer satırda yer alır. Tıpkı kitap ya da gazete gibi. Her satırı da çeşitli sütunlara böleriz. Bootstrap, matematiksel olarak aslında en mantıklı bölme işlemini bize sunar. Bu işlem “Ekranı 12 eşit parçaya bölmektir.”

Diyelim ki; 1200px container genişliğini belirttik. Container’ı 12 parçaya böldüğümüzde 1 sütun 100px genişliğe sahip olur. Orta boyutta ekran için class= “col-md-1”dir. “col-md-6” ise 600px yapar ve taşıyıcıyı tam olarak ikiye böler. İşte biz içeriklerinizi bu sütunlara yerleştiririz. Örnekteki 100px genişliğe sahip hücrenin içine bir resim eklediğimizi varsayalım. Hücreler, birbirinden boşlukla ayrılması için varsayılan olarak soldan ve sağdan 15px boşluğa sahiptir. Yani bu bir birimlik hücreye eklediğimiz resim, 70px genişliği ile sınırlandırılır. İşte tüm bunlara biz “Layout Yönetimi” deriz. Böylelikle içeriklerimize belirli standartlar kazandırmış oluruz. Bu sayede dikey ve yatay olarak kolayca hizalama yapabiliriz. Ana hatları ile bu olan ölçeklendirmeyi, daha sonraki içeriklerde daha detaylı olarak görebilirsiniz….

Merve Kibir {Merve Kibir}