Bootstrap Formlar Form Düzen
Bootstrap, formları düzenlemek ve düzenli bir görünüm sağlamak için çeşitli yöntemler sunar. Form düzeni, form elemanlarının hizalaması, aralıkları ve genel görünümü üzerinde kontrol sağlar. İşte Bootstrap ile form düzenlemesi hakkında bilgilendirme:
1. Temel Form Yapısı
Bootstrap, responsive (duyarlı) bir tasarım için grid (ızgara) sistemi kullanarak form düzeni oluşturmanıza olanak tanır. Temel bir form yapısı aşağıdaki gibidir:
<div class="container mt-5"> <form> <div class="form-group mb-3"> <label for="inputEmail">E-posta</label> <input type="email" class="form-control" id="inputEmail" placeholder="E-posta adresinizi girin"> </div> <div class="form-group mb-3"> <label for="inputPassword">Şifre</label> <input type="password" class="form-control" id="inputPassword" placeholder="Şifrenizi girin"> </div> <button type="submit" class="btn btn-primary">Gönder</button> </form> </div> 2. Grid Sistemi Kullanma
Bootstrap’ın grid sistemini kullanarak form elemanlarını düzenleyebilirsiniz. Örnek:
<div class="container mt-5"> <form> <div class="row mb-3"> <div class="col-md-6"> <label for="inputEmail">E-posta</label> <input type="email" class="form-control" id="inputEmail" placeholder="E-posta adresinizi girin"> </div> <div class="col-md-6"> <label for="inputPassword">Şifre</label> <input type="password" class="form-control" id="inputPassword" placeholder="Şifrenizi girin"> </div> </div> <button type="submit" class="btn btn-primary">Gönder</button> </form> </div> 3. Form Elemanlarını Hizalama
Form elemanlarının hizalanmasını sağlamak için Bootstrap’ın form-row sınıfını kullanabilirsiniz. Aşağıda bir örnek verilmiştir:
<div class="container mt-5"> <form> <div class="form-row mb-3"> <div class="col"> <label for="firstName">Ad</label> <input type="text" class="form-control" id="firstName" placeholder="Adınızı girin"> </div> <div class="col"> <label for="lastName">Soyad</label> <input type="text" class="form-control" id="lastName" placeholder="Soyadınızı girin"> </div> </div> <button type="submit" class="btn btn-primary">Gönder</button> </form> </div> 4. Form Düzeni Özelleştirme
Bootstrap ile form düzeninizi özelleştirmek için CSS ile birlikte Bootstrap sınıflarını kullanabilirsiniz. Örneğin, aralıkları değiştirmek veya özel stiller eklemek için:
.form-group { margin-bottom: 1.5rem; /* Alt boşluk */ } .btn-primary { margin-top: 1rem; /* Üst boşluk */ } 5. İleri Düzey Düzen Örnekleri
Daha karmaşık bir form düzeni oluşturmak için aşağıdaki gibi bir yapı kullanabilirsiniz:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Form Düzen Örneği</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <h2>Form Düzeni Örneği</h2> <form> <div class="form-row mb-3"> <div class="col-md-6"> <label for="inputName">Ad</label> <input type="text" class="form-control" id="inputName" placeholder="Adınızı girin"> </div> <div class="col-md-6"> <label for="inputSurname">Soyad</label> <input type="text" class="form-control" id="inputSurname" placeholder="Soyadınızı girin"> </div> </div> <div class="form-group"> <label for="inputEmail">E-posta</label> <input type="email" class="form-control" id="inputEmail" placeholder="E-posta adresinizi girin"> </div> <div class="form-group"> <label for="inputPassword">Şifre</label> <input type="password" class="form-control" id="inputPassword" placeholder="Şifrenizi girin"> </div> <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck">Beni hatırla</label> </div> <button type="submit" class="btn btn-primary">Gönder</button> </form> </div> </body> </html> 6. Özet
Bootstrap ile form düzeni oluşturmak, form elemanlarını hizalamak ve genel görünüm üzerinde kontrol sağlamak oldukça kolaydır. Grid sistemi, form elemanlarını düzenlemenize ve kullanıcı deneyimini artırmanıza yardımcı olur. Daha fazla bilgi ve detaylı bileşenler için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.
Bu ders size yardımcı oldu mu? Puan verin!
Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.
Sıkça Sorulan Sorular (SSS)
Bu ders ve konuyla ilgili en çok merak edilenler
Bootstrap Formlar Form Düzen dersini öğrenmek için ön koşul var mı?
Bu eğitim temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.
Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?
Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.
Takıldığım bir yerde nereden soru sorabilirim?
Dersin altındaki topluluk yorumları bölümünden sorunuzu sorabilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.
Topluluk Yorumları (0)
Ders Hakkında Yorum Yap veya Soru Sor
Henüz yorum yapılmamış. İlk yorumu siz yazın!