Merhaba dostlar bu gün Bootstrap ın üç ana dosyasından bashedicez ondan sonra Bootstrap ın neden tercih edildiğinden bashedicez iyi okumalar
Bootstrap Üç Ana Dosyası:
Bootstrap çeşitli fonksiyonlar gerçekleştiren söz dizimi koleksiyonlarından oluşsa da üç farklı dosyaya
sahip olması oldukça mantıklıdır.
İşte bir web sitesinin arayüzünü ve fonksiyonelliğini yöneten üç ana dosya.
Bootstrap.css nedir?
Bootstrap.css bir web sitesinin düzenini yoluna koyan ve yöneten bir CSS framework’üdür. HTML bir web sayfasının içeriğini ve yapısını yönetirken CSS ise sitenin düzeni ile ilgilenir.
Bu nedenden dolayı bu iki yapının belirli bir eylemin gerçekleştirilmesi için bir arada olmaları gerekir.
Fonksiyonlarından ötürü CSS istediğiniz kadar web sayfasında aynı görünüşü oluşturmanızı sağlar. Bir kenarın genişliğini değiştirmek için saatlerce düzenleme yapmaya elveda deyin.
CSS ile tek yapmanız gereken CSS dosyalarını web sayfalarına ilişkilendirmektir. Gerekli bütün değişiklikler sadece CSS dosyasında yapılabilmektedir.
CSS’in fonksiyonları sadece metin stilleriyle sınırlı değildir. Web sayfasının tabloları ve görsel düzenleri gibi diğer açılarını da biçimlendirebilirsiniz.
Bootstrap.js nedir?
Bu dosya Bootstrap’in çekirdek dosyasıdır. Web sitesinin interaktifliğinden sorumlu olan JavaScript dosyalarını içerir.
Tekrar tekrar JavaScript sözdizimi yazmaktan zaman tasarrufu yapmak için geliştiriciler jQuery kullanır.
jQuery açık kaynaklı ve çok platformlu popüler bir JavaScript kütüphanesidir. Web sitenize çeşitli fonksiyonellikler eklemenize izin verir.
İşte jQuery’nin yapabileceklerinden birkaç örnek:
Başka bir konumdan dinamik olarak veri çıkarmak gibi Ajax isteklerini yerine getirme
Bir JavaScript eklenti koleksiyonu kullanarak bileşen oluşturma
CSS özelliklerini kullanarak özel animasyonlar oluşturma
Web sitesinin içeriğine dinamizm ekleme
Her ne kadar Bootstrap CSS özellikleri ve HTML elementleri ile normal bir şekilde çalışabilse de mobil duyarlı bir tasarım
oluşturmak için jQuery’e ihtiyaç duyar.
Aksi takdirde CSS’in sadece basit ve statik kısımlarını kullanabilirsiniz.
Neden Bootstrap Tercih Ediliyor?
Bunu 8 başlık altında değerlendirebiliriz.
1 - Bootstrap Responsive Yapı Sağlar
Bootstrap kendine ait kullanışlı bir grid sistemi ile gelmektedir. Böylece kendi grid sisteminizi tasarlamak için bir sürü zaman harcamanıza gerek kalmaz. Siz sadece içeriklerinize odaklanabilir, daha verimli olabilirsiniz.
2 - Bootstrap Responsive Resimler Sağlar
Bootstrap, görüntüleri geçerli ekran boyutuna göre otomatik olarak yeniden boyutlandırmak için kendi koduyla birlikte gelir. Görüntülerinize .img duyarlı sınıfı eklemeniz yeterlidir; önceden tanımlanmış CSS kuralları gerisini halleder.
İmg-circle ve img-round gibi sınıfların eklenmesiyle resimlerinizin şeklini bile değiştirebilirsiniz.
3 - Bootstrap Faydalı Komponentler İçerir
Bootstrap, web sayfanıza kolayca yapıştırabileceğiniz bir dizi özellik ile birlikte gelir.
Navigation bars
Dropdowns
Progress bars
Thumbnails
.. ve daha fazlası.
Web sayfanıza sadece göz alıcı tasarım öğeleri eklemek bir esinti olmakla kalmaz, aynı zamanda bunları görüntülemek için kullanılan ekran boyutu veya cihaz ne olursa olsun her birinin harika görüneceğini bilerek emin olabilirsiniz.
4. Bootstrap JavaScript Desteği Sağlar
Halen ikna olmadı iseniz JQquery’i deneyebilirsiniz.
Bootstrap ayrıca geliştiricilerin bir düzineden fazla özel JQuery eklentisinden faydalanmalarını sağlar. JQuery, modal pop-up'lar, geçişler, görüntü karuselleri ve - kişisel favorilerimden biri için - bir sayfada gezinirken gezinme çubuğunuzu otomatik olarak güncelleyen bir eklenti için etkileşimle oynamak için daha da fazla alan sunar.
JQuery hakkında daha detaylı bilgi almak için Jquery Nedir, Neye Yarar? isimli yazımızı okuyabilirsiniz.
5. Bootstrap Güçlü Bir Dökümantasyon Desteği Sunar
Bootstrap'ın dökümantasyon desteği çok başarılıdır. Her kod parçası, web sitelerinde açık bir şekilde tanımlanmış ve açıklanmıştır.
Açıklamalar ayrıca temel uygulama için kod örneklerini de içerir ve en yeni başlayanlar için bile süreci basitleştirir. Tek yapmanız gereken bir bileşen seçmek, kodu kopyalayıp sayfanıza yapıştırmak ve oradan değiştirmek.
6. Bootstrap İhtiyaca Göre Özelleştirilebilir
Frameworkler karşılaştırılırken en önemli parametrelerden birisi performanstır. Eğer framework uygulama üzerinde ağırlık yaratıyor ise uygulamanın yavaş açılmasına neden olabilir. Bootstrap’ın CSS dosyasının boyutu 119 KB’dır. Bu bir CSS dosyası için büyük bir boyuttur.
Bootstrap bu sorunla başa çıkabilmeniz için frameworkü özelleştirebilmenize imkan sağlar. Kullanmak istemediğiniz özellikleri uygulamalarınızdan kaldırarak daha hafif, performanslı uygulamalar geliştirebilirsiniz.
7. Geniş Topluluğa Sahiptir
Birçok açık kaynaklı projede olduğu gibi, Bootstrap'ın arkasında büyük bir tasarımcı ve geliştirici topluluğu vardır. GitHub üzerinde barındırılmak, geliştiricilerin Bootstrap’in kod tabanını değiştirmesini ve bunlara katkıda bulunmasını kolaylaştırır. Aynı zamanda insanların işbirliği yapmalarını, tavsiyelerde bulunmalarını ve akranları ve diğer kullanıcılarla etkileşim kurmalarını kolaylaştırır.
Bootstrap'ın aktif bir Twitter sayfası, bir Bootstrap blogu ve hatta özel bir Slack odası vardır. Ve bu, tüm soruların bootstrap-4 etiketi altında bulunabileceği Stack Overflow'daki teknik sorunlara yardımcı olmak isteyen geliştiriciler bulunur.
8. Tema Desteği Sunar
Bootstrap'ın popülaritesi arttıkça, insanlar web geliştirme sürecini daha da hızlandırmak için Bootstrap tabanlı şablonlar oluşturmaya başladılar. Bootstrap dayalı özel şablonları paylaşmak ve satın almak için adanmış birçok web sitesi bulunmaktadır.
konu geleceği hakkında küçük bir bilgi
dostlar BOOTSTRAP konusu adı altında ilk önce temeller ve ondan sonra beraber bir çok BOOTSTRAP destekli sayfalar yapcağız
Bazı sitelerden örnekler
Bootstrap Üç Ana Dosyası:
Bootstrap çeşitli fonksiyonlar gerçekleştiren söz dizimi koleksiyonlarından oluşsa da üç farklı dosyaya
sahip olması oldukça mantıklıdır.
İşte bir web sitesinin arayüzünü ve fonksiyonelliğini yöneten üç ana dosya.
Bootstrap.css nedir?
Bootstrap.css bir web sitesinin düzenini yoluna koyan ve yöneten bir CSS framework’üdür. HTML bir web sayfasının içeriğini ve yapısını yönetirken CSS ise sitenin düzeni ile ilgilenir.
Bu nedenden dolayı bu iki yapının belirli bir eylemin gerçekleştirilmesi için bir arada olmaları gerekir.
Fonksiyonlarından ötürü CSS istediğiniz kadar web sayfasında aynı görünüşü oluşturmanızı sağlar. Bir kenarın genişliğini değiştirmek için saatlerce düzenleme yapmaya elveda deyin.
CSS ile tek yapmanız gereken CSS dosyalarını web sayfalarına ilişkilendirmektir. Gerekli bütün değişiklikler sadece CSS dosyasında yapılabilmektedir.
CSS’in fonksiyonları sadece metin stilleriyle sınırlı değildir. Web sayfasının tabloları ve görsel düzenleri gibi diğer açılarını da biçimlendirebilirsiniz.
Bootstrap.js nedir?
Bu dosya Bootstrap’in çekirdek dosyasıdır. Web sitesinin interaktifliğinden sorumlu olan JavaScript dosyalarını içerir.
Tekrar tekrar JavaScript sözdizimi yazmaktan zaman tasarrufu yapmak için geliştiriciler jQuery kullanır.
jQuery açık kaynaklı ve çok platformlu popüler bir JavaScript kütüphanesidir. Web sitenize çeşitli fonksiyonellikler eklemenize izin verir.
İşte jQuery’nin yapabileceklerinden birkaç örnek:
Başka bir konumdan dinamik olarak veri çıkarmak gibi Ajax isteklerini yerine getirme
Bir JavaScript eklenti koleksiyonu kullanarak bileşen oluşturma
CSS özelliklerini kullanarak özel animasyonlar oluşturma
Web sitesinin içeriğine dinamizm ekleme
Her ne kadar Bootstrap CSS özellikleri ve HTML elementleri ile normal bir şekilde çalışabilse de mobil duyarlı bir tasarım
oluşturmak için jQuery’e ihtiyaç duyar.
Aksi takdirde CSS’in sadece basit ve statik kısımlarını kullanabilirsiniz.
Neden Bootstrap Tercih Ediliyor?
Bunu 8 başlık altında değerlendirebiliriz.
1 - Bootstrap Responsive Yapı Sağlar
Bootstrap kendine ait kullanışlı bir grid sistemi ile gelmektedir. Böylece kendi grid sisteminizi tasarlamak için bir sürü zaman harcamanıza gerek kalmaz. Siz sadece içeriklerinize odaklanabilir, daha verimli olabilirsiniz.
2 - Bootstrap Responsive Resimler Sağlar
Bootstrap, görüntüleri geçerli ekran boyutuna göre otomatik olarak yeniden boyutlandırmak için kendi koduyla birlikte gelir. Görüntülerinize .img duyarlı sınıfı eklemeniz yeterlidir; önceden tanımlanmış CSS kuralları gerisini halleder.
İmg-circle ve img-round gibi sınıfların eklenmesiyle resimlerinizin şeklini bile değiştirebilirsiniz.
3 - Bootstrap Faydalı Komponentler İçerir
Bootstrap, web sayfanıza kolayca yapıştırabileceğiniz bir dizi özellik ile birlikte gelir.
Navigation bars
Dropdowns
Progress bars
Thumbnails
.. ve daha fazlası.
Web sayfanıza sadece göz alıcı tasarım öğeleri eklemek bir esinti olmakla kalmaz, aynı zamanda bunları görüntülemek için kullanılan ekran boyutu veya cihaz ne olursa olsun her birinin harika görüneceğini bilerek emin olabilirsiniz.
4. Bootstrap JavaScript Desteği Sağlar
Halen ikna olmadı iseniz JQquery’i deneyebilirsiniz.
Bootstrap ayrıca geliştiricilerin bir düzineden fazla özel JQuery eklentisinden faydalanmalarını sağlar. JQuery, modal pop-up'lar, geçişler, görüntü karuselleri ve - kişisel favorilerimden biri için - bir sayfada gezinirken gezinme çubuğunuzu otomatik olarak güncelleyen bir eklenti için etkileşimle oynamak için daha da fazla alan sunar.
JQuery hakkında daha detaylı bilgi almak için Jquery Nedir, Neye Yarar? isimli yazımızı okuyabilirsiniz.
5. Bootstrap Güçlü Bir Dökümantasyon Desteği Sunar
Bootstrap'ın dökümantasyon desteği çok başarılıdır. Her kod parçası, web sitelerinde açık bir şekilde tanımlanmış ve açıklanmıştır.
Açıklamalar ayrıca temel uygulama için kod örneklerini de içerir ve en yeni başlayanlar için bile süreci basitleştirir. Tek yapmanız gereken bir bileşen seçmek, kodu kopyalayıp sayfanıza yapıştırmak ve oradan değiştirmek.
6. Bootstrap İhtiyaca Göre Özelleştirilebilir
Frameworkler karşılaştırılırken en önemli parametrelerden birisi performanstır. Eğer framework uygulama üzerinde ağırlık yaratıyor ise uygulamanın yavaş açılmasına neden olabilir. Bootstrap’ın CSS dosyasının boyutu 119 KB’dır. Bu bir CSS dosyası için büyük bir boyuttur.
Bootstrap bu sorunla başa çıkabilmeniz için frameworkü özelleştirebilmenize imkan sağlar. Kullanmak istemediğiniz özellikleri uygulamalarınızdan kaldırarak daha hafif, performanslı uygulamalar geliştirebilirsiniz.
7. Geniş Topluluğa Sahiptir
Birçok açık kaynaklı projede olduğu gibi, Bootstrap'ın arkasında büyük bir tasarımcı ve geliştirici topluluğu vardır. GitHub üzerinde barındırılmak, geliştiricilerin Bootstrap’in kod tabanını değiştirmesini ve bunlara katkıda bulunmasını kolaylaştırır. Aynı zamanda insanların işbirliği yapmalarını, tavsiyelerde bulunmalarını ve akranları ve diğer kullanıcılarla etkileşim kurmalarını kolaylaştırır.
Bootstrap'ın aktif bir Twitter sayfası, bir Bootstrap blogu ve hatta özel bir Slack odası vardır. Ve bu, tüm soruların bootstrap-4 etiketi altında bulunabileceği Stack Overflow'daki teknik sorunlara yardımcı olmak isteyen geliştiriciler bulunur.
8. Tema Desteği Sunar
Bootstrap'ın popülaritesi arttıkça, insanlar web geliştirme sürecini daha da hızlandırmak için Bootstrap tabanlı şablonlar oluşturmaya başladılar. Bootstrap dayalı özel şablonları paylaşmak ve satın almak için adanmış birçok web sitesi bulunmaktadır.
konu geleceği hakkında küçük bir bilgi
dostlar BOOTSTRAP konusu adı altında ilk önce temeller ve ondan sonra beraber bir çok BOOTSTRAP destekli sayfalar yapcağız
Bazı sitelerden örnekler
Son düzenleme:
