Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Bootstrap 5 konulu kapsamlı bir eğitim dersidir. Eğitmen, 2021 yılında YouTube içerik üretimiyle geçinen biri olarak kendini tanıtmaktadır.
- Video, Bootstrap 5'in grid sistemi ve responsive tasarım özellikleri üzerine odaklanmaktadır. İçerikte konteyner, satır ve sütun sınıflarının kullanımı, "col" ve numaralı "col" sınıflarının işlevleri, breakpoint kavramı, sıralama öncelikleri (order), boşluk ayarları (offset) ve katlar (gutters) gibi temel konular detaylı şekilde ele alınmaktadır. Ayrıca, görsel yerleştirme, flexbox kullanımı ve padding ayarları gibi pratik uygulamalar da gösterilmektedir.
- Eğitim yaklaşık 1 saat sürmekte olup, bir web sayfası tasarımının temel yapılandırmasını göstermektedir. Video, bir proje örneği üzerinden Bootstrap klaslarının nasıl kullanılacağını adım adım göstermekte ve bir sonraki derste breakpointler konusunun devam edeceği belirtilmektedir.
- 00:09Bootstrap 5 Dersi ve Duyuru
- Bootstrap 5 dersinin devamında ebat alanı, sayfa düzeni ve ızgara sistemi (grid yapısı) konuları ele alınacak.
- Eğitmen, çalıştığı şirketteki saat ücretinin düşürülmesini kabul etmediğini ve işten ayrıldığını belirtiyor.
- 2021 yılında sadece YouTube içerikleri üretmekle gelir elde edeceğini ve bunun için İngilizce bir kanal açtığını açıklıyor.
- 02:35Grid Yapısı ve Örnek
- Bootstrap, içeriği yerleştirmek için konteyner, satır (row) ve sütun (col) sınıfları gibi hazır sınıflar sağlar.
- Konteyner sınıfı, içeriği belirli bir genişlikte ortalayarak sayfanın tamamını kaplamasını önler.
- Satır ve sütun sınıfları, içeriği düzenlemek için kullanılır ve içeriği belirli bir yapıda yerleştirir.
- 04:02Örnek Uygulama
- Örnek için konteyner, row ve col sınıfları kullanılarak bir yapı oluşturulur.
- Sütunlara farklı renkler verilerek (kırmızı, mavi, sarı) görünüm daha anlaşılır hale getirilir.
- Satır sınıfına yükseklik değeri verilerek (300 piksel) sütunların görünmesi sağlanır.
- 07:06Konteyner Sınıfları
- Konteyner sınıfı, içeriği belirli bir genişlikte ortalayarak sağ ve sol tarafta boşluklar bırakır.
- Sağ ve sol boşlukları istemediğimizde konteyner yerine konteyner-fluid (konteyner-f) sınıfı kullanılabilir.
- Konteyner-fluid sınıfı, içeriği sayfanın tamamını kapsayacak şekilde yerleştirir.
- 08:08Bootstrap'ta Satır ve Sütun Yapısı
- Bootstrap, sayfa düzenini satır ve sütun (ikili koordinat sistemi) olarak ayırarak içerikleri istediğiniz yere yerleştirmenizi sağlar.
- Bu sistem sayesinde yazı ve görseller gibi içerikler sütunlar içine yerleştirilebilir.
- Bu kolaylık sağlayıcı hazır kütüphanelerin en büyük eleştirisi, tüm web sayfalarının birbirine benzediği şeklinde genel bir eleştiriye maruz kalmasıdır.
- 09:51Satır ve Sütun Kullanımı
- Konteyner içerisinde satır (row) sınıfı bulunur ve bu satır sınıfı içerisinde sütun (col) sınıfları yer alır.
- Sadece "col" sınıfı kullanıldığında, satır otomatik olarak sütun sayısına göre eşit parçalara bölünür.
- Örneğin, üç "col" sınıfı kullanıldığında satır üç eşit sütuna, iki "col" kullanıldığında iki eşit sütuna bölünür.
- 12:45Sütun Boyutlarının Belirlenmesi
- Grid (ızgara) yapısında her satır toplam on iki sütundan oluşur ve bu sütunlar numara ile belirlenebilir.
- Örneğin, "col-2", "col-3" ve "col-7" kullanıldığında satır iki, üç ve yedi birimlik sütunlara bölünür.
- Eğer sütunların toplamı on ikiyi aşarsa, aşan sütunlar alt satıra geçer.
- 16:16Sütunların Eşit Paylaşımı
- Hem "col" hem de numaralı "col" sınıfları birlikte kullanılabilir.
- Eğer bir sütuna numara verilirse (örneğin "col-6"), geri kalan sütunlar eşit olarak paylaştırılır.
- Örneğin, "col-6" kullanıldığında, geri kalan altı birim iki sütun arasında üç-üç olarak paylaştırılır.
- 17:18Sütun Sayısının Belirlenmesi
- "cols" sınıfı kullanılarak her satırda kaç sütun olacağını belirtebilirsiniz.
- Örneğin, "cols-2" kullanıldığında her satırda iki sütun olur ve sütun sayısı belirtilen değerden fazlaysa, aşan sütunlar alt satıra geçer.
- Kullanılan tüm sınıf isimleri Bootstrap dökümantasyonundan alınır ve kendi tercihlerimize göre değil, belirlenmiş standartlara göre kullanılır.
- 19:36Bootstrap Sütun Sıralaması
- Bootstrap'ta sütunların sıralamasını değiştirmek için "order" özelliği kullanılabilir.
- "Order" özelliği sayesinde sütunların kodda belirtilen sıradan farklı olarak sıralanabilir.
- "Order-first" ve "order-last" sınıfları kullanılarak sütunların sıralaması kolayca ayarlanabilir.
- 22:21Bootstrap Sütunları İçin Offset Kullanımı
- Bootstrap'ta "offset" özelliği sayesinde sütunların başlangıç konumunu değiştirebilirsiniz.
- Offset, sütunun başlangıç noktasını kaydırarak içeriğin ortalanmasını veya istenilen konuma yerleştirilmesini sağlar.
- Offset değeri, sütunun başlangıç noktasını kaydıracağı boşluk miktarını belirtir.
- 24:21Bootstrap Sütunları Arası Boşluk Ayarlama
- Bootstrap'ta sütunlar arası boşluk ayarlamak için "gutter" (kat) özelliği kullanılır.
- "gx" ve "gy" sınıfları kullanılarak x ekseni ve y ekseni üzerinde boşluk ayarlanabilir.
- "g-0" sınıfı kullanılarak sütunlar arası boşluk tamamen kaldırılabilir.
- 27:55Bootstrap Breakpoint Kullanımı
- Bootstrap'ta "breakpoint" (kırılma noktası) özelliği, farklı ekran genişliklerine göre tasarımın davranışını değiştirmeyi sağlar.
- Breakpoint'ler sayesinde ekran genişliği belirli değerlerden büyük veya küçük olduğunda sütunların davranışını değiştirebilirsiniz.
- Örneğin, "lg" breakpoint'i 992 piksel ve yukarısı için geçerli olup, bu genişlikte sütunların davranışını belirleyebilirsiniz.
- 32:06Bootstrap Grid Sistemi ve Breakpoint Kullanımı
- Bootstrap grid sisteminde "col" sınıfı kullanılarak sütunlar oluşturulur ve "col-6" sınıfı eklenerek ekran genişliği 576 piksel ve daha büyük olduğunda 6 sütun kaplaması sağlanır.
- Breakpoint (kırılma noktası) kavramı, sayfanın genişliğine göre davranışını değiştirmeyi sağlar; örneğin 576 piksel ve daha büyük ekranlarda 6 sütun kaplayan bir eleman, daha küçük ekranlarda alt alta yerleştirilir.
- Breakpoint'ler kullanılarak farklı ekran boyutlarında farklı sütun sayıları belirlenebilir; örneğin "col-md-4" sınıfı eklenerek medium (768 piksel) ve daha büyük ekranlarda 4 sütun kaplaması sağlanabilir.
- 37:47Proje Tasarımına Başlangıç
- Proje tasarımı için konteyner sınıfı kullanılarak içerikler yerleştirilecek ve başlık için "h2" etiketi ve "display-5" sınıfı kullanılacak.
- Başlığın rengi için "text-primary" sınıfı eklenerek projenin temel rengi belirlenecek.
- Sectionlar arasında boşluk sağlamak için kendi class'ı oluşturulabilir ve CSS ile yukarıdan ve aşağıdan 100 piksellik boşluk verilebilir.
- 42:18Grid Sisteminde Sütunlar ve İçerik Yerleştirme
- Başlık sonrası bir class satırı oluşturulup iki sütun yerleştirilir; birinci sütun "col-8" (8/12) ve ikinci sütun "col-4" (4/12) olarak ayarlanır.
- İlk sütunun içine paragraf yerleştirilirken, metni ortalamak için ekstra bir div kullanılır.
- Paragraf içeriği için "Lorem ipsum" metni kullanılır.
- 44:11Bootstrap Kullanımı ve Görsel Yerleştirme
- Tekstil bölümü 12/18 birim olarak yerleştirildi.
- İkinci sütuna img etiketi kullanılarak "img/company.jpg" görseli yerleştirildi.
- Görselin büyük boyutu tasarımın parçalanmasını engellemek için img etiketine "img-fluid" klası eklendi.
- 45:34Bootstrap Klasları ve Düzenleme
- Görselin genişliği 8 birim olarak ayarlandı.
- Başlıklara boşluk vermek için "mt-5" klası kullanıldı.
- İçeriği ortalamak için "d-flex" ve "justify-content-center" klasları eklendi.
- 48:07Sütun Düzenlemesi ve İçerik Yerleştirme
- Sütunun yüksekliğini ayarlamak için "h-100" klası eklendi.
- Tekstil içeriği iki ayrı paragraf olarak veya tek paragraf içinde kopyalanabilir.
- Sütunlara "col-8" ve "col-4" klasları kullanılarak düzenlendi.
- 50:57Renk ve Boşluk Ayarları
- Sütunlara "light" klası eklenerek gri renk verildi.
- İçerikler arasında boşluk vermek için "mb-3" ve "mb-5" klasları kullanıldı.
- Görsellerin önce gelmesi için "order-first" klası eklendi.
- 53:33Padding Ayarları ve Kapanış
- Görsellerin bulunduğu sütuna "p-0" klası eklenerek padding kaldırıldı.
- Breakpointler konusu devam edecek ve ekran boyutuna göre düzenlemeler yapılacak.
- Dersin sonunda breakpointlerin (kırılma anları) önemine vurgu yapıldı.