Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Gürkan Engin'e saygılarını sunan bir eğitmen tarafından sunulan Bootstrap 5 eğitim setinin üçüncü dersidir.
- Videoda Bootstrap'teki container ve container fluid kavramları detaylı olarak anlatılmaktadır. Eğitmen, container'ın sayfayı otomatik olarak ortaladığını, farklı ekran boyutlarında (small, medium, large, extra large, extra extra large) nasıl genişlediğini ve iç boşluk (padding) ile dış boşluk (margin) değerlerini nasıl ayarlayabileceğimizi göstermektedir. Ayrıca, container fluid özelliğinin tüm ekran boyutlarında ekranı yüzde yüz kaplaması ve bu nedenle small, medium, large, x-large gibi kısımlarının olmaması bilgisi de paylaşılmaktadır.
- Eğitmen, ileriki derslerde bir site teması oluşturarak container kullanımını daha detaylı göstereceğini belirtmektedir. Video, Bootstrap'in mobil, tablet, dizüstü ve masaüstü cihazlarda uyumlu tasarım sağlama özelliğine de değinmektedir.
- Bootstrap Eğitim Seti - Container ve Container Fluid
- Bu ders, Bootstrap 5 eğitim setinin üçüncü dersi olup, container ve container fluid konularını anlatacak.
- Bootstrap'ın ana gücünü temsil eden container ve container fluid kodları, sitede sürekli kullanılmaktadır.
- Container, sayfayı otomatik olarak ortalamak için kullanılır ve sitedeki tüm kodlar containerın içerisine yazılmalıdır.
- 02:14Container Özellikleri
- Container, maksimum genişliği mobil cihazlarda %100'dür.
- Small ekranda (576-768 piksel) 540 piksel, medium-large ekranda 720 piksel, large-ekstra large ekranda 960 piksel, ekstra large-xxlarge ekranda 1140 piksel, 1400 piksel üzeri ise 1320 piksel olacak şekilde ayarlanır.
- Container sağdan ve soldan ortalama, ancak yukarıdan ve aşağıdan boşluk bırakmaz.
- 04:27Bootstrap Class Kullanımı
- Bootstrap, iç boşluk (padding) ve dış boşluk (margin) vermek için class'lar sunar.
- Container'ı iç içe kullanarak sitenin farklı kısımlarını ortalamak mümkündür.
- Bootstrap, arka plan renkleri ve yazı renkleri için de hazır class'lar sağlar.
- 08:50Bootstrap'in Kullanışlı Özellikleri
- Bootstrap, mobil, tablet, dizüstü ve masaüstü bilgisayarlara yönelik farklı ekranda uyumlu tasarım sağlar.
- Extra small, small, medium, large, ekstra large ve ekstra ekstra large sınıfları kullanılarak farklı ekranda farklı container genişlikleri ayarlanabilir.
- Bootstrap kodlarını ezberlemeye gerek yoktur, kullanımla öğrenilir.
- 10:15Container Özellikleri
- Small, medium, large, x-large ve xx-large boyutları listelenmiştir.
- Container small, small cihazlar veya daha üstü cihazlarda ortalanmayı sağlar.
- Container, tüm cihazlarda ortalanmayı sağlarken, container small sadece small ve üstü ekranlarda ortalanmayı sağlar.
- 11:36Ekran Boyutlarına Göre Container Davranışları
- Container medium, medium ekranlarda veya daha üstü ekranlarda konteyner moduna geçer.
- Container large, large ve üstünde ekranlarda konteyner modunu çalıştırır.
- Container xl, x-large ve sonrasında çalışırken, container xxl ise xx-large cihazlarda çalışır.
- 13:46Container Fluid Özellikleri
- Container fluid, ekranı yüzde yüz kaplayacak şekilde doldurur.
- Container fluid özelliğinde genişlik daima yüzde yüz olur ve tüm ekranın genişliğini kaplar.
- Container fluid, sitelerin bazı yerlerini ortalanmayıp tamamen ekranı doldurmak istediğimizde kullanılır.