Bootstrap's Varsayılan Ayarları
Form denetimleri otomatik ile bazı küresel stil almak Bootstrap :
Tüm metinsel <input> , <textarea> ve <select> sınıfı olan elemanlar .form-control ,% 100 arasında bir genişliğe sahiptir.
Bootstrap Formu Düzenleri
Bootstrap formu düzenleri üç tip sağlar:
- Dikey formu (this is default)
- Yatay formu
- Satır içi formu
Her üç formu düzenleri için Standart kurallar:
- Daima kullanmak
<form role="form">(helps improve accessibility for people using screen readers) - Etiketleri ve form kontrolleri sarın
<div class="form-group">(needed for optimum spacing) - Sınıf ekleyin
.form-controltüm metinsel olana<input>,<textarea>ve<select>elemanları
Bootstrap Dikey Formu (default)
Aşağıdaki örnek, iki giriş alanları, tek onay kutusu dikey formu oluşturur ve Gönder düğmesi:
Örnek
<form role="form">
<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> Kendin dene " Bootstrap Inline Formu
bir satır içi biçimde, tüm öğeleri, satır içi sola dayalı, ve etiketler ile birlikte bulunmaktadır.
Not: Bu yalnızca içinde formlar için geçerlidir viewports en az 768px genişliğinde!
bir satır içi form için ek kural:
- Sınıf ekleyin
.form-inlineiçin<form>elemanı
Aşağıdaki örnek, iki giriş alanları, tek onay kutusu bir satır içi formunu oluşturur ve bir düğme gönderin:
Örnek
<form class="form-inline" role="form">
<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> Kendin dene " İpucu: her giriş için bir etiket dahil etmezseniz, ekran okuyucuların formları ile sorun olacaktır. Sen ekran okuyucular dışında kullanarak, tüm cihazlar için etiketleri gizleyebilirsiniz .sr-only sınıf:
Örnek
<form class="form-inline" role="form">
<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> Kendin dene " Bootstrap Yatay Formunun
Yatay bir şekilde diğer formlardan her iki işaretleme miktarında ve formun sunumu ayrı durur.
Yatay form için ek kurallar:
- Ders ekle
.form-horizontaliçin<form>elemanı - Sınıf ekleyin
.control-labelherkese<label>unsurları
İpucu: Belirli Bootstrap's ön tanımlı ızgara sınıfları yatay düzende etiketleri ve form denetimleri gruplarını hizalamak.
Aşağıdaki örnek, iki giriş alanları, tek onay kutusu yatay formu oluşturur ve bir düğme gönderin:
Örnek
<form class="form-horizontal" role="form">
<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> Kendin dene "