BOOTSTRAP NEDİR, NASIL KURULUR VE NASIL ÇALIŞIR?

Bootstrap Nedir, Nasıl Kurulur ve Nasıl Çalışır?

Bu makalemde sizlere, web tasarım Dünyasını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. 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 ücretsiz, açık kaynak kodlu ve iş yükünü oldukça oldukça hafifleten 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 indirilir, 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.

bootstrap indir

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

Kurulum ve kullanım

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, kalan 5'i de farklı bir amaç için kullan. İstersen de 12 tanesini tek amaç için kullanabilirsin. Dilediğin gibi seçim yapabilirsin ancak toplamda 12 parça olmalı.

Örnek:

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

Neden Bootstrap, avantajları ne?

Dünya'nın en gelişmiş ve tanınmış CSS kütüphanesi. Bootstrap, duyarlı web sayfaları yapabilmenize olanak tanır ve kullanımı oldukça kolaydır. 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.
  • Mobil uyumlu web sayfaları oluşturmak Google SEO konusunda da bir adım önde olmak anlamına gelir. Zira Google'ın geliştirdiği AMP teknolojisi bu konuya ne kadar önem verdiğinin bir örneği.
  • 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:

Sonuç olarak; Bootstrap, ücretsiz, iş yükünüzü hafifletebilecek, responsive altyapısından faydalanmanızı sağlayarak duyarlı sayfalar yapabileceğiniz yenilikçi bir web teknolojileri ürünüdür. Kısa zamanda öğrenerek kullanmaya başlayabilirsiniz!

Bootstrap Nedir, Nasıl Kurulur ve Nasıl Çalışır? Konu başlığı ile ilgili düşüncelerinizi paylaşın!