قسمت بیست و یکم bootstrap : نحوه ی ساخت فرم در بوت استرپ ۴

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

نویسنده:

مرتضی افضلی

Statistics-rafiki

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

111

Calendar-amico (2)

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

23 , فروردین , 1399

Work time-rafiki

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

5 دقیقه

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

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

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

تنظیمات پیش فرض فرم ها

کنترل های فرم به طور خودکار برخی از ظاهر طراحی شده جهانی را با Bootstrap دریافت می کنند:همه عناصر متنی <input> ، <textarea> و <select> با کلاس .form-control دارای ۱۰۰٪ عرض هستند.

لایه های فرم ها

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

  • فرم های تمام عرض
  • فرم های درون خطی

راه اندازی فرم در بوت استرپ ۴

فرم زیر تشکیل شده از دوکادر ، یک چک باکس و دکمه ی ارسال است.

برای اطمینان از حاشیه های مناسب ، یک عنصر بسته بندی را با کلاس .form-group ، در اطراف هر کنترل اشکال اضافه کنید:

فرم درون خطی

در یک فرم درون خطی ، همه عناصر بصورت درون خطی و چپ تر هستند.

به یاد داشته باشید که این فقط در مورد فرم های داخل نمایشی که حداقل ۵۷۶ پیکسل عرض دارند ، صدق می کند. در صفحه نمایش های کوچکتر از ۵۷۶px ، به صورت افقی پشته خواهد شد.

قانون اضافی برای فرم درون خطی:

  • اضافه کردن کلاس .form-inline در استفاده از تگ <form>

مثال زیر یک فرم درون خطی با دو قسمت ورودی ، یک چک باکس و یک دکمه ارسال است:

فرم درون خطی با برنامه های کاربردی

فرم درون خطی فوق احساس “فشرده سازی” می کند ، و با خدمات فاصله بین بوت استرپ بسیار بهتر به نظر می رسد. مثال زیر یک حاشیه درست (.mr-sm-2) به هر ورودی در همه دستگاه ها (کوچک و بالاتر) اضافه می کند. و یک کلاس پایین حاشیه (.mb-2) برای سبک کردن قسمت ورودی هنگام شکستن (از حالت افقی به عمودی به دلیل عدم وجود فضای کافی / عرض) استفاده می شود:

ردیف یا شبکه فرم

همچنین می توانید از ستون ها (.col) برای کنترل عرض و تراز کردن ورودی های فرم بدون استفاده از ابزارهای فاصله استفاده کنید. فقط به یاد داشته باشید که آنها را درون یک ظرف .row قرار دهید.

اگر حاشیه های شبکه ای کمتری می خواهید (نادیده گرفتن ناودان ستون پیش فرض) ، از .from-row به جای .row استفاده کنید:

اعتبار سنجی فرم ها

برای ارائه بازخورد ارزشمند برای کاربران می توانید از کلاسهای مختلف اعتبار سنجی استفاده کنید. بسته به اینکه آیا شما می خواهید بازخورد اعتبارسنجی را قبل یا بعد از ارسال فرم ارائه دهید ، به اعتبار <اعتبارسنجی] یا اعتبارسنجی لازم اضافه کنید. قسمتهای ورودی دارای حاشیه سبز (معتبر) یا قرمز (نامعتبر) هستند تا آنچه در فرم وجود دارد را نشان دهند. همچنین می توانید یک پیام بازخورد معتبر یا .invalid-feedback را اضافه کنید تا صریحاً به کاربر بگویید که چه چیزی از دست رفته است ، یا قبل از ارسال فرم باید انجام شود.

در این مثال ، ما از کلاس .was-validated استفاده می کنیم تا قبل از ارسال فرم آنچه را ناقص است را نشان دهیم:

در این مثال ، ما از اعتبارسنجی .needs-validation استفاده می کنیم ، که اثر اعتبارسنجی را بعد از ارسال فرم دریافت می کند (اگر چیزی وجود ندارد). توجه داشته باشید که برای این کار نیز باید تعدادی کد جی کوئری برای این مثال اضافه کنید:

ویدیوی قسمت بیست و یکم

امیدوارم این اموزش براتون مفید و کاربردی واقع شده باشه.

در صورت نیاز برای مطالعه موراد بیشتر میتوانید به سایت getbootstrap مراجعه فرمایید.

پایدار باشید.

مرتضی افضلی

مرتضی افضلی

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

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

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

  1. لطفا اموزش ها رو به صورت ویدئویی قرار بدید. ممنون

    • باعرض سلام ، متاسفانه برای ویدیوها مسئله ای به وجود و اومد و فایل صوت ویدیوها از بین رفتن مجدد باید ریکورد بشن و هرچه سریعتر اینکار رو انجام میدیم.

ارسال یک پیام

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

X