Bootstrap 5 ile Hızlı Web Geliştirme

Bootstrap, Twitter mühendislerinin 2011'de geliştirdiği ve bugün milyonlarca sitede kullanılan bir CSS framework'üdür. Hazır bir "tasarım kutusu" gibi düşünebilirsin: butonlar, kartlar, menüler, formlar ve açılır pencereler önceden tasarlanmıştır. Sen sadece HTML etiketlerine doğru class adlarını verirsin, gerisini Bootstrap halleder.

Önce ne bilmelisin?

HTML kursundaki etiketleri ve CSS kursundaki temel kavramları (class, kutu modeli, flexbox ve responsive tasarım fikri) bilmen yeterlidir. Bootstrap aslında CSS'in yerine geçmez; senin yerine CSS'i önceden yazmış bir kütüphanedir. Bu yüzden CSS bilgin ne kadar iyiyse Bootstrap'i o kadar iyi anlarsın.

Bootstrap neden kullanılır?

• Hız: Profesyonel görünen bir sayfayı CSS yazmadan dakikalar içinde kurarsın.
• Responsive: Tüm bileşenler telefonda, tablette ve bilgisayarda doğru görünecek şekilde tasarlanmıştır.
• Tutarlılık: Ekipteki herkes aynı class'ları kullandığı için site her yerde aynı görünür.

Bir ders nasıl işler?

• Anlatım: Önce bileşenin ne işe yaradığını ve hangi class'larla kurulduğunu öğrenirsin.
• Örnek kod: Küçük bir örneği satır satır incelersin. Örnek kodlar kopyalanamaz; class adlarını kendi elinle yazmak onları ezberlemenin en hızlı yoludur.
• Görev: Editöre HTML'ini yazar, Çalıştır ile sonucu önizlemede görürsün. Bootstrap'in CSS ve JavaScript dosyaları önizlemeye otomatik eklenir; modal ve akordiyon gibi bileşenler de çalışır.
• İpucu ve zorluk: İpucu al butonu ipuçlarını tek tek açar. Her dersin yanında Kolay, Orta veya Zor etiketi vardır.

Kodun nasıl kontrol edilir?

Editör, kodunda görevin istediği class adlarının ve niteliklerin olup olmadığını kontrol eder. Class adlarını görevde yazıldığı gibi, küçük harf ve tirelerle yazmalısın.