Bootstrap Nedir? Bootstrap Öğrenmeye Nasıl Başlanır?

Kariyer yolculuğunuza front-end geliştirici olarak devam etmeyi düşünüyorsanız, muhtemelen Bootstrap ve onun çeşitli versiyonlarını duymuşsunuzdur. Fakat daha önce Bootstrap’i duymadıysanız, Bootstrap için kısaca en popüler web geliştirme framework’lerinden biridir ve HTML, CSS ve JavaScript’te responsive projeler oluşturmak için kullanılır diyebiliriz.

Bootstrap ile ilgili kısa bir giriş yaptıktan sonra şimdi adım adım detaylara geçebiliriz. 

Bootstrap Nedir?

Bootstrap, responsive yani mobil uyumlu web siteleri geliştirmek için kullanılan açık kaynaklı ve en popüler HTML, CSS ve JS framework’üdür.

Kolay ve hızlı web geliştirme için kullanılan bir front-end framework’ü olan Bootstrap; HTML, CSS ve JavaScript ile yazılmış geniş bir yeniden kullanılabilir kod koleksiyonuna sahiptir. Bu da yazılımcı ve geliştiricileri çok fazla CSS kodu yazmaktan kurtarır ve web sayfaları tasarlarken zamandan tasarruf etmelerini sağlar. Bootstrap’in en son sürümü Bootstrap 5.0’dır.

Şu anda GitHub’da barındırılmaktadır ve getbootstrap.com’dan ücretsiz olarak indirilebilir.

JQuery ile oluşturulmuş bir ızgara sistemine, önceden oluşturulmuş bileşenlere ve eklentilere sahiptir. Bu nedenle Chrome, Firefox, Internet Explorer, Safari ve Opera gibi çoğu tarayıcıyla uyumludur. Ayırca Bootstrap kullanılarak oluşturulan web siteleri ve uygulamalar, iOS ve Android ile de uyumludur.

Bootstrap Tarihi

Bootstrap, Mark Otto ve Jacob Thornton tarafından geliştirildi ve 2010 yılının ortalarında Twitter için oluşturuldu. Açık kaynaklı framework’ten önce, bootstrap “Twitter Blueprint” olarak biliniyordu.

Başlangıçta, bu framework sadece dahili cihazlar için bir destek framework’ü olarak oluşturuldu. Fakat 19 Ağustos 2011’de GitHub’da açık kaynaklı bir proje olarak başlatıldı ve Haziran 2014’te Bootstrap, GitHub’daki 1. proje oldu.

Bootstrap’in Özellikleri Nelerdir?

Aşağıda Bootstrap öne çıkan özelliklerinden bazılarına ulaşabilirsiniz

1. Kullanımı kolaydır

Yeni başlayanlar için anlaması ve kullanması çok kolaydır. Temel HTML ve CSS bilgisine sahip herkes Bootstrap kullanabilir. 

2. Kolayca özelleştirilebilir

Bootstrap responsive 12 sütunlu ızgara, düzen ve bileşenlerle tasarlanmasına rağmen, özelleştirilmesi de çok kolaydır. Sadece bazı değişiklikler yaparak ızgarayı düzeltebilir veya yanıt verebilir hale getirebilirsiniz. CPU tabanlı ve mobil tabanlı tarayıcı ızgaralarında sütunların dengelenmesi ve iç içe yerleştirilmesi de kolaydır.

3. Yardımcı programlar sağlar

Yardımcı programlar, CSS stilinden sorumlu Bootstrap’in bir parçasıdır. CSS, özelleştirme için kullanmanız gereken birincil bileşendir. Kullanılan en kullanışlı yardımcı programlar:

• Renk
• Sınır
• Konumlandırma
• Metin
• Görüntüleme
• Marj

4. Birçok bileşen mevcuttur

Bootstrap’in birçok bileşeni vardır. Bu bileşenler web sitenizin tasarımına göre herhangi bir öğeyi seçmenize izin verir. Tüm Bootstrap bileşenlerinin bir kısmı, tüm ekranlar için uyumludur. Bazı bileşenler kendi JS entegrasyonlarıyla birlikte gelir, bu nedenle kodu düzenleme konusunda endişelenmenize gerek kalmaz.

