BOOTSTRAP FORMS & LAYOUT EĞİTİMİ

Bootstrap ile düzen ve form kur

Grid ve flex yardımcılarıyla düzen, form bileşenleri ve doğrulamayla duyarlı formlar

Bootstrap Forms & Layout Eğitimi, Bootstrap 5 ile hem sayfa düzenini hem form arayüzlerini profesyonelce kurmayı öğretir. Program; container ve 12 kolonlu grid, breakpoint'ler, flex ve boşluk yardımcı sınıfları, form kontrolleri, seçim ve onay bileşenleri, in…

3 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Container ve grid'den flex yardımcılarına, form bileşenlerinden doğrulamaya

Bootstrap Forms & Layout Eğitimi, Bootstrap 5 ile hem sayfa düzenini hem de form arayüzlerini profesyonelce kurmayı öğretir. Katılımcılar container, grid ve flex yardımcı sınıflarıyla duyarlı iskeletler tasarlar; ardından form kontrolleri, seçim kutuları, input group ve floating label gibi bileşenleri uygular. Program, form grid düzeni, yerleşik ve özel doğrulama ile erişilebilirlik kurallarıyla tamamlanarak kullanımı kolay formlar ortaya çıkarır.

Süre ve Format

3 Gün. Her gün dört modül; kısa anlatımın ardından aynı kayıt formu adım adım kurulup düzen ve doğrulama kararları tarayıcıda denenir.

Seviye

Orta Seviye — Bootstrap 5 grid, flex yardımcıları ve form bileşenleriyle düzen ve form kurmayı öğreten program

Öğrenme Metodu

Gerçek bir kayıt formu grid iskeletinden başlayarak bileşen bileşen kurulur; her adımda düzen ve doğrulama tarayıcıda test edilir.

Neden Bu Eğitim?

🎯Tutarlı form arayüzü

Hazır form bileşenleriyle tüm projede aynı görünümde, erişilebilir ve kullanımı kolay formları hızla kurarsınız.

📐Esnek düzen kurma

Grid ve flex yardımcı sınıflarıyla formları ve sayfa bölümlerini farklı ekranlara uyumlu biçimde yerleştirmeyi öğrenirsiniz.

✅Güvenilir doğrulama

Yerleşik ve özel doğrulama ile kullanıcı hatalarını anlaşılır biçimde gösteren formlar tasarlamayı kavrarsınız.

Anahtar Konular

bootstrap form eğitimibootstrap layout eğitimibootstrap grid kursubootstrap form doğrulamaduyarlı form tasarımıön yüz geliştirme eğitimibootstrap 5 forminput group bootstrapfloating labelweb form eğitimi
“İyi bir form kullanıcıyı zorlamaz; doğru düzen ve net doğrulama bir araya geldiğinde her alan kendini anlatır.”

Ön Koşullar

Eğitime başlamadan önce faydalı olacak bilgi ve araçlar

1
HTML form bilgisi

input, label ve form etiketlerine dair temel HTML bilgisi bileşenleri anlamayı kolaylaştırır.

2
CSS temeli

Sınıf seçicileri ve kutu modeli gibi temel CSS kavramları düzen sınıflarını kavramayı hızlandırır.

3
Tarayıcı araçları

Geliştirici araçlarıyla öğe inceleyebilmek doğrulama ve duyarlılık testlerini kolaylaştırır.

4
Kod düzenleyici

VS Code gibi bir editör ve canlı sunucu eklentisiyle çalışabilir durumda olmak yeterlidir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı container türlerini, 12 kolonlu grid'i ve flex yardımcı sınıflarını kullanarak farklı ekranlara uyumlu, düzenli bir sayfa iskeleti kurmayı öğrenir.
Modül 1
Container ve Grid Temeli
  • container ile sabit, container-fluid ile tam genişlik
  • Breakpoint'e özel container-md gibi kaplar
  • row ve col ile içeriği 12 kolona bölme
  • col-auto ve eşit genişlikli kolon davranışı
  • g-* gutter sınıflarıyla kolon arası boşluk
  • İç içe (nested) grid ile alt düzen kurma
Modül 2
Duyarlı Kolonlar
  • col-sm, col-md ve col-lg ile ekrana göre düzen
  • Mobilde tek, masaüstünde çok kolon kurgusu
  • offset-md ile kolonları yatayda kaydırma
  • order ile kolon sırasını ekrana göre değiştirme
  • row-cols ile satır başına kolon sayısı
  • Kırılımların tarayıcıda görsel test edilmesi
