Bootstrap nedir?
Büyük ihtimalle framework’lerin fonksiyonelliklerine aşinasınızdır. İşleme özel söz dizimleri geliştiricilerin basit komutlar ve fonksiyonlar hakkında düşünmeleri gerekmediğinden dolayı web siteleri çok daha hızlı bir şekilde kurmalarına izin verir.
Yine de kütüphanelerin yaygın kullanımından dolayı oluşan tutarsızlık değişikliğe yol açtı ve işte tam olarak burada Bootstrap sahneyi aldı.
Bu açık kaynaklı front end framework, ilk olarak daha hızlı ve kolay front end web sitesi geliştirme için Mark Otto ve Jacon Thornton tarafından geliştirildi.
Çeşitli fonksiyonlar ve navigasyon, örtü sistemi, görsel karuselleri ve butonlar gibi bileşenler için her türden HTML ve CSS bazlı tasarım şablonlarını içerir.
Bootstrap, her ne kadar geliştiricilerinin tekrar tekrar şablonları yönetmelerinde zaman tasarrufu yapmalarını sağlasa da ana hedefi mobil dostu siteler oluşturmaktır. Web sitesinin kullanıcı arayüzünün ister küçük ekranlı telefonlar, ister büyük ekranlı masaüstü bilgisayarlar olsun bütün ekran boyutlarında en ideal olarak çalışmasına izin verir.
Böylelikle geliştiricilerin cihazlara özel siteler yapmasına ve kitlelerini sınırlamasına gerek kalmaz.
Popülerliğinden ötürü Bootstrap topluluklarının sayısı artmaktadır. Bu topluluklar, geliştiricilerle tasarımcıların bilgi paylaşımında bulunması ve en güncel framework yamaları hakkında tartışmaları için harika yerlerdir.
Bootsrap’in Üç 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
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
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:
Glyphicons
İkonlar bir web sitesinin ayrılmaz bir parçasıdır. Sıklıkla kullanıcı arayüzünden belirli eylemler ve verilerle ilişkilendirilmektedirler. Bootstrap bu ihtiyacı karşılamak için Glyphicon’ları kullanır.
Bootstrap ücretsiz kullanıma açılmış bir Glyphicon Halfling seti içerir. Ücretsiz versiyonu standart bir görünüşe sahiptir ancak temel fonksiyonlar için yeterlidir.
Eğer daha şık ikonlar bulmak isterseniz Glyphicons özel konulara yoğunlaşan web sitelerde hiç şüphesiz daha iyi görünecek çeşitli premium setler satmaktadır.
Ayrıca bireysel ve temalara özel ikonları Flaticon, GlyphSearch, ve Icons8 gibi web sitelerinden indirebilirsiniz.
Bazı ikonlarda CSS ile değişiklik yapılabilirken bazılarıysa varsayılan görünüşe sahiptir. Sitenizin ihtiyacına en çok uyan ikonları kullanın.
Bootstrap Kullanımı
Bootstrap nedir öğrendiğinize göre sıra , Bootstrap kullanımı nasıl olur onu öğrenmekte.
Aşağıdaki örneğimize bir göz atın.
HTML-Kodu:
Bootstrap 101 şablonu
Merhaba, dünya!
HTML dosyası için karakter kodlamasıdır. Bu örnekte ise UTF-8, Unicode’a atfeder.
HTML-Kodu:
meta charset="utf-8"
Web sitesini yazmak için kullanılan karakter setini belirtir.
HTML-Kodu:
meta http-equiv="X-UA-Compatible"
Sayfayı işleyecek Internet Explorer sürümünü belirler. Edge modunu kullanılarak mevcut en yüksek modu kullanması için ayarlanmıştır.
HTML-Kodu:
meta name="viewport"
Sayfanın viewport boyutuyla 1:1 orantıya sahip olmasından emin olur.
HTML-Kodu:
link href="css/bootstrap.min.css" rel="stylesheet"
Bu ise Bootstrap’in çekirdek CSS’inin eklendiği kısımdır.
HTML-Kodu:
src="
Google CDN aracılığıyla jQuery’i yükler. Sayfalar bir yıllığına önbelleklenebileceğinden HTTP aracılığıyla CDN’den yüklenmeleri daha iyidir.
HTML-Kodu:
src="js/bootstrap.min.js"
Bootstrap’in çekirdek JavaScript’ini ekler. Bu söz diziminin düzgün çalışması için daima jQuery söz diziminin altında konumlandırılması gerekir. Ekleme işlemi Google‘ın URL’si veya elle indirme aracılığıyla yapılabilir.
Alıntı:
Gökhan O. Hostinger
Büyük ihtimalle framework’lerin fonksiyonelliklerine aşinasınızdır. İşleme özel söz dizimleri geliştiricilerin basit komutlar ve fonksiyonlar hakkında düşünmeleri gerekmediğinden dolayı web siteleri çok daha hızlı bir şekilde kurmalarına izin verir.
Yine de kütüphanelerin yaygın kullanımından dolayı oluşan tutarsızlık değişikliğe yol açtı ve işte tam olarak burada Bootstrap sahneyi aldı.
Bu açık kaynaklı front end framework, ilk olarak daha hızlı ve kolay front end web sitesi geliştirme için Mark Otto ve Jacon Thornton tarafından geliştirildi.
Çeşitli fonksiyonlar ve navigasyon, örtü sistemi, görsel karuselleri ve butonlar gibi bileşenler için her türden HTML ve CSS bazlı tasarım şablonlarını içerir.
Bootstrap, her ne kadar geliştiricilerinin tekrar tekrar şablonları yönetmelerinde zaman tasarrufu yapmalarını sağlasa da ana hedefi mobil dostu siteler oluşturmaktır. Web sitesinin kullanıcı arayüzünün ister küçük ekranlı telefonlar, ister büyük ekranlı masaüstü bilgisayarlar olsun bütün ekran boyutlarında en ideal olarak çalışmasına izin verir.
Böylelikle geliştiricilerin cihazlara özel siteler yapmasına ve kitlelerini sınırlamasına gerek kalmaz.
Popülerliğinden ötürü Bootstrap topluluklarının sayısı artmaktadır. Bu topluluklar, geliştiricilerle tasarımcıların bilgi paylaşımında bulunması ve en güncel framework yamaları hakkında tartışmaları için harika yerlerdir.
Bootsrap’in Üç 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
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
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
Glyphicons
İkonlar bir web sitesinin ayrılmaz bir parçasıdır. Sıklıkla kullanıcı arayüzünden belirli eylemler ve verilerle ilişkilendirilmektedirler. Bootstrap bu ihtiyacı karşılamak için Glyphicon’ları kullanır.
Bootstrap ücretsiz kullanıma açılmış bir Glyphicon Halfling seti içerir. Ücretsiz versiyonu standart bir görünüşe sahiptir ancak temel fonksiyonlar için yeterlidir.
Eğer daha şık ikonlar bulmak isterseniz Glyphicons özel konulara yoğunlaşan web sitelerde hiç şüphesiz daha iyi görünecek çeşitli premium setler satmaktadır.
Ayrıca bireysel ve temalara özel ikonları Flaticon, GlyphSearch, ve Icons8 gibi web sitelerinden indirebilirsiniz.
Bazı ikonlarda CSS ile değişiklik yapılabilirken bazılarıysa varsayılan görünüşe sahiptir. Sitenizin ihtiyacına en çok uyan ikonları kullanın.
Bootstrap Kullanımı
Bootstrap nedir öğrendiğinize göre sıra , Bootstrap kullanımı nasıl olur onu öğrenmekte.
Aşağıdaki örneğimize bir göz atın.
HTML-Kodu:
Bootstrap 101 şablonu
Merhaba, dünya!
HTML dosyası için karakter kodlamasıdır. Bu örnekte ise UTF-8, Unicode’a atfeder.
HTML-Kodu:
meta charset="utf-8"
Web sitesini yazmak için kullanılan karakter setini belirtir.
HTML-Kodu:
meta http-equiv="X-UA-Compatible"
Sayfayı işleyecek Internet Explorer sürümünü belirler. Edge modunu kullanılarak mevcut en yüksek modu kullanması için ayarlanmıştır.
HTML-Kodu:
meta name="viewport"
Sayfanın viewport boyutuyla 1:1 orantıya sahip olmasından emin olur.
HTML-Kodu:
link href="css/bootstrap.min.css" rel="stylesheet"
Bu ise Bootstrap’in çekirdek CSS’inin eklendiği kısımdır.
HTML-Kodu:
src="
Ziyaretçiler için gizlenmiş link,görmek için
Giriş yap veya üye ol.
"Google CDN aracılığıyla jQuery’i yükler. Sayfalar bir yıllığına önbelleklenebileceğinden HTTP aracılığıyla CDN’den yüklenmeleri daha iyidir.
HTML-Kodu:
src="js/bootstrap.min.js"
Bootstrap’in çekirdek JavaScript’ini ekler. Bu söz diziminin düzgün çalışması için daima jQuery söz diziminin altında konumlandırılması gerekir. Ekleme işlemi Google‘ın URL’si veya elle indirme aracılığıyla yapılabilir.
Alıntı:
Gökhan O. Hostinger
Ziyaretçiler için gizlenmiş link,görmek için
Giriş yap veya üye ol.