• Modlar
• Liste grupları
• Uyarılar
• Açılır menüler
• Carousel

5. Kolayca kullanılabilen şablonlar sağlar

Kolayca kullanılabilen şablonlar, deneyimsiz kullanıcıların basit bir eğitimden sonra bir web sitesi oluşturmasını kolaylaştırır.

6. Tarayıcı dostudur

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

7. İyi tasarlanmış bir duyarlı ızgaraya (ersponsive grid) sahiptir

Bu muhtemelen Bootstrap’in en büyük avantajıdır. İyi tasarlanmış bir ızgara sistemi, web sayfalarını çeşitli ekran boyutlarında duyarlı hale getirir.

Bootstrap, her cihaza ve ekran çözünürlüğüne uyum sağlayabilen bir mobil grid sistemi sağlayarak buradaki tüm işi yapar. Ayrıca Bootstrap ile web sayfanızın yalnızca masaüstü, tablet veya mobil izleyiciler tarafından görülebilen öğelerini işaretlemek de kolaydır.

8. Ücretsiz ve açık kaynaklıdır 

Hiçbir kısıtlama yoktur. Bootstrap, geliştiricilerin çabalarına katkıda bulunabilecekleri GitHub’da mevcuttur.

Bootstrap Nasıl Kullanılır?

Bootstrap’i projenize dahil etmek için birkaç seçenek vardır. Bu seçenekler aşağıdaki şekidedir:

• Kullanıma hazır derlenmiş CSS ve JS kodunun indirilmesi.
• Kaynak dosyaların indirilmesi
• Bootstrap CDN ile (jsDelivr ile)
• Package Managers aracılığıyla
• NPM
• Yarn
• RubyGems
• Composer
• NuGet

Bootstrap Paketi Neleri İçerir?

Bootstrap paketi, CSS Bootstrap klasörü ve JS Bootstrap klasörü olmak üzere iki ana klasörden oluşur.

CSS Bootstrap klasörü aşağıdaki dosyaları içerir:

bootstrap.css

bootstrap.css.map

bootstrap.min.css

bootstrap.min.css.map

bootstrap-grid.css

bootstrap-grid.css.map

bootstrap-grid.min.css

bootstrap-grid.min.css.map

bootstrap-reboot.css

bootstrap-reboot.css.map

bootstrap-reboot.min.css

bootstrap-reboot.min.css.map

JS Bootstrap klasörü aşağıdaki dosyaları içerir: 

bootstrap.bundle.js

bootstrap.bundle.js.map

bootstrap.bundle.min.js

bootstrap.bundle.min.js.map

bootstrap.js

bootstrap.js.map

bootstrap.min.js

bootstrap.min.js.map

Not: Bu dosyalar yüklediğiniz sürüme göre değişiklik gösterebilir.

Bootstrap Ne Zaman Kullanılır?

Bootstrap; masaüstü bilgisayarlarda, telefonlarda ve tabletlerde hızla web siteleri oluşturmaya olanak tanıyan güçlü bir araçtır. Bootstrap’in bazı dezavantajları olsa da, çoğu durumda web sitesi yanıt hızının, geniş uyumluluğun ve zamandan tasarruf etmenin faydaları, eksilerinden daha ağır basar. Biraz fazladan zaman ve çaba ile en büyük dezavantajları bile ortadan kaldırabilirsiniz.

Bootstrap Öğrenmeye Nasıl Başlanır?

Bootstrap, front-end geliştirici olarak sahip olunması gereken değerli bir beceridir. Bootstrap’in en iyi yanı; CSS, HTML ve JavaScript gibi framework’lerde geliştirme becerilerini daha profesyonel hale getirir. Online kurslar ya da YouTube videoları ile sadece birkaç saat içinde Bootstrap öğrenebilir ve hiç vakit kaybetmeden ilk Bootstrap web sitenizi oluşturmaya başlayabilirsiniz.

Özetle diyebiliriz ki, Bootstrap, dünyanın en sevilen front-end bileşen kitaplığıdır. Bootstrap kullanarak, web üzerinde kolayca duyarlı ve mobil uyumlu bir web sitesi, hızlı bir şekilde prototip veya Sass değişkenlerini, eklentileri ve ızgara sistemini kullanarak tüm bir uygulama oluşturabilirsiniz.