Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan kapsamlı bir Bootstrap eğitim içeriğidir. Eğitmen, Bootstrap kütüphanesinin temel özelliklerini ve kullanımını adım adım anlatmaktadır.
- Video, Bootstrap'in grid sistemi, tipografi özellikleri ve responsive tasarım konularını kapsamaktadır. İlk bölümde grid sisteminin 12 sütunlu yapısı ve XS, SM, MD, L gibi farklı ekran boyutlarına göre nasıl davranacağı gösterilirken, ikinci bölümde Bootstrap'in font boyutları, başlık etiketleri ve renk sınıfları anlatılmaktadır. Son bölümde ise tablo, resim ve video etiketlerinin responsive hale getirilmesi için gerekli özellikler açıklanmaktadır.
- Eğitim boyunca eğitmen, kod örnekleri üzerinden Bootstrap'in temel sınıflarını ve özelliklerini pratik uygulamalarla göstermekte, özellikle mobil, tablet ve masaüstü cihazlarda içeriklerin nasıl düzenlenebileceğini detaylı olarak anlatmaktadır.
- 00:00Bootstrap Grid Sistemi
- Bootstrap'in ikinci en önemli konularından biri olan grid sistemi, ızgara sistemidir ve sağlı sollu menüler, içerik gibi düzenlemeler yapmak için kullanılır.
- Bootstrap'in on iki adet sütunu vardır ve bu sütunlar grid class'larıyla birlikte kullanılır.
- Grid sistemi akışkan bir yapıdadır ve farklı cihazlarda (cep telefonu, tablet, laptop, desktop) farklı sütun sayısı gösterebilir.
- 01:28Grid Sınıfları ve Kullanımı
- Grid class'ları x-sm-md-lg gibi ifadelerle belirtilir; x-sm (extra small), sm (small), md (medium), lg (large) tabirleridir.
- Bootstrap grid'in temel yapısı "row" (satır) ve "col" (sütun) ifadelerinden oluşur.
- "col" class'ı, sütun boyutunu belirtir ve 1'den 12'ye kadar değerler alabilir.
- 03:17Grid Örneği ve Mobil Uyumluluk
- Örnek olarak bir satır (row) oluşturulup, farklı sütun boyutları (col-md-12, col-md-6, col-md-3, col-md-2, col-md-1) kullanılarak bir yapı oluşturulmuştur.
- Mobil cihazlarda (x-sm) sütunların yan yana durması için tüm sütunların boyutu 6 olarak ayarlanmıştır.
- Tablet cihazlarda (sm) sütunların düzeni değiştirilerek üç sütun (col-sm-3) kullanılmıştır.
- 14:05Farklı Cihazlarda Görünüm
- Large cihazlarda (lg) sütunların düzeni farklı bir şekilde ayarlanabilir.
- Bootstrap grid sistemi, farklı cihazlarda farklı davranış biçimleri sergileyerek mobil uyumluluk sağlar.
- Grid yapısı, birden fazla kolonu yan yana koyarak farklı boyutlarda düzen oluşturmayı sağlar.
- 14:38Bootstrap Tipografi Özellikleri
- Bootstrap'ın varsayılan ayarlarında global default font size 14 piksel, line hack'i 1.48 olarak tanımlanmıştır.
- Tarayıcıda altı düzey başlık vardır: h1 (36 piksel) ve h6 (daha küçük).
- Bootstrap'ta "small" sınıfı, HTML etiketinin daha küçük bir versiyonunu oluşturur.
- 16:03Bootstrap Yazı Stilleri
- "Mark" sınıfı, yazı üzerine fosforlu kalemle yazılmış gibi bir görünüm sağlar.
- "Title" sınıfı, üzerine geldiğinizde açıklama yazısı göstermek için kullanılır.
- "Blockquote" sınıfı, alıntı veya söz gibi içeriği vurgulamak için kullanılır.
- 18:13Listeleme ve Kod Gösterimi
- "Dl" ve "dt" sınıfları ile liste oluşturulabilir.
- "Kbd" sınıfı, kod gibi göstermek istediğiniz metinleri vurgular.
- "Pre" elementi, metni çerçeveli bir şekilde gösterir.
- 19:30Renk ve Konumlandırma Sınıfları
- Bootstrap'ta altı farklı renk sınıfı vardır: primary, success, info, warning ve danger.
- "Text" sınıfı, metni belirtilen renge boyar.
- "Bg" sınıfı, etiketin arka planını belirtilen renge boyar.
- 21:37Yazı Düzenleme Sınıfları
- "Text-center" sınıfı, metni ortalar.
- "Justify-right" ve "justify-left" sınıfları, metni sağa ve sola yaslar.
- "Text-small" sınıfı, metni %85 oranında küçültür.
- 22:29Yazı Biçimlendirme Sınıfları
- "Text-large" sınıfı, metni öne çıkartır ve manşet yazısı gibi görünür.
- "Text-uppercase" ve "text-lowercase" sınıfları, metni tamamen büyük veya küçük yapar.
- "Text-capitalize" sınıfı, ilk karakterleri büyük, sonrasında küçük yapar.
- 25:00Liste ve Menü Sınıfları
- "List-unstyled" sınıfı, listenin başındaki nokta işaretlerini kaldırır.
- "List-inline" sınıfı, dikey listeyi yatay bir menü olarak gösterir.
- "Dial-horizontal" sınıfı, yatay olarak sekme içeriği alır ve otomatik olarak dolanır.
- 27:20Tablo Sınıfları
- "Strip" sınıfı, tabloyu bir dolu bir boş şeklinde satırların okunaklığını artırmak için kullanır.
- "Bordered" sınıfı, tablonun kenarına sınır koyar.
- "Hover" sınıfı, üzerine geldiğinizde arka planda gri bir arka plan oluşturur.
- 30:41Tablolar ve Responsive Özellikler
- Tablo satırlarına "active", "success", "info", "warning" ve "danger" ifadeleri eklenerek otomatik olarak stil verilebilir.
- Küçük aygıtlarda tablolar sığmayabilir, bu durumda "table-responsive" sınıfı kullanılarak 768 pikselden küçük aygıtlarda sağa sola kaydırma özelliği aktif edilebilir.
- Cep telefonlarına uyumlu tablo hazırlamak önemlidir çünkü kullanıcıların yaklaşık %80'i cep telefonundan siteye giriş yapmaktadır.
- 34:32Resimler ve Responsive Özellikler
- Resim etiketine "img-response" sınıfı eklenerek responsive resim özelliği sağlanabilir.
- "img-rounded" sınıfı ile resmin köşeleri yuvarlanabilir, "img-circle" ile yuvarlak bir resim oluşturulabilir.
- "img-thumbnail" sınıfı ile içe doğru beyaz, dışarıya şeffaf bir bordolu küçük resim oluşturulabilir.
- 37:53Resim ve İçerik Ekleme
- Resmin altına "caption" etiketi konularak açıklama eklenebilir.
- "embed-responsive" sınıfı kullanılarak iframe içindeki içerikler (YouTube, Dailymotion videoları veya ekran görüntüleri) responsive hale getirilebilir.
- "embed-responsive-16:9" ve "embed-responsive-item" sınıfları kullanılarak video çözünürlüğü 16:9 olarak ayarlanabilir.