Bootstrap 4 Özel Formlar

Bootstrap 4, tarayıcı varsayılanlarının yerini alması amaçlanan özelleştirilmiş form öğeleriyle birlikte gelir:

Özel Aralık:

Varsayılan Aralık:

Özel Onay Kutusu

Özel bir onay kutusu oluşturmak için <div> gibi bir kapsayıcı öğesini onay kutusunun bir sınıfıyla .custom-controlve .custom-checkboxçevresine sarın. Ardından .custom-control-inputtype="checkbox" ile girişe ekleyin.

İpucu: Metne eşlik etmek için etiketler kullanıyorsanız, .custom-control-labelsınıfı buna ekleyin. for niteliğinin değerinin, onay kutusunun kimliğiyle eşleşmesi gerektiğini unutmayın:

Örnek

<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
</form>

Özel Anahtar

Özel bir "geçiş anahtarı" oluşturmak için, <div> gibi bir kapsayıcı öğesini bir onay kutusu sınıfıyla .custom-controlve .custom-switchetrafına sarın. Ardından .custom-control-inputsınıfı onay kutusuna ekleyin:

Örnek

<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
</form>

Özel Radyo düğmeleri

Özel bir radyo düğmesi oluşturmak için <div> gibi bir kapsayıcı öğesini radyo düğmesinin sınıfıyla .custom-controlve .custom-radioçevresine sarın. Ardından .custom-control-inputtype="radio" ile girişe ekleyin.

İpucu: Metne eşlik etmek için etiketler kullanıyorsanız, .custom-control-labelsınıfı buna ekleyin. for niteliğinin değerinin radyonun kimliğiyle eşleşmesi gerektiğini unutmayın:

Örnek

<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
<label class="custom-control-label" for="customRadio">Custom radio</label>
</div>
</form>

Satır İçi Özel Form Kontrolleri

Özel form denetimlerinin yan yana (satır içi) oturmasını istiyorsanız, .custom-control-inlinesarmalayıcıya/kapsayıcıya şunu ekleyin:

Örnek

<form>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio 1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
</div>
</form>

Özel Seçim Menüsü

Özel bir seçim menüsü oluşturmak için .custom-selectsınıfı <select> öğesine ekleyin:

Örnek

<form>
<select name="cars" class="custom-select">
    <option selected>Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

Özel Seçim Menüsü Boyutu

.custom-select-smKüçük bir seçim menüsü oluşturmak için .custom-select-lgsınıfı ve büyük bir menü için sınıfı kullanın :

Örnek

<form>

<select name="cars" class="custom-select-sm">
    <option selected>Small Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>


<select name="cars" class="custom-select-lg">
    <option selected>Large Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

Özel Aralık

Özel bir aralık menüsü oluşturmak için .custom-rangesınıfı type="<range>" ile bir girişe ekleyin:

Örnek

<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>

Özel Dosya Yükleme

.custom-fileÖzel bir dosya yüklemesi oluşturmak için , type="file" ile girişin çevresine sınıfı olan bir kapsayıcı öğesini sarın . Daha sonra üzerine ekleyin .custom-file-input.

İpucu: Metne eşlik etmek için etiketler kullanıyorsanız, .custom-file-labelsınıfı buna ekleyin. for niteliğinin değerinin, onay kutusunun kimliğiyle eşleşmesi gerektiğini unutmayın:

Belirli bir dosyayı seçtiğinizde dosyanın adının görünmesini istiyorsanız, bazı jQuery kodlarını da eklemeniz gerektiğini unutmayın:

Örnek

<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

Önyükleme 4 Eğitimi

Önyükleme 4 Izgarası

Önyükleme 4 Diğer

Önyükleme 4 Referansı

Bootstrap 4 Özel Formlar