Piyasadaki en popüler web geliştirme framework’lerinden biri olan Bootstrap; HTML, CSS ve JavaScript‘te son derece duyarlı projeler geliştirmek için kullanılır. Bootstrap’in temel amacı, modern bir web sitesi kurmak ve çalıştırmak için gereken süreyi azaltmaktır.

Resmi Bootstrap web sitesine bakarsanız, Bootstrap’in mobil öncelikli, duyarlı projeler geliştirmek için kullanılan açık kaynaklı bir HTML, CSS ve JS framework’ü olarak tanımlandığını göreceksiniz. 

Fakat daha detaylı tanımlamak gerekirse, Bootstrap, bir web sitesinin yapı taşlarını sıfırdan geliştirmenize gerek kalmaması için yeniden kullanılabilir koda dayanan geniş bir araç yelpazesidir. Kullanıcıların bunu bir front-end geliştirme framework’ü olarak kullanmalarına izin vererek süreci kolaylaştırır. Basit bir düzen oluşturmak isteseniz bile, Bootstrap size yardımcı olabilir. Bootstrap gibi bir framework kullanarak, tasarımınızın tutarlı olduğundan emin olur ve tarayıcılar arası hiçbir sorunla karşılaşmazsınız. 

Başlangıç olarak, bilmeniz gereken dosyalar aşağıdakileri içerir:

  • bootstrap.css – CSS framework
  • bootstrap.js –JavaScript / jQuery framework
  • glyphicons –Icon yazı tipi seti

Bootstrap’in diğer framework’lere kıyasla farklı yaptığı şey, jQuery’yi yoğun bir şekilde kullanmasıdır (JQuery olmadan, tarayıcılar arası uyumluluk mümkün olamazdı ve JavaScript aşırı derecede karmaşık olurdu). 

Bootstrap, bir geliştiricinin duyarlılık ve çok yönlülük açısından en son eğilimleri ve gereksinimleri izleyerek normal bir kullanıcı arayüzü oluşturmak için ihtiyaç duyacağı tüm araçları içerir. CSS dahil düzinelerce uzun kod dizesi yazmaktan sıkıldıysanız, Bootstrap işlemi muazzam ölçüde basitleştirerek size yardımcı olacaktır.

Bootstrap Geliştiriciler İçin Neden Önemlidir?

blank

Eskiden bir proje saatler süren çalışmalar gerektirirdi ve ihtiyaç duyulan programlama becerileri çok yoğundu, tek bir hata bütün projeyi mahvedebilirdi. Bu yüzden geliştiricilerin sorumlulukları çok fazlaydı. 

Bir framework olarak Bootstrap’in yaptığı şey, kodu tutarlı ve yüksek kalitede tutarak geliştirme sürecini basitleştirmektir. Kodu tamamen kendi başınıza yazmak bir seçenek olsa da, iyi test edilmiş ve kanıtlanmış bir framework’e sahip olmak son derece akıllıca bir yöntemdir.

Bir framework ile aşağıdakileri yapabilirsiniz:

  • Gereksiz tekrarı önlemek.
  • Büyük değişiklikler yapmadan farklı gereksinimlere uyum sağlamak.
  • Kodunuzla tutarlı olmak.
  • Yeni tasarımları her zamankinden daha hızlı ve daha kolay prototiplemek.
  • Tarayıcılar arası uyumluluktan yararlanmak.

Neden Bootstrap?

blank

Bootstrap esnek ve birlikte çalışması kolay olan bir framework olduğu için web tasarımcı ve geliştiricilerin takdirini kazanmıştır. Tüm bu popülerliğe rağmen ısrarla Bootstrap’i denemek istemiyorsanız, Bootstrap’in; tarayıcı uyumluluğuna sahip olduğunu, bileşenleri hızlı bir şekilde yeniden kullanabilmenizi sağlayacağını ve jQuery için yerleşik desteğe sahip olduğunu göz önünde bulundurun. Bootstrap, seçtiğiniz bir IDE veya düzenleyici ile ve ASP.NET‘ten PHP‘ye ve hatta Ruby’ye kadar değişen sunucu tarafı dilleriyle birlikte kullanılabilir.

Sezgisel tasarımı sayesinde Bootstrap’te uzmanlaşmak daha kolaydır. Grid sistemi bir fark yaratırken, çok sayıda yeniden kullanılabilir bileşen, bir geliştirici için her şeyi daha rahat ve esnek hale getirir. Eklenti desteği, bu framework’ün yeteneklerini daha da genişletir. 

Yukarıdaki açıklamalar sizi hala tatmin etmediyse, Bootstrap’in faydalarını daha derinlemesine incelemenin zamanı geldi.

1. Zaman kazandırır

