6 Nisan 2018 Cuma

BOOSTRAP ÇALIŞMASI İLK ÖRNEK


BOOSTRAP GİRİŞ

Bootstrap Nedir?
Bootstrap Front-End Developerlar için geliştirilmiş açık kaynak kodlu ve ücretsiz bir CSS framework'tür. Bootstrap sayesinde masaüstü, tablet, mobil cihaz ve tüm tarayıcılara uyumlu web siteleri geliştirebiliriz. Bunun yanında bir web sitesi için gerekli olan tüm bileşenleri yapısında barındırır. (Form öğeleri, tablolar, butonlar, uyarılar, navigasyon bar, sayfalandırma, etiketler, açılan menüler vb. tasarım öğeleri.) Bu hazır bileşenleri kullanarak hem gelişmiş bir görünüm hem de her cihaza uygun bir tasarım gerçekleştirmiş oluruz.

ÜZERİNE GELİNCE DURAN KAYAN YAZI





Bu örneğimizde marquee yardımıyla kayan yazımızı oluşturucağız ve bunun üzerine gelince durup hareket etmesini sağlayacağız.Bunu için öncelikle bazı kodları açıklamamız lazım ;

1) onmouseover= fare ile yazının üzerinde geldiğimizde olmasını istediğimiz komutları yazıyoruz

2) onmouseout= bu kodumuzda ise fare ile yazınınüzerinde geldiğimizde kayan yazının durduktan sonra tekrar hareket etmesi komutunu vermiş oluyoruz.

3) direction= türkçe kelimesi yöndür.Yani ekranın hangi yanından görünmeye başlayacağını belirliyoruzz.

ARKA PLAN RENGİ DEĞİŞTİRME VE DURDURMA




        Öncelikle bu örneğimizde switch yardımıyla devam ve dur butonları kullanarak arka plan renginin sürekli değişmesini sağlayacağız.Bu kodda yeni öğreneceğimiz bağzı özelliklerle başlayalım.

1)window.clearInterval(timer)bu kodun görevi switch çalışırken eğer dur butonuna basılırsa döngünün sonlanmasına ve renk değişiminin durmasında görevlidir.

Ekran Çıktısı;





BOOSTRAP ÇALIŞMASI İLK ÖRNEK