Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan kapsamlı bir web geliştirme eğitim içeriğidir. Eğitmen, Bootstrap kütüphanesi kullanarak web sayfası tasarımı konusunda adım adım rehberlik etmektedir.
- Video, Bootstrap ile slider oluşturma ile başlayıp, div boyutlandırma, modal pencere oluşturma, kart (card) yapısı ve form tasarımı konularını kapsamaktadır. Eğitmen, her bir konuyu HTML kodları üzerinden pratik örneklerle anlatmakta ve Bootstrap'in temel bileşenlerini detaylı şekilde açıklamaktadır.
- Eğitim boyunca, Bootstrap'ın karosel (carousel) özelliği, modal penceresi kullanımı, kart yapısı ve form elemanları (label, form grupları, açılır liste, onay kutusu) gibi temel bileşenlerin nasıl kullanılacağı gösterilmektedir. Ayrıca, formun ekran boyutuna göre responsive olması için col-md gibi sınıfların kullanımı da anlatılmaktadır.
- Bootstrap ile Slider Oluşturma
- Dört tane fotoğraf indirildi ve "image" klasörüne kaydedildi.
- Sayfaya bir section eklenerek "slider" adı verildi.
- Bootstrap kütüphanesinden slider kodu kullanılarak kolayca slider oluşturulabilir.
- 02:19Slider Kodunun Hazırlanması
- Bootstrap'da "slider" yerine "karosel" (carousel) anahtar kelimesi kullanılmalıdır.
- Karosel, otomatik olarak ilerleyen ve tıklanarak ileri-geri gezilebilen resimler içerir.
- Bootstrap.com'dan karosel kodu alınarak hazırlanmış section içine yapıştırılır.
- 04:04Slider İçeriğinin Düzenlenmesi
- Resim yolları ayarlanmalı ve ilk resmin "aktif" sınıfı eklenmelidir.
- Her resim için "karosel item" oluşturulmalı ve src değerleri ayarlanmalıdır.
- Resimlerin altındaki düğmeler için sıra numaraları (id'si gibi) belirlenmelidir.
- 06:01Slider Özellikleri ve Düzenleme
- Oluşturulan slider hem otomatik ilerler hem de düğmelerle kontrol edilebilir.
- Düğmeler kaldırılabilir veya farklı şekillerde düzenlenebilir.
- Resimler için "title" (hover yazısı) ve "alt" (yüklenemezse gösterilecek yazı) özellikleri kullanılabilir.
- 07:46Bootstrap ile Boyut Ayarlamaları
- Nesnelerin boyutlarını ayarlamak için CSS kodu yerine Bootstrap class'ları kullanılabilir.
- "w-" (width) ve "h-" (height) prefixleri ile %100, %75, %50, %25 gibi oranlar belirlenebilir.
- "auto" değeri otomatik sığdırma için kullanılır.
- 09:12Bootstrap ile Boyut Ayarlama
- Bootstrap ile div elementlerinin genişlik ve yükseklik özellikleri ayarlanabilir, örneğin genişliğe %50, yüksekliğe %100 değerler verilebilir.
- Bootstrap'te "w-" ve "h-" önekleri ile genişlik ve yükseklik ayarları yapılabilir, örneğin "w-75" genişliği %75, "h-25" yüksekliği %25 yapar.
- Bu özellikler sadece diller için değil, tüm nesneler için kullanılabilir.
- 12:35Modal (Açılır Pencere) Kullanımı
- Modal, açılır pencere olarak bilinen ve web sitelerinde sıkça kullanılan bir Bootstrap bileşenidir.
- Modal, kullanıcıya bilgi vermek, onay almak veya işlem sonuçlarını göstermek için kullanılır.
- Modal kullanmak için bir düğmeye "data-toggle" ve "data-target" özellikleri eklenir, ardından modal içeriği için gerekli HTML kodları eklenir.
- 15:01Modal Örneği
- Modal örneği için önce bir düğme oluşturulur ve "data-toggle" ve "data-target" özellikleri eklenir.
- Modal içeriği için gerekli HTML kodları eklenir ve düğme tıklandığında açılır pencere görüntülenir.
- Modal, kullanıcı etkileşimini sağlayarak uyarı mesajları, onay istekleri veya işlem sonuçları gibi bilgileri kullanıcıya iletebilir.
- 19:16Bootstrap Modal ve Resim Ekleme
- Bootstrap modallarına resim eklemek için "img src" kullanabilirsiniz.
- Resimlerin responsive olması için "img-fluid" sınıfını ve genişlik/yükseklik için "%50" değerlerini kullanabilirsiniz.
- "img-fluid" sınıfı sayesinde resimler otomatik olarak yerleştirilir.
- 21:40Bootstrap Kartlar
- Bootstrap'te "card" anahtar kelimesi ile kişisel bilgi, şehir, konum veya yemek bilgisi gibi verileri göstermek için kullanışlı kartlar oluşturulabilir.
- Kartlar içinde resim, başlık, metin ve buton gibi farklı bileşenler içerebilir.
- Kartlar listeler şeklinde, sekmeler şeklinde veya ikonlu ve renkli olarak farklı şekillerde kullanılabilir.
- 24:09Kart Yapımına Örnek
- Kart oluşturmak için "div" içinde "card" sınıfı kullanılır.
- Kartın gövdesi için "card-body", başlık için "card-title", metin için "card-text" sınıfları kullanılır.
- Resimler "card-image" sınıfıyla eklenir ve genellikle "card-body" dışında yerleştirilir.
- 30:03Kart Kullanım Alanları
- Kart yapımı sadece kişi tanıtımı için değil, haberler, ürün tanıtımları gibi birçok yerde kullanılabilir.
- Kart yapımı, kenarlıkları olan, içinde resim, başlık, alt başlık ve açıklaması olan yapılara ihtiyacınız olduğunda kullanışlıdır.
- Formlar gibi etkileşimli nesneler de kart yapımının içinde yerleştirilebilir.
- 34:37Bootstrap ile Form Tasarımı
- Satırlı sütunlu yapı kullanılarak bir kayıt formu oluşturulacaktır.
- Ekran boyutuna göre sütunlar (col-md-6) ayarlanarak, orta ekrandan daha küçük olduğunda alt alta gelmesi sağlanabilir.
- Form nesneleri satır ve sütunlar şeklinde yerleştirilirken, form-control sınıfı verilmesi ve placeholder özelliği kullanılması önemlidir.
- 37:36Form Grup ve Etiketler
- Form içindeki etiketler için label kullanılır ve label kullanıldığında form-group kullanımı şarttır.
- Form grupları oluşturulurken, input alanlarına id ve placeholder değerleri atanır.
- Formun daha düzgün görünmesi için sütun boyutları ayarlanabilir (örneğin col-md-4).
- 42:00Form Elemanlarının Tamamlanması
- Telefon ve adres alanları için placeholder değerleri atanarak kullanıcıya formatta yazılması istenen bilgiler gösterilir.
- Açılır liste (select nesnesi) kullanılarak bölüm seçimi için seçenekler eklenebilir.
- Şart kabul kutucuğu için checkbox kullanılarak "şartları okudum, kabul ediyorum" seçeneği eklenebilir.
- 46:23Form Yapısının Tamamlanması
- Form, kart içine yerleştirilerek sayfada düzenli bir şekilde görüntülenir.
- Form, satırlar (row) ve sütunlar (col) kullanılarak düzenli bir yapıda oluşturulur.
- Bootstrap kullanılarak sakin ve temiz bir form tasarımı kolayca oluşturulabilir.