Bootstrap 4 نماذج مخصصة

يأتي Bootstrap 4 مع عناصر نموذج مخصصة تهدف إلى استبدال الإعدادات الافتراضية للمتصفح:

نطاق مخصص:

النطاق الافتراضي:

خانة اختيار مخصصة

لإنشاء مربع اختيار مخصص ، قم بلف عنصر حاوية ، مثل <div> ، بفئة مربعة الاختيار وحولها .custom-control. .custom-checkboxثم أضف .custom-control-inputإلى الإدخال بالنوع = "checkbox".

تلميح: إذا كنت تستخدم تسميات للنص المصاحب ، فأضف .custom-control-labelالفصل الدراسي إليها. لاحظ أن قيمة السمة for يجب أن تتطابق مع معرف مربع الاختيار:

مثال

<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>

تبديل مخصص

لإنشاء "مفتاح تبديل" مخصص ، قم بلف عنصر حاوية ، مثل <div> ، بفئة مربعة اختيار .custom-controlوحولها .custom-switch. ثم أضف .custom-control-inputالفصل إلى مربع الاختيار:

مثال

<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>

أزرار الراديو المخصصة

لإنشاء زر اختيار مخصص ، قم بلف عنصر حاوية ، مثل <div> ، بفئة من زر .custom-controlالاختيار .custom-radioوحوله. ثم أضف .custom-control-inputإلى الإدخال بالنوع = "راديو".

تلميح: إذا كنت تستخدم تسميات للنص المصاحب ، فأضف .custom-control-labelالفصل الدراسي إليها. لاحظ أن قيمة السمة for يجب أن تتطابق مع معرف الراديو:

مثال

<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>

عناصر تحكم النموذج المخصصة المضمنة

إذا كنت تريد وضع عناصر تحكم النموذج المخصصة جنبًا إلى جنب (مضمن) ، فأضف .custom-control-inlineالغلاف / الحاوية:

مثال

<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>

قائمة تحديد مخصصة

لإنشاء قائمة تحديد مخصصة ، أضف .custom-selectالفئة إلى عنصر <select>:

مثال

<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>

حدد حجم القائمة المخصصة

استخدم .custom-select-smالفصل لإنشاء قائمة تحديد صغيرة والفصل .custom-select-lgالدراسي لفئة كبيرة:

مثال

<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>

نطاق مخصص

لإنشاء قائمة نطاق مخصصة ، أضف .custom-rangeالفئة إلى إدخال بالنوع = "<range>":

مثال

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

تحميل ملف مخصص

لإنشاء تحميل ملف مخصص ، قم بلف عنصر حاوية بفئة .custom-fileحول الإدخال بالنوع = "file". ثم أضف .custom-file-inputإليها.

تلميح: إذا كنت تستخدم تسميات للنص المصاحب ، فأضف .custom-file-labelالفصل الدراسي إليها. لاحظ أن قيمة السمة for يجب أن تتطابق مع معرف مربع الاختيار:

لاحظ أنه يجب عليك أيضًا تضمين بعض أكواد jQuery إذا كنت تريد أن يظهر اسم الملف عند تحديد ملف معين:

مثال

<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>

البرنامج التعليمي Bootstrap 4

التمهيد 4 الشبكة

Bootstrap 4 أخرى

التمهيد 4 المرجع

Bootstrap 4 نماذج مخصصة