2013 - 2024 © BİRNC
Bootstrap Nedir?
Bootstrap, web geliştiricilerinin daha hızlı sonuçlanan kullanıcı odaklı ve duyarlı web sayfaları oluşturabilmeleri için önceden tasarlanmış açık kaynaklı bir web sitesi ön yüz arşividir. Sonradan düzenlenebilir yapısı ile HTML, CSS ve JS (JavaScript) kodlarıyla yazılmıştır. Günümüz teknolojisiyle geliştirilen web sitelerinin kullanıcılarıyla kusursuz etkileşimini destekler.
Boostrap'ın Tarihçesi ve Sürümleri
✦ Bootstrap (2011)
2010 yılının Haziran Temmuz aylarında Twitter'da çalışan "Mark Otto" ve "Jacob Thornton" tarafından Twitter Blueprint olarak oluşturuldu. Resmi olarak 19 Ağustos 2011 yılında piyasaya sürülmüştür.
✦ Bootstrap 2 (2012)
2012 yılının ortalarında yayınlanan bu sürümde kütüphanenin tamamına isteğe bağlı olarak oluşturulabilen stil sayfaları ile kullanıcılar için yapılabilen duyarlı işlevsellik fonksiyonları katılmıştır.
✦ Bootstrap 3 (2013)
Duyarlı işlevselliğin mobil öncelikli yaklaşımlarla varsayılan olarak çalışması için Bootstrap 3 sürümü yeniden yazılmıştır ve 19 Ağustos 2013 tarihinde kamuoyuna duyurulmuştur. Bootstrap 3'ün tasarlanması ve geliştirilmesi 9 ay sürmüştür. Teknik olarak 319 katılımcıyla birlikte ilerlenerek 2.700'den fazla yeni taahhüt yerine getirilmiştir. 379 dosya tamamen değişmiştir ve 84.000 ekleme yapılmıştır.
✦ Bootstrap 4 (2015)
29 Ekim 2014 tarihinde Bootstrap 4, Mr. Mark Otto tarafından duyurulmuş ve ilk alfa sürümü 19 Ağustos 2015'te piyasaya sürülmüştür. Bu sürüm mobile-first yani "ÖNCE MOBİL" sloganı ile üretilmiştir. Bir web sitesinin görünen ön yüzüyle ilgili oluşturulan bir Framework'dür diyebiliriz. O zamanki teknolojiyle farklı cihazlardaki meydana gelen ekran çözünürlülük sorunlarını ortadan kaldırmak amacıyla sunulmuştur. Farklı cihazlarda ve farklı ekran çözünürlülüğüne sahip cihazlarda ziyaret edilen web sitelerinde oluşan yerleşim sorunları bu sürümle çözülmüştür. O yıllarda mobil cihazların yaygınlaşması kullanıcı odaklılık açısından web geliştiricilerini aynı site için hem masaüstü hemde mobil site olarak 2 farklı site yapmaya mecbur bırakıyordu. Ayrıca Google Chrome, Mozilla, Microsoft Edge, Opera, Safari vb. gibi tarayıcılarda oluşan her web sitesinin farklı görünüm hataları Bootstrap 4 sürümüyle giderilmiştir. Sonuç olarak CSS ve Javascript'in JQuery ve Popper kütüphaneleri içerisinde yer alan Bootstrap 4, Web Tasarım ajansı birNC'ye göre genel olarak kullanıcı odaklı ve responsive web sitelerin kolayca ve daha hızlı yapılmasını sağlamıştır.
✦ Bootstrap 5 (2020)
16 Haziran 2020 tarihinde Alpha olarak piyasaya sürülen Bootstrap 5 sürümü, güçlü, genişletilebilir ve çarpıcı özelliklerle dolu web sitesi ön uç araç takımlarını web geliştiricilerine sunmuştur. Sass ile oluşturulabilen ve özelleştirilen, önceden oluşturulmuş ızgara sistemleri ve bileşenleriyle güçlü JavaScript eklentileriyle birlikte de kullanılarak daha duyarlı ve kullanıcı odaklı UX/UI web sitelerinin yapılmasını sağlamıştır.
GitHub'da günümüzde 1.000.000'den fazla yıldız ve 500.000'den fazla takdir almıştır. 25 milyondan fazla sayfa görüntüleme elde edilmiş ve 5 milyondan fazla da indirilme kaydedilmiştir.
Kaynak:
- https://getbootstrap.com/
- https://getbootstrap.com/docs/4.0/about/history/
- https://tr.wikipedia.org/wiki/Bootstrap_(önyüz_kütüphanesi)
- https://github.com/twbs/bootstrap/releases
2010 yılının Haziran Temmuz aylarında Twitter'da çalışan "Mark Otto" ve "Jacob Thornton" tarafından Twitter Blueprint olarak oluşturuldu. Resmi olarak 19 Ağustos 2011 yılında piyasaya sürülmüştür.
✦ Bootstrap 2 (2012)
2012 yılının ortalarında yayınlanan bu sürümde kütüphanenin tamamına isteğe bağlı olarak oluşturulabilen stil sayfaları ile kullanıcılar için yapılabilen duyarlı işlevsellik fonksiyonları katılmıştır.
✦ Bootstrap 3 (2013)
Duyarlı işlevselliğin mobil öncelikli yaklaşımlarla varsayılan olarak çalışması için Bootstrap 3 sürümü yeniden yazılmıştır ve 19 Ağustos 2013 tarihinde kamuoyuna duyurulmuştur. Bootstrap 3'ün tasarlanması ve geliştirilmesi 9 ay sürmüştür. Teknik olarak 319 katılımcıyla birlikte ilerlenerek 2.700'den fazla yeni taahhüt yerine getirilmiştir. 379 dosya tamamen değişmiştir ve 84.000 ekleme yapılmıştır.
✦ Bootstrap 4 (2015)
29 Ekim 2014 tarihinde Bootstrap 4, Mr. Mark Otto tarafından duyurulmuş ve ilk alfa sürümü 19 Ağustos 2015'te piyasaya sürülmüştür. Bu sürüm mobile-first yani "ÖNCE MOBİL" sloganı ile üretilmiştir. Bir web sitesinin görünen ön yüzüyle ilgili oluşturulan bir Framework'dür diyebiliriz. O zamanki teknolojiyle farklı cihazlardaki meydana gelen ekran çözünürlülük sorunlarını ortadan kaldırmak amacıyla sunulmuştur. Farklı cihazlarda ve farklı ekran çözünürlülüğüne sahip cihazlarda ziyaret edilen web sitelerinde oluşan yerleşim sorunları bu sürümle çözülmüştür. O yıllarda mobil cihazların yaygınlaşması kullanıcı odaklılık açısından web geliştiricilerini aynı site için hem masaüstü hemde mobil site olarak 2 farklı site yapmaya mecbur bırakıyordu. Ayrıca Google Chrome, Mozilla, Microsoft Edge, Opera, Safari vb. gibi tarayıcılarda oluşan her web sitesinin farklı görünüm hataları Bootstrap 4 sürümüyle giderilmiştir. Sonuç olarak CSS ve Javascript'in JQuery ve Popper kütüphaneleri içerisinde yer alan Bootstrap 4, Web Tasarım ajansı birNC'ye göre genel olarak kullanıcı odaklı ve responsive web sitelerin kolayca ve daha hızlı yapılmasını sağlamıştır.
✦ Bootstrap 5 (2020)
16 Haziran 2020 tarihinde Alpha olarak piyasaya sürülen Bootstrap 5 sürümü, güçlü, genişletilebilir ve çarpıcı özelliklerle dolu web sitesi ön uç araç takımlarını web geliştiricilerine sunmuştur. Sass ile oluşturulabilen ve özelleştirilen, önceden oluşturulmuş ızgara sistemleri ve bileşenleriyle güçlü JavaScript eklentileriyle birlikte de kullanılarak daha duyarlı ve kullanıcı odaklı UX/UI web sitelerinin yapılmasını sağlamıştır.
GitHub'da günümüzde 1.000.000'den fazla yıldız ve 500.000'den fazla takdir almıştır. 25 milyondan fazla sayfa görüntüleme elde edilmiş ve 5 milyondan fazla da indirilme kaydedilmiştir.
Kaynak:
- https://getbootstrap.com/
- https://getbootstrap.com/docs/4.0/about/history/
- https://tr.wikipedia.org/wiki/Bootstrap_(önyüz_kütüphanesi)
- https://github.com/twbs/bootstrap/releases
Boostrap Ne İşe Yarar?
1- Bootstrap kütüphanesi günümüzde her seviyeden web sitesi geliştiricileri tarafından yaygın olarak kullanılmaktadır. birNC'ye göre web tasarımcıların kullanıcı odaklı duyarlı sayfalar oluşturulmasını sağlamak için muazzam kodlanmış olan Boostrap, özellikle model alınan CSS, HTML ve JS sunumlarıyla web geliştiricilerinin özel CSS kod yazma ihtiyaçlarını ortadan kaldırması ve daha hızlı web projesi geliştirmeyi desteklemesi sebebiyle web dünyasında çok popülerdir.
2- Boostrap ile geliştiriciler, genellikle bir CSS dosyasını açmadan biçimlendirme örneklerini ve sınıflarını kullanarak sayfa düzenleri oluşturabilir ve bileşenleri hızla geliştirdikleri web sitesine ekleyebilirler. Üstelik web sayfalarında daha ince ayarların yapılması gerekiyor ise temaya sonradan da dahil edilebilmektedir.
3- Bootstrap, geliştirilen her web sitesinin tablet, telefon, masaüstü bilgisayar ve buna benzer cihazların her türlü ekran çözünürlüğüne duyarlı olarak ayarlamaya yarayan ücretsiz bir kütüphane ve frameworktur. En temel mantığı web sitelerin daha kaliteli kullanıcı deneyimi sunmasını sağlamaktır.
4- Birçok web sitesi projesinde Bootstrap yapısını kullanan birNC'ye göre bu teknolojiyle internet sayfaları oluşturmak çok daha kolaydır. Yapmanız gereken ilk şey Bootstrap'ı indirip sayfanıza bağlamak sonraki adım ise ağı oluşturmaktır. Bu aşama, özellikle Bootstrap kütüphanesini ilk kez kullanmaya başlayanlar için en zor olan kısımdır. Izgarayı oluşturduktan sonra "hücrelerini" içerik ve bileşenlerle doldurmaya devam etmek bir Bootstrap yapılı web sitesi oluşturmak için en temel adımlardandır. Örnek: Boostrap kod sistemi bir sütunu 12 - 12 satır olarak parçalara bölmektedir. Burada web geliştiricilerin yapması gereken dünya üzerinde internet kullanıcılarının tercih ettiği ve yaygın olarak kullandığı tüm cihazlara göre Boostrap'ın böldüğü sütunların her birini farklı satırlara göre şekillendirmektir. Yani Boostrap ile web sitesinin kullanıcı cihazlarına göre uyarlanmasını sağlamak için basit bir matematik yeterli oluyor. 4 sütündan oluşan ve daha geniş ekranlara yönelik hazırlanan bir internet sayfasını örnek alalım. Boostrap'ın 12 satırını 3'lü sütünlara çevirerek 4'lü sütün yapısına sahip bir web sayfası yapısı elde edebilirsiniz.
2- Boostrap ile geliştiriciler, genellikle bir CSS dosyasını açmadan biçimlendirme örneklerini ve sınıflarını kullanarak sayfa düzenleri oluşturabilir ve bileşenleri hızla geliştirdikleri web sitesine ekleyebilirler. Üstelik web sayfalarında daha ince ayarların yapılması gerekiyor ise temaya sonradan da dahil edilebilmektedir.
3- Bootstrap, geliştirilen her web sitesinin tablet, telefon, masaüstü bilgisayar ve buna benzer cihazların her türlü ekran çözünürlüğüne duyarlı olarak ayarlamaya yarayan ücretsiz bir kütüphane ve frameworktur. En temel mantığı web sitelerin daha kaliteli kullanıcı deneyimi sunmasını sağlamaktır.
4- Birçok web sitesi projesinde Bootstrap yapısını kullanan birNC'ye göre bu teknolojiyle internet sayfaları oluşturmak çok daha kolaydır. Yapmanız gereken ilk şey Bootstrap'ı indirip sayfanıza bağlamak sonraki adım ise ağı oluşturmaktır. Bu aşama, özellikle Bootstrap kütüphanesini ilk kez kullanmaya başlayanlar için en zor olan kısımdır. Izgarayı oluşturduktan sonra "hücrelerini" içerik ve bileşenlerle doldurmaya devam etmek bir Bootstrap yapılı web sitesi oluşturmak için en temel adımlardandır. Örnek: Boostrap kod sistemi bir sütunu 12 - 12 satır olarak parçalara bölmektedir. Burada web geliştiricilerin yapması gereken dünya üzerinde internet kullanıcılarının tercih ettiği ve yaygın olarak kullandığı tüm cihazlara göre Boostrap'ın böldüğü sütunların her birini farklı satırlara göre şekillendirmektir. Yani Boostrap ile web sitesinin kullanıcı cihazlarına göre uyarlanmasını sağlamak için basit bir matematik yeterli oluyor. 4 sütündan oluşan ve daha geniş ekranlara yönelik hazırlanan bir internet sayfasını örnek alalım. Boostrap'ın 12 satırını 3'lü sütünlara çevirerek 4'lü sütün yapısına sahip bir web sayfası yapısı elde edebilirsiniz.
Bootstrap'ın Avantajları ve Dezavantajları
Avantajları
■ Yüksek kaliteli duyarlı web sitelerin çok daha hızlı oluşturulmasını sağlar.
■ Modern web sitesi sunumlarını destekler. Boostrap'ın HTML, CSS ve JS bileşen, sınıf ve eklentileri en son web tasarım trendleriyle uyumlu ilerlemektedir.
■ Boostrap teknolojisini web sitelerine uyarlamak için derin bir bilgi ve deneyime gerek yoktur. Yeni web geliştiricileri, az biir HTML, CSS, JavaScript ve jQuery bilgisine sahip yeterlidir.
■ Bootstrap Mozilla Firefox, Google Chrome, Safari, Internet Explorer ve Opera vb. gibi tüm popüler işletim sistemleri ve tarayıcılar için uyarlanmıştır. Açık kaynak kodludur ve ücretsizdir.
■ Bootstrap Github'da bulunan açık kaynaklı ve açık Sass değişkenli bir projedir ve MIT lisanslıdır. Hem kişisel hem de ticari olarak bu kütüphane ücretsiz olarak herkes tarafından kullanılabilir.
Dezavantajları
■ Benzersiz, çok özel tasarlanmış ve değişkenleri çok olan projelerde ihtiyaç durumlarında tüm bileşenlerde ve modüllerde kullanılamamaktadır. Bu gibi durumlarda Bootstrap'tan salt grid alınmaktadır. Ayrıca Bootstrap sınıflarından ve bileşenlerinden oluşan eklentileri birleştirme yoluna gidilmektedir.
■ Yüksek kaliteli duyarlı web sitelerin çok daha hızlı oluşturulmasını sağlar.
■ Modern web sitesi sunumlarını destekler. Boostrap'ın HTML, CSS ve JS bileşen, sınıf ve eklentileri en son web tasarım trendleriyle uyumlu ilerlemektedir.
■ Boostrap teknolojisini web sitelerine uyarlamak için derin bir bilgi ve deneyime gerek yoktur. Yeni web geliştiricileri, az biir HTML, CSS, JavaScript ve jQuery bilgisine sahip yeterlidir.
■ Bootstrap Mozilla Firefox, Google Chrome, Safari, Internet Explorer ve Opera vb. gibi tüm popüler işletim sistemleri ve tarayıcılar için uyarlanmıştır. Açık kaynak kodludur ve ücretsizdir.
■ Bootstrap Github'da bulunan açık kaynaklı ve açık Sass değişkenli bir projedir ve MIT lisanslıdır. Hem kişisel hem de ticari olarak bu kütüphane ücretsiz olarak herkes tarafından kullanılabilir.
Dezavantajları
■ Benzersiz, çok özel tasarlanmış ve değişkenleri çok olan projelerde ihtiyaç durumlarında tüm bileşenlerde ve modüllerde kullanılamamaktadır. Bu gibi durumlarda Bootstrap'tan salt grid alınmaktadır. Ayrıca Bootstrap sınıflarından ve bileşenlerinden oluşan eklentileri birleştirme yoluna gidilmektedir.
Boostrap ile İlgili Sıkça Sorulan Sorular
Bootstrap çerçeveleri nasıl kullanılır?
✦ Dev bir HTML, CSS ve JS kütüphanesine sahip olduğu için web sitesindeki ihiyaçlarınızı kopyalayıp yapıştırarak halledebilirsiniz. Web sayfanızda kullanacağınız tüm elementler için referans siteniz getbootstrap.com olsun. Bu web sitesine giriş yaparak üst menüde yer alan Getting Started, CSS, Component ve JavaScript menülerinden ihtiyacınız olan gerekli tüm kodları kopyalarak alabilir ve kendi geliştirdiğiniz sitenize uyarlayabilirsiniz.
Boostrap kütüphanesindeki her şey ücretsiz midir?
Kullanıcı odaklı harika site ve uygulamalar geliştirmeyi destekleyen Boostrap sistemi, açık kaynak kodlu ve tamamen ücretsizdir.
Boostrap'ın en temel prensibi nedir?
Geliştirilen her türlü web sitesinin daha kaliteli kullanıcı deneyimi sunmasını sağlamaktır.
Bootstrap web sektöründe neden çok popüler?
Bootstrap, yeni oluşturulmaya çalışılan bir web sitesinin tablet, telefon, masaüstü bilgisayar ve buna benzer her türlü cihazların ekran çözünürlülüğüne duyarlı olarak ayarlamaya yarayan projelerde rol model biçimlendirmeler yapılmasına izin veren ücretsiz bir kütüphane olduğu için ve web sitesi yapımını kısa sürede sağladığı için çok popülerdir.
Ücretsiz Boostrap eğitimi nereden alabilirim?
- mehsatek.com/bootstrap-dersleri/
- btdersleri.com/bootstrap-dersleri
- btdersleri.com/bootstrap-dersleri
Boostrap'ın sınıf ve temelleri nelerdir?
Bootstrap Üç Ana Grupta Değerlendirelibilir?
✦ Izgara oluşturmaya yönelik sınıflar (duyarlı sayfa düzeni).
✦ İçerik şekillendirme sınıfları (metin, kod, resimler, tablolar ve diğer bilgiler).
✦ Yardımcı sınıflar (hizalama, ekran denetimi, kenarlık ekleme vb. gibi en yaygın yardımcı görevleri çözmek için).
Bootstrap çerçevesinin sınıflara ek olarak bileşenleri de vardır (hazır arayüz nesneleri gibi). Bunlara örnek olarak "düğmeler, kırıntılar, formlar, mega menüler, gezinme menüleri, açılır listeler, açılır paneller" verilebilir.
✦ Izgara oluşturmaya yönelik sınıflar (duyarlı sayfa düzeni).
✦ İçerik şekillendirme sınıfları (metin, kod, resimler, tablolar ve diğer bilgiler).
✦ Yardımcı sınıflar (hizalama, ekran denetimi, kenarlık ekleme vb. gibi en yaygın yardımcı görevleri çözmek için).
Bootstrap çerçevesinin sınıflara ek olarak bileşenleri de vardır (hazır arayüz nesneleri gibi). Bunlara örnek olarak "düğmeler, kırıntılar, formlar, mega menüler, gezinme menüleri, açılır listeler, açılır paneller" verilebilir.
Bootstrap, yalnızca bağımsız web geliştiricilerine hitap etmemektedir, aynı zamanda tüm web şirketleri tarafından da kullanılabilir. Ana uygulama alanı, web sayfalarının ön görünen taraf bileşenlerinin ve admin paneli site arayüzlerinin kullanıcı odaklı parametrelerle günümüz teknolojisine göre daha hızlı ve sonuç odaklı geliştirilmesidir.
Lütfen:
Bootstrap nedir ve ne işe yarar adlı makalemizde araştırma yapan ziyaretçilere eksiksiz ve doğru bir içerik sunabilmemiz için içerikte gördüğünüz eksikleri bilgi@birnc.com.tr mail adresine iletebilirsiniz. Konuyla ilgili makelemizde bulamadığınız farklı bir sorunuz var ise lütfen İstanbul Web Tasarım Ajansı birNC ile +90 212 232 9262 PBX hattından destek için iletişime geçin.
Hepinize başarılı yarınlar dileriz.
Kendinize İyi Bakın.
Lütfen:
Bootstrap nedir ve ne işe yarar adlı makalemizde araştırma yapan ziyaretçilere eksiksiz ve doğru bir içerik sunabilmemiz için içerikte gördüğünüz eksikleri bilgi@birnc.com.tr mail adresine iletebilirsiniz. Konuyla ilgili makelemizde bulamadığınız farklı bir sorunuz var ise lütfen İstanbul Web Tasarım Ajansı birNC ile +90 212 232 9262 PBX hattından destek için iletişime geçin.
Hepinize başarılı yarınlar dileriz.
Kendinize İyi Bakın.
