Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Bootstrap Sup derslerinin bir parçası olup, web tasarımında responsive tasarım konusunu ele alan bir eğitim içeriğidir.
- Videoda, Bootstrap'ın hazır responsive özellikleri gösterilmekte ve Windows Resize Chrome uzantısı kullanılarak farklı ekran boyutlarında sayfanın nasıl göründüğünü test edilmektedir. Eğitmen, özellikle 992 piksel genişliğindeki ekranlarda footer bölümünde yaşanan sorunları çözmek için CSS kodları eklemekte ve footer kısmındaki ikonların boyutlarını, font boyutlarını ve padding değerlerini değiştirerek responsive tasarım yapmaktadır.
- Video, Bootstrap dökümantasyonundan media query'ler hakkında bilgi vererek, ekstra küçük, küçük, orta ve büyük ekran boyutlarına karşılık gelen media query değerlerini açıklamaktadır. Bir sonraki derste küçük ve orta boyutlu cihazlar için media queryler üzerine devam edileceği belirtilmektedir.
- Bootstrap Derslerine Giriş
- Önceki derste animasyonlar bölümünde örnek animasyonlar yapılmış, ancak bu derste sayfada sadelik tercih edildiği için animasyonlar eklenmemiştir.
- Bu derste responsive tasarım üzerine konuşulacaktır.
- Bootstrap'ta zaten yazılan kodların responsive özellikleri vardır, örneğin ekran büyüklüğü küçültüldüğünde menüler akordiyon haline gelir.
- 01:40Bootstrap'ın Responsive Özellikleri
- Ekran küçültüldüğünde yazıların yukarıya gelmesi ve font boyutlarının ekrana göre büyük olması gibi eksiklikler media query'leri yardımıyla giderilebilir.
- Bootstrap kullanmadan akordeon menü yapmak çok daha fazla zaman alırdı.
- Service section'da font ve logo boyutlarını küçültmek dışında çok fazla düzenleme gerekmezken, görseller çözünürlüklerinden kaynaklı bozulma gösterebilir.
- 03:34Sayfanın Genel Görünümü
- Ebatas bölümünde görseller üzerinde çalışılacak, auring team bölümünde görsellerin boyu küçültülecek ve logolar düzenlenecektir.
- Form bölümü ve logolar genel olarak iyi görünüyor, ancak text ortaya alınabilir veya buton ve sekme üzerindeki text arasındaki boşluk arttırılabilir.
- Chrome tarayıcısında "Windows Resizer" adlı bir extension kullanılarak sayfanın farklı çözünürlüklerde nasıl göründüğünü test edebilirsiniz.
- 06:27Bootstrap Dökümantasyonu ve Media Query'ler
- Bootstrap dökümantasyonunda layout bölümünde media query ile ilgili bilgiler verilmektedir.
- Çok küçük boyutlu cihazlar için maksimum genişlik 575 piksel, küçük cihazlar için 767 piksel, orta cihazlar için 991 piksel olarak belirlenmiştir.
- Bootstrap'ta col-sm, col-md, col-lg gibi değerler piksel yükseği olarak kullanılır.
- 08:45Media Query'lerin Uygulanması
- 992 piksel genişliğinde bir ekran için media query oluşturulup test edilmiştir.
- Footer bölümünde logoların tek satır halinde iken, ekran küçültüldüğünde buton ve Google Plus ikonunun aşağıya gelmesi gibi sorunlar ortaya çıkmıştır.
- Media query'ler için ayrı bir CSS dosyası oluşturulup, footer içerisindeki kodlar bu dosyaya kopyalanmıştır.
- 13:49Footer Tasarımında Değişiklikler
- Company social icons'un tamamı siliniyor çünkü onunla ilgili herhangi bir değişiklik yapılmayacak.
- İkonların boyutları 40 piksel yerine 30 piksel olarak küçültülüyor ve padding değerleri 9 pikselden 5 piksele düşürülecek.
- Background için yazılan kodlar siliniyor çünkü media query için tekrar yazmaya gerek yok, sadece değiştirilen kodların bulunması yeterli.
- 15:48Font Boyutları ve Düzenlemeler
- Font boyutu 14 piksel yerine 12 piksel olarak değiştiriliyor ve butonların yüksekliği 30 piksel olarak ayarlanıyor.
- Font boyutu test amaçlı 8 piksel olarak düşürüldüğünde, font line height değeri 1 olarak ayarlanarak sorun çözülüyor.
- Font boyutu 11 piksel olarak ayarlanıyor ve 992x600 piksel ekran boyutu için uygun hale getiriliyor.
- 18:45Footer Padding ve Ekran Boyutları
- Footer için padding top değeri azaltılıyor.
- 992x600 piksel ekran boyutu için footer tasarımı tamamlanıyor ve fontların büyük görünmediği kontrol ediliyor.
- Ekran genişliği küçültüldüğünde ikonların küçüldüğü gözlemleniyor.
- 21:02Media Query Değerleri
- Extra small için 575 piksel media query değeri kullanılıyor çünkü Bootstrap'ta 576 piksele denk geliyor.
- Small device için 768 piksel, medium device için 992 piksel media query değerleri kullanılıyor.
- Konteyner 1140 piksel olduğu için extra large için medya query kullanmaya gerek kalmıyor.