نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه بیست و سوم (Custom Forms)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه بیست و سوم (Custom Forms)

آموزش Bootstrap 4 جلسه بیست و سوم (Custom Forms) از سری آموزش های تک قسمتی است.

 

فرم های سفارشی 

در آموزش های قبلی درباره ساخت فرم ها صحبت کردیم در این جلسه قصد داریم سفارشی سازی آنها و بهتر کردن ظاهر آنها را خدمتتان توضیح دهیم . مواردی که این جلسه قصد داریم به آن بپردازیم را برای شما لیست میکنیم و در ادامه ی آمورزش هر کدام را توضیح میدهیم:

  • Custom Checkbox
  • Custom Switch
  • Custom Radio buttons
  • Inline Custom Form Controls
  • Custom Select Menu
  • Custom Select Menu Size
  • Custom Range
  • Custom File Upload

 

ساخت چک باکس سفارشی

در حالت عادی برای ساخت چک باکس کافی بود input با type از نوع checkbox بسازید اما برای سفارشی کردن آن باید از کلاس ثابت custom-control در یک div استفاده کنیم و input و label را داخل آن قرار دهیم . همچنین در کنار کلاس قبلی برای ساخت چک باکس باید کلاس custom-checkbox را قرار دهیم و در نهایت باید کلاس custom-control-input را به input اختصاص دهیم برای واضح شدن موضوع میتوانید از کد زیر استفاده کنید:

 

ساخت سوئیچ سفارشی

از سوئیچ ها در موارد زیادی استفاده میشود حتی به این سوئیچ ها کلید دو حالته نیز گفته میشود که میتوانید برای ۲ شرط مختلف یا ۲ حالت مختلف از آن استفاده کنید برای ساخت این سوئیچ کافیست مجددا div با کلاس ثابت custom-control بسازید و input و label را داخل آن قرار دهید سپس در کنار همین کلاس custom-switch را اضافه کنید و کلاس custom-control-input را به input خود بدهید و در نهایت کلاس custom-control-label را به label خود بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت رادیو سفارشی

قبلا درباره ساخت و نحوه ساخت radio صحبت کردیم حال میخواهیم درباره سفارشی کردن آن صحبت کنیم. برای ساخت رادیو سفارشی باید در کنار کلاس ثابت custom-control که در موارد قبل هم از آن یاد کردیم کلاس custom-radio را قرار دهید و سپس کلاس custom-control-input را به input و کلاس custom-control-label را به label بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت فرم سفارشی خطی

برای ساخت فرم های خطی سفارشی کافیست در کنار کلاس custom-control کلاس custom-control-inline را قرار دهید به همین راحتی میتوانید هر چند المانی که میخواهید در کنار هم قرار دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت منو های انتخابی سفارشی

قبلا درباره ساخت حالت ساده این منو ها صحبت کردیم حال به شما آموزش میدهیم که چطور آنها را سفارشی کنید کافیست برای این کار کلاس custom-select را به div اختصاص دهید و باقی موارد مانند ساخت حالت ساده است برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

تنظیم سایز منو های انتخابی سفارشی

ما برای المان های خود طبق معمول ۳ سایز داریم یکی کوچک یکی حالت پیشفرض و یکی حالت بزرگ برای ساخت حالت پیشفرض نیاز به انجام کاری نیست و حالت عادی است برای سایز کوچک کافیست کلاس custom-select-sm را به select خود اضافه کنید و اگر سایز بزرگ را میخواهید کلاس custom-select-lg را قرار دهید برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

ساخت range سفارشی

برای ساخت رنج سفارشی کافیست کلاس custom-range را به input خود که type از نوع range دارد بدهید و به همین راحتی آن را به صورت سفارشی در بیاورید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت باکس آپلود فایل سفارشی

برای ساخت باکس آپلود شما نیاز به input با type از نوع file دارید حال برای سفارشی کردن آن باید input و label خود را در داخل div با کلاس custom-file قرار دهید و کلاس custom-file-input را به input خود بدهید و در نهایت کلاس custom-file-label را به label خود بدهید برای اجرای این مورد نیاز به قطعه کد جیکوئری نیز هست که در کد برای شما قرار میدهیم:

 

برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)

آموزش Bootstrap 4 جلسه بیست و چهارم (Carousel)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (1 رای, میانگین: 5٫00 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه بیست و سوم (Custom Forms): نوع فایل:mp4 حجم فایل:33.16 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

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

*

code

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