Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
آموزش بوت استرپ 4 ، قسمت 24

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

Calendar-amico (2)

تاریخ انتشار:

27 , مرداد , 1399

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

چگونه فرم‌های دلخواه خود را جایگزین فرم‌های پیش فرض مرورگر کنیم؟ در این قسمت از آموزش‌های بوت استرپ به‌صورت کامل به این نکته خواهیم پرداخت.

پیشنهاد می‌شود قبل از ورود به این قسمت سایر قسمت‌های دوره‌ی بوت استرپ ۴ را مطالعه فرمایید.

نحوه‌ی ساخت چک باکس دلخواه

برای ساخت یک چک باکس دلخواه کافی است تگ div ایجاد کنیم و از کلاس .custom-control و.custom-checkbox، دقت داشته باشید که المان‌های چک باکس باید دخل این تگ قرار گیرند، سپس کلاس.custom-control-input را به تگ input اضافه می‌کنیم. (تگ input باید شامل ویژگی type=”checkbox” باشد.)

برای درک بهتر این موضوع قطعه کد زیر را اجرا کنید :

ایجاد سویچ دلخواه

برای ایجاد کردن یک دکمه‌ی سویچ دلخواه کافی است همانند مرحله‌ی قبل کلاس .custom-control و.custom-switch را به تگ div خود اضافه کنیم. سپس کلاس .custom-control-input را به چک باکس خود اضافه کنیم.

برای درک بهتر این موضوع قطعه کد زیر را اجرا کنید :

ایجاد دکمه رادیویی دلخواه

برای ایجاد کردن یک دکمه ی رادیویی دلخواه کافی است ، از تگ div و کلاس های .custom-control و .custom-radio استفاده شود. دقت کنید که از صفت type=”radio” و کلاس .custom-control-input به شکل زیر در تگ button استفاده کنید.

نکته: اگر از برچسب ها برای متن همراه استفاده می کنید ، کلاس .custom-control-label-label را به آن اضافه کنید. توجه داشته باشید که مقدار ویژگی باید با شناسه رادیو مطابقت داشته باشد:

فرم درون خطی دلخواه

اگر می خواهید از فرم درون خطی استفاده کنید کافی است که کلاس .custom-control-inline را به تگ div خود اضافه کنید.

منوی دلخواه

برای ایجاد منوی دلخواه کافی است تا کلاس .custom-select را به تگ select اضافه کنید :

سایز دلخواه برای منو

برای ساخت منو با ابعاد کوچک از کلاس .custom-select .custom-select-sm و برای ساخت منو با ابعاد بزرگ از کلاس .custom-select-lg باید استفاده کرد.

ایجاد محدوده سفارشی

برای ایجاد محدوده سفارشی کافی است تا کلاس .custom-range را به input اضافه کنید ، دقت کنید که input شما باید دارای ویژگی type=”range” باشد.

فایل آپلود دلخواه

برای ساخت فایل آپلود دلخواه کافی است یک تگ div با کلاس .custom-file و یک input با ویژگی type=”file” و کلاس .custom-file-input اضافه کنید.

نکته: اگر از برچسب هایی برای متن همراه استفاده می کنید ، کلاس .custom-file-label را به آن اضافه کنید. توجه داشته باشید که مقدار ویژگی باید با شناسه کادر انتخاب مطابقت داشته باشد:

پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه کنید .

با مراجعه به دوره رایگان بوت استرپ ۴ میتوانید به صورت رایگان از سایر قسمت های دوره هم استفاده کنید.

موفق باشید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

0 پاسخ به "قسمت بیست و چهارم bootstrap : نحوه ی ساخت فرم دلخواه در بوت استرپ ۴"

ارسال یک پیام

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *