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

خانه » مقالات اموزشی » css » بوت استرپ » قسمت بیست و یکم bootstrap : نحوه ی ساخت فرم در بوت استرپ ۴
قسمت بیست و یکم اموزش بوت استرپ 4

نویسنده:

مرتضی افضلی

Statistics-rafiki

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

111

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۹-۰۳-۱۲

Work time-rafiki

زمان مطالعه:

5 دقیقه

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

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

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

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

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

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

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

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

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

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

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

فرم درون خطی

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مرتضی افضلی

مرتضی افضلی

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

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

4 Comments

Join the discussion and tell us your opinion.

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

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

    • سپاس از اینکه اینقدر صریح مطرح کردید ، مجموعه آموزش های PHP با مجموعه آموزش های بوت استرپ از هم متفاوت عمل می کنند ، اعتبار سنجی یا validation که در بوت استرپ به واسطه جاوا اسکریپت مطرح شد به دلیل تغییر رنگ هاست و فرم ها در سطح کلی به PHP نیاز دارند .
      در این دوره صرفا بدون هیچ عقبه ای ، آموزش های بوت استرپ رو قرار دنبال کنیم ، آموزش های PHP می توانند نقش مکمل داشته باشند اما باید سطح کلی افراد در نظر گرفته شود.

دیدگاهتان را بنویسید