Friday, April 19, 2024

Webtasarimda Bootstrap nedir? Nasıl kullanılır?

bootstrap
Açık kaynak kodlu, ücretsiz bir CSS frameworktür, tasarım aracıdır. Kolayca telefonlar, tabletler ve masaüstü bilgisayarlar için farklı ve cihaz büyüklüğüne uygun şekilde sitenizin gözükmesini sağlayan temalar/tasarımlar yapabilirsiniz. Bir site için gerekli olan tüm elemenleri (form ögeleri, etiketler, tablolar, uyarı ve bilgi metinleri, navigasyon bar, sayfalandırma modülü, açılan menüler, farklı özellikte butonlar vb bir çok tasarım ögesini) içinde barındıran Bootstrap tasarım yaparken bu hazır elementleri kullanarak bütün cihazlara uygun tasarımlar geliştirmenize yarar. Yani her şeyi hazır olan kodlarla yeni bir tasarım ortaya koymak çok basit ve pratiktir. Stiller, imajlar , js’ler daha önceden sistemin içine monte edilmiştir. Sizin yapacağınız tek şey bunları çağırmaktır.

Bootstrap 3 sürümü, Chrome, Safari, Firefox, Internet Explorer, Opera gibi neredeyse tüm popüler web tarayıcılarının son sürümlerinde sorunsuz çalışıyor.

Bootstarp ile neler yapılabilir?

Bir web sitesi için gerekli olan tüm ögeleri içerdiği için bir siteyi komple bir bütün olarak tasarlayabilirsiniz. Tipografik ögeler, tablolar, imajlar, slider, carousel, modal pencereler, butonlar, dropdown menüler, navigasyon bar, sayfalandırma, etiketler, thumbnaili uyarı ve bilgilendirme balonları, yükleme barları vb gibi bir çok tasarım ögesi hazır olarak sunulmuş ve yapmanız gereken tek şey ihtiyacınız olan kodu kopyala yapıştır yapmak. Aşağıda hazırlanmış örnekleri görebilirsiniz:

BOOTSTRAP NEDIR? NASIL KURULUR?

Bootstrap,web uygulamalarını ve web sitelerini daha hızlı bir şekilde responsive olarak kodlamımızı sağlayan bir css framework’dur.Responsive ise yazacağımız web sitenin tüm cihazlarda ki çözünürlüklere uyum sağlayarak ona göre bir yapı almasıdır.

Peki bootstrapın bize yararları nedir? diye soracak olursak onuda şöyle izah edeyim;

Daha hızlı kodlama yapabilirsiniz.
İhtiyacımız olan tüm yapılar neredeyse bootstrap’de mevcuttur.(butonlar, tablolar, imajlar, slider, carousel, modal pencereler, butonlar, dropdown menüler vs.)
Minimize edilmiş css / js dosyalarıyla sayfamız daha hızlı görüntülenir.
Responsive kodlama yapmak için bize iş bırakmaz.Tamamen cihaz uyumluluğunu kendisi ayarlar.
Chrome, Safari, Firefox, Internet Explorer, Opera gibi neredeyse tüm popüler web tarayıcılarının son sürümlerinde sorunsuz çalışıyor.

Nereden İndirebilirim?

Bootstrap’i eğer indirmediysek resmi sitesinden buraya tıklayarak hemen indirebiliriz.
İndirdiğimiz Dosyada neler bulunuyor ?

Kurulum

Kurulum aslında çok basit, öncelikle bootstrap dosyalarımızı projemizin dizinine atıyoruz ardından aşağıdaki css ve js çağırma kodlarımızı ekliyoruz.Kodlarda bir farklılık yok css ve js çağırmada her zaman kullandığımız standart kodlar’dır.

Not

CSS ve JS klasörlerinde ki .min olan dosyaları çağırmamız her zaman site hızı açısından daha iyi olacaktır.

İşlem Tamam
Kodlarımızı sorunsuz olarak projemize dahil ettik.Artık Bootstrap’i kullanmaya başlayabiliriz. Bootstrap Nedir? Nasıl kurulur?

Bootstrap İşletim Sistemleri Üzerinde Tarayıcı Desteği

Bootstrap her ne kadar tüm işletim sistelmlerinde ve tüm tarayıcılarda işlevsel bir şekilde çalışsada eski sürüm tarayıcılar da bazı bileşenlerin işleyişi farklılık gösterebilir.Yani güncel masaüstü ve mobil tarayıcılarda en işlevsel performans sergilemesi için inşa edilmiştir.
Özellikle, aşağıdaki tarayıcılarda ve platformlarda en son sürümlerini destekler. Windows, Internet Explorer, 8-11 destekler. Daha özel destek bilgileri aşağıda yer almaktadır.