چگونه فرم‌های دلخواه خود را جایگزین فرم‌های پیش فرض مرورگر کنیم؟ در این قسمت از آموزش‌های بوت استرپ به‌صورت کامل به این نکته خواهیم پرداخت.
پیشنهاد میشود قبل از ورود به این قسمت سایر قسمت‌های دوره‌ی بوت استرپ 4 را مطالعه فرمایید.
نحوه‌ی ساخت چک باکس دلخواه
برای ساخت یک چک باکس دلخواه کافی است تگ div ایجاد کنیم و از کلاس .custom-control و.custom-checkbox، دقت داشته باشید که المان‌های چک باکس باید دخل این تگ قرار گیرند، سپس کلاس.custom-control-input را به تگ input اضافه می‌کنیم. (تگ input باید شامل ویژگی type=”checkbox” باشد.)
برای درک بهتر این موضوع قطعه کد زیر را اجرا کنید :
|
1 2 3 4 5 6 |
<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> |
ایجاد سویچ دلخواه
برای ایجاد کردن یک دکمه‌ی سویچ دلخواه کافی است همانند مرحله‌ی قبل کلاس .custom-control و.custom-switch را به تگ div خود اضافه کنیم. سپس کلاس .custom-control-input را به چک باکس خود اضافه کنیم.
برای درک بهتر این موضوع قطعه کد زیر را اجرا کنید :
|
1 2 3 4 5 6 |
<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 استفاده شود. دقت کنید که از صفت type=”radio” و کلاس .custom-control-input به شکل زیر در تگ button استفاده کنید.
نکته: اگر از برچسب ها برای متن همراه استفاده می کنید ، کلاس .custom-control-label-label را به آن اضافه کنید. توجه داشته باشید که مقدار ویژگی باید با شناسه رادیو مطابقت داشته باشد:
|
1 2 3 4 5 6 |
<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 را به تگ div خود اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 |
<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 اضافه کنید :
|
1 2 3 4 5 6 7 8 |
<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 .custom-select-sm و برای ساخت منو با ابعاد بزرگ از کلاس .custom-select-lg باید استفاده کرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form> <!-- Small --> <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> <!-- Large --> <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 را به input اضافه کنید ، دقت کنید که input شما باید دارای ویژگی type=”range” باشد.
|
1 2 3 4 |
<form> <label for="customRange">Custom range</label> <input type="range" class="custom-range" id="customRange" name="points1"> </form> |
فایل آپلود دلخواه
برای ساخت فایل آپلود دلخواه کافی است یک تگ div با کلاس .custom-file و یک input با ویژگی type=”file” و کلاس .custom-file-input اضافه کنید.
نکته: اگر از برچسب هایی برای متن همراه استفاده می کنید ، کلاس .custom-file-label را به آن اضافه کنید. توجه داشته باشید که مقدار ویژگی باید با شناسه کادر انتخاب مطابقت داشته باشد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه کنید .
با مراجعه به دوره رایگان بوت استرپ 4 میتوانید به صورت رایگان از سایر قسمت های دوره هم استفاده کنید.
موفق باشید.