Modül 3
Flex ve Hizalama Yardımcıları
  • d-flex ile öğeleri esnek kutuya dönüştürme
  • justify-content ile ana eksende dağılım
  • align-items ve align-self ile çapraz hizalama
  • flex-column ve flex-row ile yön değişimi
  • flex-wrap ile öğelerin alt satıra taşması
  • gap yardımcısıyla esnek öğeler arası boşluk
Modül 4
Boşluk ve Konum Yardımcıları
  • m ve p sınıflarıyla dış ve iç boşluk ölçeği
  • mx-auto ile öğeyi yatayda ortalama
  • Duyarlı boşluk için m-md gibi varyantlar
  • position ve top-start gibi konum yardımcıları
  • Boşluk ölçeğinin 0'dan 5'e tutarlı artışı
  • Negatif kenar boşluğu kullanımının sınırları
Günün hedefiKatılımcı metin, seçim ve onay gibi form kontrollerini kurar, input group ve range gibi bileşenleri kullanır ve floating label ile modern form alanları tasarlar.
Modül 1
Temel Form Kontrolleri
  • form-control ile metin ve e-posta alanları
  • form-label ile etiket ve erişilebilir bağlama
  • placeholder ve readonly, disabled durumları
  • Boyut için form-control-lg ve form-control-sm
  • form-text ile yardımcı açıklama metni
  • textarea ile çok satırlı metin alanı
Modül 2
Seçim, Onay ve Radyo
  • form-select ile açılır seçim listesi
  • Çoklu seçim ve gruplanmış seçenekler
  • form-check ile onay kutusu ve radyo düğmesi
  • Switch (anahtar) görünümlü onay kutusu
  • form-check-inline ile yatay dizilim
  • Düğme biçimli (toggle button) seçim grupları
Modül 3
Range ve Özel Girdiler
  • form-range ile kaydırıcı (slider) girdisi
  • Dosya yükleme için form-control file girişi
  • renk seçici ve tarih girişi bileşenleri
  • datalist ile öneri listeli metin alanı
  • Girdi boyut ve durum sınıflarının uygulanması
  • Girdilere ikon ve birim bilgisi ekleme
Modül 4
Input Group ve Floating Label
  • input-group ile girdiye ön ve son ek ekleme
  • Metin, düğme veya ikonu girdiyle birleştirme
  • input-group-text ile sabit etiket kutusu
  • form-floating ile içeri gömülü yüzen etiket
  • Yüzen etiketin odakta yukarı kayması
  • Input group ile select ve textarea birleşimi
Günün hedefiKatılımcı grid ile çok kolonlu form düzeni kurar, tarayıcı ve özel JavaScript doğrulamasını uygular ve formu erişilebilir hale getirerek projeyi tamamlar.
Modül 1
Grid ile Form Düzeni
  • row ve col ile alanları yan yana yerleştirme
  • row-gap ve col-gap ile alanlar arası boşluk
  • Yatay form için etiket ve girdinin hizalanması
  • col-form-label ile dikey hizalı etiketler
  • Duyarlı form: mobilde alt alta, geniş ekranda yan yana
  • Form bölümlerini fieldset ile gruplama
Modül 2
Yerleşik Doğrulama Durumları
  • was-validated ile tarayıcı doğrulamasını açma
  • is-valid ve is-invalid durum sınıfları
  • valid-feedback ile başarı geri bildirimi
  • invalid-feedback ile hata mesajı gösterimi
  • required, pattern ve type ile kısıt tanımı
  • Gönderimde geçersiz alana odak verilmesi
Modül 3
Özel JavaScript Doğrulaması
  • Varsayılan gönderimin preventDefault ile durdurulması
  • checkValidity ile form durumunun okunması
  • Özel kurallarla parola eşleşmesi kontrolü
  • Alan bazında anlık (canlı) doğrulama
  • Sunucu hatalarının alanlara yansıtılması
  • Gönderim düğmesinin duruma göre kilitlenmesi
Modül 4
Erişilebilirlik ve Bitirme
  • label ve for ile etiket-girdi bağlantısı
  • aria-describedby ile yardım metnini bağlama
  • Klavye ile gezinme ve odak görünürlüğü
  • Hata mesajlarının ekran okuyucuya bildirimi
  • Renk dışında ikon ve metinle durum gösterimi
  • Kayıt formu projesinin duyarlı olarak tamamlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Grid ile düzen

Container, 12 kolonlu grid ve breakpoint'lerle farklı ekranlara uyumlu sayfa iskeletlerini kurabilirsiniz.

✅
Flex yardımcıları

Flex ve hizalama yardımcı sınıflarıyla öğeleri eksenlerde dağıtıp esnek ve düzenli yerleşimler oluşturursunuz.

✅
Form kontrolleri

Metin, seçim, onay ve range gibi form kontrollerini tutarlı ve erişilebilir biçimde kurabilirsiniz.

✅
Input group kullanımı

Girdilere ön ek, son ek ve ikon ekleyerek anlamlı ve kullanımı kolay birleşik alanlar tasarlayabilirsiniz.

✅
Floating label

Yüzen etiketlerle odakta yukarı kayan, yer tasarrufu sağlayan modern form alanları oluşturabilirsiniz.

✅
Form grid düzeni

Grid ile çok kolonlu, mobilde alt alta geçen duyarlı form yerleşimlerini kolaylıkla kurabilirsiniz.

✅
Doğrulama uygulama

Yerleşik ve özel JavaScript doğrulamasıyla kullanıcı hatalarını anlaşılır biçimde gösteren formlar kurarsınız.

✅
Erişilebilir form

Etiket bağlama, aria nitelikleri ve klavye gezinmesiyle herkes için kullanılabilir formlar tasarlayabilirsiniz.

Kimler İçin Uygundur?

  • Hızlı ve tutarlı form arayüzleri kurmak isteyen ön yüz geliştiricileri
  • düzen
  • form doğrulamayı öğrenmek isteyen yazılımcılar ve duyarlı form tasarımını kavramak isteyen bilgisayar bölümü öğrencileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Hızlı ve tutarlı form arayüzleri kurmak isteyen ön yüz geliştiricileri, düzen ve form doğrulamayı öğrenmek isteyen yazılımcılar ve duyarlı form tasarımını kavramak isteyen öğrenciler için uygundur. Temel HTML ve CSS bilgisi yeterlidir.
Form doğrulama nasıl işleniyor?
Önce tarayıcının yerleşik doğrulaması ve is-valid, is-invalid durum sınıfları gösterilir; ardından JavaScript ile preventDefault, checkValidity ve özel kurallarla parola eşleşmesi gibi senaryolar uygulamalı kurulur.
Düzen (layout) konusu ne kadar kapsanıyor?
İlk gün tamamen düzene ayrılmıştır. Container türleri, 12 kolonlu grid, breakpoint'ler, flex ve hizalama yardımcıları ile boşluk sınıfları işlenir; ardından form bölümlerinde bu düzen teknikleri yeniden kullanılır.
Eğitimin süresi ve formatı nedir?
Eğitim üç gün sürer ve her gün dört modülden oluşur. Gerçek bir kayıt formu örneği grid iskeletinden başlanarak adım adım kurulur. Yüz yüze veya online yapılabilir ve kurumun ihtiyacına göre uyarlanabilir.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve kurulan kayıt formu projesini belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. Bootstrap Forms & Layout Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre3 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

HTML ve CSSResponsive Web Tasarımı Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Responsive Web Tasarımı Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Mobile-first yaklaşım, media queries, Flexbox, Grid, srcset ve container queries ile her ekrana uyumlu responsive arayüz tasarlama eğitimi.

Detayları Gör →
HTML ve CSSSass (Syntactically Awesome Style Sheets) Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Sass (Syntactically Awesome Style Sheets) Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Sass ile değişken, mixin, fonksiyon, @use modül sistemi ve 7-1 mimarisini uygulamalı öğreten kurumsal SCSS eğitimi. Modüler ve ölçeklenebilir CSS.

Detayları Gör →
HTML ve CSSTemel Seviye HTML Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Temel Seviye HTML Eğitimi

3 günTemelOnline / Yüz Yüze / Hibrit

Sıfırdan HTML öğreten temel seviye kurumsal eğitim. Doküman yapısı, metin, bağlantı, görsel, tablo, form ve semantik etiketler uygulamalı.

Detayları Gör →
HTML ve CSSTemel ve İleri Seviye HTML Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Temel ve İleri Seviye HTML Eğitimi

4 günİleriOnline / Yüz Yüze / Hibrit

Temel etiketlerden semantik HTML5, gelişmiş form, çoklu ortam, Canvas, Web Storage ve web bileşenlerine uzanan kapsamlı kurumsal HTML eğitimi.

Detayları Gör →
HTML ve CSSAdvanced Options & Responsive Web Design Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Advanced Options & Responsive Web Design Eğitimi

4 günİleriOnline / Yüz Yüze / Hibrit

Flexbox, CSS Grid, container query ve akışkan tipografiyle her ekrana uyumlu arayüz kurmayı öğreten ileri seviye responsive web tasarım eğitimi.

Detayları Gör →
HTML ve CSSAPI Development: HTML & Hypermedia Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

API Development: HTML & Hypermedia Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

HTML'i hypermedia olarak kullanarak REST, HATEOAS ve htmx ile sunucu odaklı sade API mimarisi kurmayı öğreten uygulamalı kurumsal eğitim.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn