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.