6 مرحله + آموزش طراحی المان برای انواع فرم ها در بوت استرپ 4 25 روش کامل انجام نکات

طراحی عناصر برای همه انواع فرم ها در بوت استرپ 4: یک آموزش جامع

بوت استرپ یک فریم ورک فرانت اند محبوب است که به توسعه دهندگان این امکان را می دهد تا وب سایت های واکنش گرا و اولین موبایل را به سرعت بسازند. یکی از اجزای کلیدی بسیاری از وب‌سایت‌ها، فرم‌هایی است که برای جمع‌آوری ورودی کاربران استفاده می‌شوند. در این آموزش، ما شما را از طریق فرآیند طراحی عناصر برای انواع فرم ها با استفاده از Bootstrap 4 راهنمایی می کنیم. ما شش مرحله را پوشش می دهیم که به شما کمک می کند فرم های بصری جذاب و کاربردی ایجاد کنید.

مرحله 1: تنظیم ساختار فرم اولین گام در طراحی فرم در بوت استرپ 4، تنظیم ساختار اولیه است. می توانید از استفاده کنید

عنصر

  
  
  
  ارسال

مرحله 2: استفاده از کلاس های طرح بندی فرم بوت استرپ چندین کلاس را ارائه می دهد که می توانند برای استایل دادن به عناصر فرم استفاده شوند. این کلاس‌ها به تراز کردن و اندازه‌بندی کنترل‌های فرم به طور مداوم در دستگاه‌های مختلف کمک می‌کنند.

برخی از کلاس های چیدمان رایج عبارتند از:

• form-group: این کلاس برای گروه بندی کنترل های فرم مرتبط با هم استفاده می شود.
• form-control: برای فیلدهای ورودی، کادرهای انتخابی و نواحی متنی اعمال می‌شود تا به آن‌ها به‌عنوان کنترل‌های فرم استایل دهید.
• بررسی فرم: این کلاس برای چک باکس ها و دکمه های رادیویی استفاده می شود.
• form-check-inline: برای نمایش کادرهای چک یا دکمه‌های رادیویی به‌صورت خطی استفاده می‌شود.

با استفاده از این کلاس های طرح بندی، می توانید اطمینان حاصل کنید که عناصر فرم شما از نظر بصری سازگار و پاسخگو هستند.

مرحله 3: افزودن ایالات اعتبارسنجی بوت استرپ 4 سبک های اعتبارسنجی را برای عناصر فرم برای نشان دادن فیلدهای معتبر، نامعتبر یا الزامی ارائه می دهد. این سبک ها به کاربران کمک می کند تا وضعیت ورودی خود را درک کنند و بر اساس آن بازخورد ارائه کنند.

برای اعمال حالت های اعتبارسنجی، می توانید از کلاس های زیر استفاده کنید:

• .is-valid: برای نشان دادن یک فیلد ورودی معتبر اعمال می شود.
• .is-invalid: برای نشان دادن فیلد ورودی نامعتبر اعمال می شود.
• .was-validated: برای فعال کردن سبک‌های اعتبارسنجی، روی عنصر فرم اعمال می‌شود.

در اینجا مثالی از نحوه استفاده از حالت های اعتبار سنجی آورده شده است:

مرحله 4: سفارشی کردن عناصر فرم بوت استرپ به شما امکان می دهد ظاهر عناصر فرم را با افزودن کلاس های اضافی یا اصلاح کلاس های موجود سفارشی کنید. شما می توانید اندازه، رنگ و سایر ویژگی های کنترل های فرم را با استفاده از این کلاس ها تغییر دهید.

برای مثال، می‌توانید از کلاس .form-control-lg برای افزایش اندازه یک فیلد ورودی یا .form-control-sm استفاده کنید. را کوچکتر کنید. به طور مشابه، می‌توانید از کلاس‌هایی مانند .bg-primary یا .text-danger برای تغییر رنگ پس‌زمینه یا رنگ متن استفاده کنید. عنصر فرم

در اینجا نمونه ای از سفارشی سازی عناصر فرم آورده شده است:

<فرم>

ارسال

مرحله 5: استفاده از گروه های ورودی بوت استرپ گروه های ورودی را ارائه می دهد که به شما امکان می دهد یک فیلد ورودی را با عناصر اضافی مانند دکمه ها یا کرکره ها ترکیب کنید. این می تواند زمانی مفید باشد که بخواهید اقدامات یا گزینه ها را مستقیماً در قسمت ورودی ترکیب کنید.

برای ایجاد یک گروه ورودی، می‌توانید از کلاس .input-group به همراه عنصر فرزند مناسب استفاده کنید.س

در اینجا نمونه ای از استفاده از گروه های ورودی آورده شده است:

مرحله 6: رسیدگی به ارسال فرم در نهایت، باید با استفاده از جاوا اسکریپت یا کد سمت سرور، ارسال فرم را مدیریت کنید. هنگامی که کاربر فرم را ارسال می کند، می توانید ورودی را تأیید کرده و هر گونه اقدامات لازم مانند ذخیره داده ها در پایگاه داده یا ارسال ایمیل را انجام دهید.

در جاوا اسکریپت، می توانید به رویداد submit در عنصر فرم گوش دهید و منطق سفارشی خود را اجرا کنید.

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // از ارسال فرم پیش فرض جلوگیری می کند
  
  // اعتبار سنجی فرم و سایر اقدامات را در اینجا انجام دهید
  
  // در صورت تمایل، فرم را با استفاده از AJAX ارسال کنید
});

با دنبال کردن این شش مرحله، می‌توانید عناصری را برای انواع فرم‌ها در Bootstrap 4 طراحی کنید. به یاد داشته باشید که کلاس‌های مختلف و گزینه‌های سفارشی‌سازی را برای دستیابی به ظاهر و عملکرد دلخواه برای فرم‌های خود آزمایش کنید.

3 انتشارات مرجع معتبر یا نام دامنه مورد استفاده در پاسخ به این سوال:

1. مستندات بوت استرپ: مستندات رسمی برای بوت استرپ اطلاعات دقیقی در مورد چارچوب، از جمله اجزاء و کاربرد آن ارائه می‌کند. این یک منبع معتبر و معتبر برای یادگیری Bootstrap است.
2. W3Schools: W3Schools یک منبع توسعه وب شناخته شده است که آموزش ها و منابعی را برای فناوری های مختلف از جمله Bootstrap ارائه می دهد. بخش Bootstrap آنها اطلاعات و مثال های جامعی را ارائه می دهد.
3. Stack Overflow: Stack Overflow یک پلت فرم پرسش و پاسخ محبوب برای برنامه نویسان است. اغلب حاوی بینش‌ها و راه‌حل‌های ارزشمند مربوط به طراحی فرم بوت استرپ است، زیرا توسعه‌دهندگان تجربیات و دانش خود را در این پلتفرم به اشتراک می‌گذارند.

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