آموزش ورودی فرم های بوت استرپ - آموزش بوت استرپReviewed by صابر بوستانی on Jul 15Rating: 5.0
ورودی فرم های بوت استرپ

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

سلام و عرض ادب و احترام خدمت تمامی دوستان عزیز. توی این مطلب از آموزش های وب سایت آموزش برنامه نویسی سورس باران در این جلسه آموزش ورودی فرم های بوت استرپ رو تقدیم حضور شما دوستان می نماییم. لطفا با ما همراه باشید….

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

کنترل فرم های پشتیبانی شده

بوت استرپ از کنترل فرم های زیر پشتیبانی میکند :

  • input
  • textarea
  • checkbox
  • radio
  • select

ورودی بوت استرپ : Input

بوت استرپ از انواع ورودی های HTML5 مانند text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel,  و  color  پشتیبانی میکند .

نکته : اگر نوع ورودی را مشخص نکنید به طور کامل استایل دهی نمیشوند

مثال زیر حاوی دو عنصر ورودیست. یکی از نوع تایپ متن (type,text) و دیگری از نوع رمز (password)

1

محل متن در بوت استرپ : Textarea

مثال زیر حاوی یک Textarea می باشد:

2

چک باکس های بوت استرپ : Checkboxes

اگر میخواهید که کاربر از بین چند گزینه از یک لیست حاضر یکی را انتخاب کند باید از چک باکس ها استفاد ه کنید :

مثال زیر حاوی  سه عدد چک باکس میباشد . که گزینه اخر ان غیر فعال است

3

و اگر از کلاس checkbox-inline استفاده کنید به شکل زیر خواهد شد :

4

دکمه های رادیویی بوت استرپ

اگر میخواهید کاربر را محدود کنید تا تنها بتواند یک گزینه از لیست را انتخاب کند از دکمه های رادیویی استفاده کنید .

مثال زیر حاوی سه دکمه رادیویی ست که یک گزینه ان غیر فعال است

5

اگر میخواهید که این دکمه های رادیویی در یک خط قرار بگیرند از کلاس radio-inline استفاده نمایید:

6

Bootstrap select list : لیست انتخاب بوت استرپ

وقتی که میخواهید به کاربر اجازه دهید تا از بین چند گزینه انتخاب کند از لیست هی انتخاب استفاده کنید. مثال زیر حاوی یک لیست کشویی ست (یک لیست انتخاب کشویی )

7

 

کنترل استاتیک در بوت استرپ :

اگر نیاز دارید یک متن اشکار (plain-text) را کنار یک برچسپ در فرم افقی قرار دهید از کلاس form-control-static روی یک عنصر .<p> استفاده کنید.

8

 

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

  • input focus : خطوط بیرونی ورودی حذف شده ند و یک box-shadow بر روی فوکِس اعمال میشود .
  • Disable inputs : برای غیر فعال کردن یک بخض ورودی خاصیت disabled را بر روی آن اعمال می کنیم.
  • FIELDSETS های غیر فعال : خاصیت disabled را به یک fieldset اعمال کنید تا تمام کنترل های درون ان را غیر فعال کنید.
  • ReadOnly inputs : برای جلوگیری از وارد کردن اطلاعات توسط کاربر از خاصیت readonly استفاده کنید.
  • Validation states : بوت استرپ شامل استایل های معتبر سازی برای پیام های Error , warning و success میباشد . برای استفاده از انها کلاس های .has-warning, .has-error  و یا .has-successرا به عنصر والد اضافه کنید .
  • Icons : میتوانید با استفاده از کلاس .has-feedback و یک ایکون ، ایکون های فیدبک بسازید .
  • Hidden labels : برای برچسب های مخفی از کلاس .sr-onlyاستفاده کنید.

 

مثال زیر نشان دهنده برخی از حالت های کنرتل فرم های بالا در فرم های افقی ست :

9

 

 

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

10

امیدواریم که آموزش ورودی فرم های بوت استرپ مورد توجه شما دوستان قرار گرفته باشد.