BOOTSTRAP NEDİR, NASIL KULLANILIR?

Bootstrap Nedir, Nasıl Kullanılır?

Bu makalemde sizlere, son zamanların en popüler açık kaynak kodlu HTML / CSS / JS kütüphanelerinden biri olan ve Twitter tarafından geliştirilen Bootstrap’ın ne olduğunu, tam olarak ne işe yaradığını ve nasıl kullanılabileceğini anlatmaya çalışacağım.

Yeni başlayanlar için öneri: Bu tip kütüphaneler başlarken ilk etapta sizi korkutabilir fakat şunu unutmayın, kod tabanındaki her şeyi ezberlemek zorunda değilsiniz. İşleyiş mantığını öğrenmeniz yeterli. Takıldığınız yerlerde İnternetten arama yaparak çözüm bulabilirsiniz.

Bootstrap nedir?

Bootstrap, Twitter tarafından geliştirilen açık kaynak kodlu ve kullanımı oldukça kolay bir HTML / CSS / JS kütüphanesidir. Neredeyse her web tarayıcı ile uyumlu altyapısı ve kütüphanesinde web tasarımcıların işini kolaylaştıracak birçok bileşeni barındırması sebebi ile kullanım alanı oldukça geniştir.

Foundation, Sematic UI, Ulkit, Materialize gibi birçok rakibi olsa da Bootstap’ın kullanım oranı çok daha fazladır.

Twitter Bootstrap Nasıl Kullanılır?

Edinme: Öncelikle Bootstrap’ın kendi sitesinden dosyaları indirmelisiniz. Aslında CDN olarak da kullanabilirsiniz ama indirmek daha sağlıklı olabilir.

Bunun için şuradaki linki kullanabilirsiniz: Bootstrap v4 indir

Kurulum: İndirdiğiniz sıkıştırılmış dosyayı klasöre çıkartın. Daha sonra bootstrap.min.css veya bootstrap.css herhangi birini CSS klasörüne almanız yeterli, hepsi bu. Neden herhangi biri diyorum çünkü .min uzantısı sıkıştırılmıştır, içerisinde değişiklik yapmanız zaman alabilir veya karışık gelebilir.

Eğer değişiklik yapmayacaksanız doğrudan .min uzantısını kullanın. Çok gerekirse kendi stil dosyanızın içerisinden bazı klaslarda !important özelliğini kullanarak dilediğiniz kısımları özelleştirebilirsiniz.

Kullanım: CSS ve isteğe bağlı JS dosyalarını sayfa içerisine çağırdıktan sonra doğrudan HTML içerisinde kullanabilirsiniz. Kullanımı oldukça basittir.

Örnek: Boş bir A4 kâğıdı düşünün. Projenizi bu A4 içerisine yazmanız gerekiyor, fakat alanı duruma göre yönetmelisiniz. Zira bazı başlıklar 20px yer alacak uzunlukta iken bazıları 70-80 px uzunlukta olacak. Bu durumda hayali bir çizgi ile aklınızdan bölümlere ayırır, nereye ne kadar uzunluk sığacak diye ölçümleme yaparsınız değil mi?

bootstrap nasıl kullanılır

İşte Bootstrap mantığı da tam olarak böyle çalışır. Sana 12 tane bölme veriyorum, duruma göre ister 7 tanesini bir amaç için kullan, ister 12 tanesini tek amaç için. Seçim senin.

Bu örnek bir başlık olsun

Yukarıdaki cümleyi Bootstrap ızgaralarına göre yan yana yerleştirecek olsak:

col-md-1 col-md-3 col-md-2 col-md-3 col-md-3 = toplamda 12 parça yaptı. İçerik uzunluklarına göre rakamları biz belirledik ve yerleştirdik. Mobil ekrana geldiğinde eğer ekstra bir diziliş emri vermediyseniz otomatik olarak hepsi alt alta dizilecektir. Çalışma mantığı kısaca bu…

Farklı örnekler görmek için şuraya göz atabilirsiniz.

Bu arada classların “md” diye başlaması sizi şaşırtmasın oradaki anlam ekran ebatlarını yansıtır. Mesela 1920 ekranda şöyle görünsün ama telefonda da şu şekilde dizilsin maksatlıdır. Açılımları ise şöyledir:

xs = extra small screens (mobile phones)

sm = small screens (tablets)

md = medium screens (some desktops)

lg = large screens (remaining desktops)

Ekran genişlikleri ve ölçülendirme için şuraya göz atabilirsiniz

Bootstrap ne gibi avantajlar sağlıyor?

Eğer Bootstrap kütüphanesi ile hiç tanışmadıysanız şimdi tam sırası. Kişisel deneyimlerime dayanarak, kullanmaya başladıktan kısa süre sonra adapte olacağınızı ve bir daha vazgeçmeyeceğinizi söyleyebilirim. Çünkü vazgeçmeniz için hiçbir sebep yok.

Bootstrap kütüphanesi içerisinde birçok kolaylık ve avantaj barındırıyor.

İşte Bootstrap kullanmanız için birkaç sebep:

  • Açık kaynak kodludur bu nedenle kolaylıkla özelleştirilebilir. Kendi çalışmalarınıza uyarlayarak dilediğiniz gibi kullanabilirsiniz.
  • Crossbrowser tabanı sayesinde neredeyse tüm web tarayıcılar ile uyumlu tasarımlar yapmanızı sağlar.
  • Günceldir, içerisinde HTML 5 ve CSS3 trendlerini barındırdığından büyük ölçüde W3C standartlarını da içerisinde barındırır.
  • Bootstrap kütüphane çegirdek yapısı kendiliğinden responsive (mobil uyumludur). Web siteniz için ek CSS klasları yazmanıza ve ekstra boyutlandırma yapmanıza gerek kalmaz, sadece birkaç düzenleme ile telefon, tablet gibi cihazlara uyumlu hale getirebilirsiniz.
  • Sağladığı birçok tasarım seçeneği sayesinde (hazır butonlar, inputlar, tablolar, renkler vb.) çalışmalarınıza hem görsel hem de işlevsel anlamda zenginlik katar.
  • Oldukça istikrarlı çalışır. Hata kodları, kayma sorunları vs. yok denecek kadar azdır.
  • Kolay öğrenilebilir bir yapıya sahiptir. Bu sayede temel CSS ve HTML bilgisi olanlar çok çabuk adapte olabilirler.

Eğer Bootstrap nedir, nasıl kullanılır ile ilgili Türkçe dil destekli ders kaynağı arıyorsanız şu video aradığınız şey olabilir:

Bootstrap hissedarı filan değilim ama bu kadar avantaj sağlayan bir kütüphanenin kullanılmaması için hiçbir sebep göremiyorum :)

Konu ile ilgili düşüncelerinizi paylaşın