Önyükleme Formları
Bootstrap'in Varsayılan Ayarları
Form denetimleri, Bootstrap ile otomatik olarak bazı genel stiller alır:
Tüm metinsel <input>, <textarea>ve
<select>sınıflı öğelerin .form-controlgenişliği %100'dür.
Önyükleme Form Düzenleri
Bootstrap, üç tür form düzeni sağlar:
- Dikey form (bu varsayılandır)
- yatay form
- satır içi formu
Üç form düzeninin tümü için standart kurallar:
- Etiketleri ve form denetimlerini içe sarın
<div class="form-group">(optimum aralık için gerekli) .form-controlTüm metinsel<input>,<textarea>ve<select>öğelerine sınıf ekleyin
Önyükleme Dikey Formu (varsayılan)
Aşağıdaki örnek, iki giriş alanı, bir onay kutusu ve bir gönder düğmesi ile dikey bir form oluşturur:
Örnek
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Önyükleme Satır İçi Formu
Satır içi biçimde, tüm öğeler satır içi, sola hizalıdır ve etiketler yan yanadır.
Not: Bu, yalnızca en az 768 piksel genişliğindeki görünüm alanlarındaki formlar için geçerlidir!
Satır içi form için ek kural:
.form-inlineÖğeye sınıf<form>ekle
Aşağıdaki örnek, iki giriş alanı, bir onay kutusu ve bir gönder düğmesi olan bir satır içi form oluşturur:
Örnek
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
İpucu: Her giriş için bir etiket eklemezseniz ekran okuyucular formlarınızla ilgili sorun yaşar. .sr-onlySınıfı kullanarak ekran okuyucular hariç tüm cihazlar için etiketleri gizleyebilirsiniz
:
Örnek
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Önyükleme Yatay Formu
Yatay form, etiketlerin büyük ve orta ekranlarda giriş alanının (yatay) yanında hizalandığı anlamına gelir. Küçük ekranlarda (767 piksel ve altı), dikey bir forma dönüşecektir (etiketler her girişin üstüne yerleştirilir).
Yatay bir form için ek kurallar:
.form-horizontalÖğeye sınıf<form>ekle.control-labelTüm<label>öğelere sınıf ekle
İpucu: Etiketleri ve form kontrol gruplarını yatay bir düzende hizalamak için Bootstrap'in önceden tanımlanmış ızgara sınıflarını kullanın.
Aşağıdaki örnek, iki giriş alanı, bir onay kutusu ve bir gönder düğmesi olan yatay bir form oluşturur.
Örnek
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>