Bootstrap 4 Form Girişleri
Desteklenen Form Kontrolleri
Bootstrap aşağıdaki form denetimlerini destekler:
- giriş
- metin alanı
- onay kutusu
- radyo
- Seçme
Önyükleme Girişi
Bootstrap, tüm HTML5 giriş türlerini destekler: metin, parola, tarih saat, yerel tarih, tarih, ay, saat, hafta, sayı, e-posta, url, arama, tel ve renk.
Not: Türleri doğru bir şekilde bildirilmezse, girişler tam olarak stillendirilmeyecektir!
Aşağıdaki örnek iki girdi öğesi içerir; biri type="text"ve biri
type="password". Formlar bölümünde bahsettiğimiz gibi, .form-controlgirdileri tam genişlikte ve uygun dolgu ile biçimlendirmek için sınıfı kullanıyoruz, vb:
Örnek
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Önyükleme Metin Alanı
Aşağıdaki örnek bir textarea içerir:
Örnek
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Önyükleme Onay Kutuları
Kullanıcının önceden ayarlanmış seçenekler listesinden herhangi bir sayıda seçeneği seçmesini istiyorsanız onay kutuları kullanılır.
Aşağıdaki örnek, üç onay kutusu içerir. Son seçenek devre dışı bırakıldı:
Örnek
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Örnek açıklama
class="form-check"Etiketler ve onay kutuları için uygun kenar boşluklarını sağlamak için ile bir sarmalayıcı öğe kullanın .
.form-check-labelÖğeleri etiketlemek ve kap .form-check-inputiçindeki onay kutularını uygun şekilde biçimlendirmek için sınıfı ekleyin .form-check.
Satır İçi Onay Kutuları
.form-check-inlineOnay kutularının aynı satırda görünmesini istiyorsanız sınıfı kullanın :
Örnek
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Önyükleme Radyo Düğmeleri
Kullanıcıyı önceden ayarlanmış seçenekler listesinden yalnızca bir seçimle sınırlamak istiyorsanız radyo düğmeleri kullanılır.
Aşağıdaki örnek, üç radyo düğmesi içerir. Son seçenek devre dışı bırakıldı:
Örnek
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Onay kutularında olduğu gibi .form-check-inline, radyo düğmelerinin aynı satırda görünmesini istiyorsanız sınıfı kullanın:
Örnek
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Önyükleme Seçim Listesi
Kullanıcının birden fazla seçenek arasından seçim yapmasına izin vermek istiyorsanız seçim listeleri kullanılır.
Aşağıdaki örnek bir açılır liste içerir (liste seçin):
Örnek
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Form Kontrolü Boyutlandırma
Form denetiminin boyutunu .form-control-smveya ile değiştirin .form-control-lg:
Örnek
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Düz Metin ile Form Kontrolü
.form-control-plaintextGiriş alanını düz metin olarak biçimlendirmek istiyorsanız şunu kullanın :
Örnek
<input type="text" class="form-control-plaintext">
Form Kontrol Dosyası ve Aralığı
Bir aralık denetimine veya tam genişlikte bir dosya alanına stil vermek için .form-control-rangesınıfı ekleyin :input type"range".form-control-fileinput type"file"
Örnek
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">