Bootstrap 4:فرم ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو

{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|clear=right|limit=2}}

<span class="error">Expansion depth limit exceeded کنترل‌های فرم بطور خودکار یکسری استایل‌های سراسری را بوسیله بوت استرپ دریافت می‌کنند:Expansion depth limit exceeded

همهٔ عناصر متنی {{Expansion depth limit exceeded|code=<input>|lang=css|class=|id=|style=color: #FF9933;}} ,{{Expansion depth limit exceeded|code=<textarea>|lang=css|class=|id=|style=color: #FF9933;}} و{{Expansion depth limit exceeded|code=<select>|lang=css|class=|id=|style=color: #FF9933;}} با کلاس {{Expansion depth limit exceeded|code=.form-control|lang=css|class=|id=|style=color: #FF9933;}} عرض ۱۰۰٪ دارند.

<span class="error">Expansion depth limit exceeded بوت استرپ دو نوع چیدمان فرم را ایجاد کرده‌است:

  • فرم پشته ای {{Expansion depth limit exceeded|Stacked}} (با عرض کامل)
  • فرم درون خطی {{Expansion depth limit exceeded|Inline}}

<span class="error">Expansion depth limit exceeded مثال زیر یک فرم پشته ای با دو فیلد ورودی، یک چک باکس و یک کلید ارسال تولید می‌کند:

برای تضمین حاشیه‌ها {{Expansion depth limit exceeded|Margins}} مناسب هر کنترل فرم را داخل یک عنصر {{Expansion depth limit exceeded|code=.form-group|lang=css|class=|id=|style=color: #FF9933;}} قرار دهید: <span class="error">Expansion depth limit exceeded Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=trybs_form_basic|dars=bootstrap4}}

<span class="error">Expansion depth limit exceeded در یک فرم درون خطی، همهٔ عنصرها درون خطی و چپ-چین هستند و برچسب‌ها در کنار آنها هستند.

{{Expansion depth limit exceeded|توجه: این تنظیمات فقط برروی فرم‌های درون صفحه نمایش‌هایی با پهنای حداقل ۵۷۶ پیکسل اعمال می‌شود! در صفحه نمایش‌های کوچکتر فرم‌ها بطور افقی بالای یکدیگر قرار می‌گیرند {{Expansion depth limit exceeded|Stacked Horizontal}}.}}

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

  • کلاس {{Expansion depth limit exceeded|code=.form-inline|lang=css|class=|id=|style=color: #FF9933;}} به عنصر {{Expansion depth limit exceeded|code=<form>|lang=css|class=|id=|style=color: #FF9933;}} اضافه شود

مثال زیر فرم درون خطی با دو فیلد ورودی، یک چک باکس و یک کلید ارسال را تولید می‌کند: <span class="error">Expansion depth limit exceeded Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=trybs_form_inline|dars=bootstrap4}}

<span class="error">Expansion depth limit exceeded فرم درون خطی ذکر شده «فشرده» به نظر می‌رسد و با امکانات فاصله گذاری بوت استرپ خیلی بهتر بنظر می‌رسد. مثال زیر برای هر ورودی یک حاشیه راست ({{Expansion depth limit exceeded|code=.mr-sm-2|lang=css|class=|id=|style=color: #FF9933;}}) را در همهٔ دستگاه‌ها (کوچک تا بزرگ) اضافه می‌کند؛ و یک کلاس حاشیه پایین ({{Expansion depth limit exceeded|code=.mb-2|lang=css|class=|id=|style=color: #FF9933;}}) برای استایل دهی به فیلد ورودی در هنگامی که شکسته شود استفاده می‌شود(یعنی به دلیل نبود فضا/عرض کافی، از حالت افقی به حالت عمودی تبدیل شود): <span class="error">Expansion depth limit exceeded Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=trybs_form_inline2|dars=bootstrap4}}

{{Expansion depth limit exceeded|در مورد فاصله گذاری و سایر کلاس‌های “helper” در بخش امکانات بوت استرپ ۴ بیشتر خواهید آموخت.|reminder}}

<span class="error">Expansion depth limit exceeded می‌توان از ستون ها({{Expansion depth limit exceeded|code=.col|lang=css|class=|id=|style=color: #FF9933;}}) برای کنترل عرض و alignment ورودی‌های فرم بدون امکانات فاصله گذاری استفاده کرد. تنها به یاد داشته باشید آنها را در یک container {{Expansion depth limit exceeded|ظرف}} {{Expansion depth limit exceeded|code=.row|lang=css|class=|id=|style=color: #FF9933;}} قرار دهید.

در مثال زیر، از دو ستون که در کنار هم ظاهر می‌شوند استفاده می‌کنیم.

{{Expansion depth limit exceeded| در مورد ردیف‌ها و ستون‌ها در بخش شبکه بندی بوت استرپ بیشتر خواهید آموخت. |reminder}}

<span class="error">Expansion depth limit exceeded Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=trybs_form_grid|dars=bootstrap4}}

اگر حاشیه شبکه بندی کمتری نیاز دارد (gutter پیش فرض ستون‌ها را تغییر دهید) از {{Expansion depth limit exceeded|code=.form-row|lang=css|class=|id=|style=color: #FF9933;}} بجای {{Expansion depth limit exceeded|code=.row|lang=css|class=|id=|style=color: #FF9933;}} استفاده کنید: <span class="error">Expansion depth limit exceeded

Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=trybs_form_grid2|dars=bootstrap4}}

<span class="error">Expansion depth limit exceeded می‌توانید کلاس‌های اعتبارسنجی {{Expansion depth limit exceeded|Validation}} مختلفی را برای ارائه بازخورد به کاربر استفاده کنید. براساس اینکه می‌خواهید بازخورد اعتبارسنجی را قبل یا بعد از ثبت فرم ارائه دهید، از یکی از {{Expansion depth limit exceeded|code=.was-validated|lang=css|class=|id=|style=color: #FF9933;}} یا {{Expansion depth limit exceeded|code=.needs-validation|lang=css|class=|id=|style=color: #FF9933;}} برای عنصر {{Expansion depth limit exceeded|code=<form>|lang=css|class=|id=|style=color: #FF9933;}} استفاده کنید. برای نشان دادن اینکه چه چیزی در فرم کم است، فیلدهای ورودی کادرهای سبز (معتبر) یا قرمز (نامعتبر) می‌گیرند.

همچنین می‌توانید برای اعلام واضح به کاربر که چه چیزی کم است یا چه اقداماتی قبل از ثبت فرم نیاز است، از پیام {{Expansion depth limit exceeded|code=.valid-feedback|lang=css|class=|id=|style=color: #FF9933;}} یا {{Expansion depth limit exceeded|code=.invalid-feedback|lang=css|class=|id=|style=color: #FF9933;}} استفاده کنید. <span class="error">Expansion depth limit exceeded در این مثال، برای نشان دادن اینکه قبل از ثبت فرم چه چیزی کم است از {{Expansion depth limit exceeded|code=.was-validated|lang=css|class=|id=|style=color: #FF9933;}} استفاده کنید:

Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=trybs_form_validation_was|dars=bootstrap4}}

<span class="error">Expansion depth limit exceeded در این مثال از {{Expansion depth limit exceeded|code=.needs-validation|lang=css|class=|id=|style=color: #FF9933;}} استفاده می‌کنیم، که اثر اعتبارسنجی را بعد از اینکه فرم ثبت شد اضافه می‌کند (اگر چیزی کم باشد). دقت کنید که برای عملکرد صحیح باید کد jQuery را نیز اضافه کنید:

Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=trybs_form_validation_needs|dars=bootstrap4}}

{{Expansion depth limit exceeded|قبل=Bootstrap 4:نوار راهبری|بعد=Bootstrap 4:ورودی های فرم}} {{Expansion depth limit exceeded}} {{Expansion depth limit exceeded|title={{Expansion depth limit exceeded| {{{Expansion depth limit exceeded}}} | فرم‌ها در بوت استرپ ۴ - ویکی‌کد}}

|description= کنترل‌های فرم بطور خودکار یکسری استایل‌های سراسری را بوسیله از بوت استرپ دریافت می‌کنند...

}}

{{Expansion depth limit exceeded}}