Bootstrap Formlar

Hazırlayan : Yusuf Gürkan

Bootstrap Formlar

Bootstrap'in Varsayılan Ayarları

Form denetimleri, Bootstrap ile otomatik olarak bazı genel stiller alır:

Tüm textual <input>, <textarea>, ve <select> class öğelerinin .form-control genişliği %100'dür.

Bootstrap Form Yerleşimleri

Önyükleme üç tür form düzeni sağlar:

Dikey biçim (bu varsayılandır)
yatay biçim
Satır içi form

Her üç form düzeni için standart kurallar:

Etiketleri ve form kontrollerini sarın <div class="form-group"> (optimum boşluk için gereklidir)
.form-control Tüm metinsel <input>, <textarea> ve <select> öğelere sınıf ekleyin

Aşağıdaki örnek, iki giriş alanı, bir onay kutusu ve bir gönder düğmesi olan dikey bir form oluşturur:

ÖRNEK:

<label for="email">Email address:</label>

</div>

<label for="pwd">Password:</label>

</div>

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

Satır içi formda, 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 pencerelerindeki 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:

<label for="email">Email address:</label>

</div>

<label for="pwd">Password:</label>

</div>

<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 sorun yaşar. Sınıfı kullanarak, ekran okuyucular hariç tüm aygıtların etiketlerini gizleyebilirsiniz .sr-only:

ÖRNEK:

<label class="sr-only" for="email">Email address:</label>

</div>

<label class="sr-only" for="pwd">Password:</label>

</div>

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

Yatay form, etiketlerin büyük ve orta boy ekranlarda giriş alanının (yatay) yanında hizalandığı anlamına gelir. Küçük ekranlarda (767 piksel ve altı), dikey bir forma dönüşür (her girişin üstüne etiketler yerleştirilir).

Yatay form için ek kurallar:

.form-horizontal Öğeye sınıf <form> ekle
.control-label Tüm <label> öğelere sınıf ekle

İpucu: Form denetimlerinin etiketlerini ve 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:

<label class="control-label col-sm-2" for="email">Email:</label>

</div>

<label class="control-label col-sm-2" for="pwd">Password:</label>

</div>

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</div>

</form>

Page updated

Report abuse