Bootstrap kullanmak çok zaman kazandırdığı için kullanışlıdır. Her programcı çabaladığı kalite ve tutarlılık düzeyini korurken, geliştirme süreci büyük ölçüde hızlanır. Bootstrap kullanıldığında, geliştiricilerin tarayıcılar, cihazlar veya platformlar genelinde ihtiyaçlarına uyacak şekilde belirli öğeleri yeniden tasarlamaları veya bir hatanın nerede olduğunu anlamaya çalışmak için saatlerini harcamaları gerekmez. Zor işlerin çoğu artık geliştiriciler tarafından değil, Bootstrap’in kendisi tarafından ele alınır.

Bootstrap kullanarak, back-end geliştiriciler bile HTML ve CSS’yi anlamaya zaman harcamadan duyarlı front-end’ler oluşturabilir. Bootstrap statik bir siteye, bir PHP sitesine veya bir CMS’ye uygulanabilir. Esnekliği, zamandan tasarruf etmeye ve çok fazla değişiklik yapmaktan kaçınmaya yardımcı olur.  Dahası, birkaç dakika içinde indirebilir ve hemen çalışmaya başlayabilirsiniz.

2. Görüntü yeniden boyutlandırmanıza yardım eder

Geliştiricilerin bir proje üzerinde çalışırken karşılaştıkları zaman alıcı süreçlerden biri de görüntüleri yeniden boyutlandırmaktır. Neyse ki Bootstrap, görüntüleri otomatik olarak yeniden boyutlandırmak, önceden tanımlanmış CSS kurallarını kullanmak ve görüntülere yeni bir sınıf eklemek için kendi koduyla birlikte gelir.

3. Tarayıcı dostudur

Günümüz dünyasında insanlar tercihlerine bağlı olarak her tür cihazı, platformu ve tarayıcıyı kullanır. Bootstrap çoğu tarayıcıyla uyumludur ve her yerde çalışan ölçeklenebilir web siteleri ve uygulamalar oluşturmaya yardımcı olur.

4. Yüksek derecede özelleştirme sağlar

Yazılımcılar, Bootstrap özelleştirme sayfasından bir projeye dahil etmek istedikleri yönlerle ilgili seçimler yapabilir ve bunları ihtiyaçlarına göre daha da değiştirebilirler. Sadece bir kutuyu işaretleyerek özellikleri açıp kapatabilirler.

Bu özelliklerden bazıları, yazı tiplerini veya baskı ortamı stillerini değiştirme gibi CSS özelliklerini; giriş gruplarını, etiketleri veya sayfalamayı değiştirme gibi bileşen yönlerini ve hatta web sitesini daha duyarlı hale getiren yardımcı programları içerir.

5. Tutarlıdır

Bootstrap, her zaman aynı kalan iç araçlardan yararlanır. Bootstrap’in kurucu ortağı Mark Otto’nun belirttiği gibi, Bootstrap’ın arkasındaki konsept, tasarımcıları geliştiricilerle eşleştirmeye ve işi herkes için kolaylaştırırken, kodu tutarlı ve hatasız tutmaya dayanır.

6. Kolayca entegre edilebilir

Bootstrap, diğer platformlarla ve hatta farklı framework’lerle hızla entegre edilebilir. Bunu halihazırda var olan sitelerinde veya gelecekte yayınlanacak sitelerde kullanabilirsiniz. Bu platformlardan birinde zaten sahip olduğunuz CSS’de Bootstrap’in bazı belirli öğeleri kullanılabilir ve entegrasyonu sorunsuz bir şekilde gerçekleştirebilir.

7. Bazı bileşenler önceden biçimlendirilmiştir

Bir projeyi şekillendirmek için en uygun yaklaşımlardan biri, önceden şekillendirilmiş bileşenleri kullanmaktır. Bootstrap, bir proje geliştirirken kullanabileceğiniz açılır menüler, uyarılar veya gezinme çubukları gibi önceden tasarlanmış bileşenler içerir. Bu önceden tasarlanmış bileşenler, zengin özelliklere sahip bir proje oluşturmaya yardımcı olur. Önceden şekillendirilmiş bileşenler, etkileyici web tasarımlarının ardında yatan en büyük etkendir.

8. Büyük bir topluluğa sahiptir

Bootstrap topluluğu, sahip olabileceğiniz herhangi bir soruyu yanıtlayacak veya uğraştığınız bir sorunu çözecek büyük bir topluluğa sahiptir. Platformda 500’den fazla katılımcı ve yaklaşık 10.000 işlem mevcuttur.

Bootstrap’in Dezvantajları Nelerdir?

blank

1. Her Bootstrap Web Sitesi Benzer Görünür

Bootstrap, standart bir arayüz üzerinde daha hızlı çalışmak amacıyla oluşturuldu ve standart web geliştirme kavramlarıyla tamamen uyumlu olmayan, amaca yönelik bir araç haline geldi. Bunun en büyük dezavantajı, Bootstrap ile oluşturulan her şeyin çok benzer görünüme sahip olmasıdır.

2. Öğrenme Eğrisine Sahiptir

Bootstrap kullanmayı öğrenmek kolay olsa da, buna biraz zaman ayırmanız gerekir. Kullanılabilir tüm Bootstrap CSS sınıflarını ve ayrıca Bootstrap bileşenlerinin bu sınıflara nasıl eriştiğini bilmeniz gerekir. Ayrıca grid sistemini denemek ve alışmak için biraz zamana ihtiyacınız vardır. 

3. Sayfa Yüklenmesini Geciktirir

Bootstrap ile duyarlı bir web sitesi oluşturmak kolay olsa da, daha yavaş yükleme süresi açısından sonuçlar istenildiği gibi olmayabilir. Ayrıca, Bootstrap tarafından oluşturulan dosyaların boyutu çok büyük olabilir ve bu da sizin için işleri oldukça yavaşlatabilir. 

Bootstrap Hangi Bileşenleri İçerir?

Bootstrap ile geliştiriciler, web sitesine eklenebilecek bir dizi bileşene sahip olur. Bunlar aşağıdakileri içerir, ancak bunlarla sınırlı değildir:

  • Açılır menüler
  • Gezinme çubukları
  • Küçük resimler

Bileşenlerin her biri, geliştirme süreci boyunca daha tutarlı bir tasarım temasına izin veren tek tip bir tasarım şablonu üzerine inşa edilmiştir. 

Bootstrap Paketleri Ne İçerir?

blank

Bootstrap, istenen sonucu verecek paketleri içerir. Şimdi bu pakatlerin neler olduğunu inceleyelim:

İskelet: Grid Sistemi, bağlantı stilleri ve arka plan ile temel bir yapı sağlar.

CSS: Genel CSS ayarları özelliği, temel HTML öğeleri stili ve gelişmiş bir grid sistemi ile birlikte gelir.

Bileşenler: Bootstrap, ikonografi, açılır menüler, gezinme, uyarılar, açılır pencereler ve daha fazlasını sağlamak için oluşturulmuş birçok yeniden kullanılabilir bileşen içerir.

JavaScript Eklentileri: Birçok özel jQuery eklentisi içerir. Hepsini veya tek tek kolayca ekleyebilirsiniz.

Özelleştirme: Kendi stilinizi elde etmek için Bootstrap bileşenlerini, LESS değişkenlerini ve jQuery eklentilerini özelleştirebilirsiniz.

Bootstrap Grid Sistemi

Grid’ler yani Izgaralar, içeriğin eklenebileceği birden çok sütun ve satır kullanarak sayfa düzenleri oluşturur. Sayfanın görüntülendiği cihaz ekranı büyürse, grid 12 sütuna kadar ölçeklenir. Bu, sayfayı ekrana sığdırır.

Tasarımcıların kendi düzenlerini oluşturabilecekleri önceden tanımlanmış sınıflar vardır. Sunum yerine mizanpaj yapısına daha fazla odaklanmak istemeniz durumunda, ızgara daha az karışım kullanacaktır.

Grid sistemi ayrıca daha küçük ekranlara sığacak şekilde daraltılabilir. Bu esneklik, tasarımcıların framework dışı bir geliştirme temeline kıyasla nispeten daha az çabayla görsel ve teknik olarak daha kapsamlı web siteleri oluşturmasına olanak tanır.

Bootstrap 4 Nedir?

2013 yılında, Bootstrap 3’ün piyasaya sürülmesinden yaklaşık 4 yıl sonra, 4 Ağustos 2017’de yayınlandı. 

Bootstrap 4, Bootstrap’ın en yeni ve en son sürümüdür. Duyarlı, mobil öncelikli web siteleri geliştirmek için en popüler HTML, CSS, JavaScript framework’üdür.

Bootstrap 3’ün aksine; bazı yeni bileşenlere, daha hızlı stil sayfasına, daha fazla düğmeye, efekte ve daha fazla yanıt hızına sahiptir.

Bootstrap 4, tüm büyük tarayıcıların ve platformların en son sürümlerinden bazılarını destekler.

Yukarıda sizinle Bootstrap’in ne olduğunu, ne işe yaradığını ve önemini incelecik. Siz Bootstrap kullanıyor musunuz? Eğer kullanıyorsanız, içeriğimizi geliştirmek için deneyimlerinizi ve önerilerinizi paylaşmayı unutmayın.