آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش ایجاد فرم با bootstrap

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

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

فرم های HTML بخش داخلی صفحات وب هستند، اما طراحی کنترل های فرم به صورت دستی و یکی یکی با استفاده از CSS می تواند یک فرایند خسته کننده باشد. تویتر بوت استرپ به مقدار زیادی فرایند طراحی کنترل های فرم را ساده می کند، کنترل هایی مانند جعبه ی ورودی، جعبه ی انتخاب، متن و غیره. تویتر بوت استرپ سه نوع مختلف از Layout های فرم را ارائه می دهد. فرم عمودی (فرم پیش فرض Layout) فرم افقی فرم خطی

ایجاد فرم Layout عمودی

شما می توانید سه نوع مختلف لیست تعریف کنید . لیست های بدون ساختار –لیست یارآیتم ها که درآن ترتیب مهم نیست. آیتم های لیست در لیست های بدون ساختار با نقطه های گرد مشخص شده اند. لیست های منظم – لیست یارآیتم ها که در آن ترتیب مشخص میباشد. آیتم های لیست درلیست منظم با اعداد مشخص می شوند. لیست تعریف –لیست یار آیتم ها با توصیفات مربوط به آن ها.

مثال :

		

        

خروجی مثال بالا مانند تصویر زیر می باشد.

Bootstrap
نکته:

در bootstrap 3همه ی عناصر متنی مانند input, text area, و select با گروه .form-control به طور پیش فرض 100 درصد گسترده می باشند. برای استفاده ی آنها در درون خط باید عرضی روی عنصر کنترل های فرم تنظیم کنند که در داخل استفاده شود.

ایجاد فرم Layout افقیایجاد فرم Layout افقی

در فرم Layout افقی برچسب ها در سمت راست تنظیم شده اند و به سمت چپ شناور می باشند تا روی همان خط ها ظاهر شوند، مانند کنترل های فرم. فرم Layout افقی به تغییرات زیادی در مارک آپ پیش فرض خود نیاز دارد. مراحل رسیدن به این Layout را در زیر مشاهده می کنید.

گروه .form-horizontalرا به عنصر form اضافه کنید. برچسب ها و کنترل های فرم را در عنصر div طبقه بندی کرده و گروه .form-group را به کار بگیرید. گروه های گرید از پیش تعریف شده ی بوت استرپ را برای تنظیم برچسب ها و کنترل های فرم استفاده کنید. گروه .control-label را به عنصر labelاضافه نمایید.

مثال :

		

خروجی مثال بالا مانند زیر می باشد.

Bootstrap
نکته:

در bootstrap 3همه ی عناصر متنی مانند input, text area, و select با گروه .form-control به طور پیش فرض 100 درصد گسترده می باشند. برای استفاده ی آنها در درون خط باید عرضی روی عنصر کنترل های فرم تنظیم کنند که در داخل استفاده شود.

ایجاد فرم Layout افقی

در فرم Layout افقی برچسب ها در سمت راست تنظیم شده اند و به سمت چپ شناور می باشند تا روی همان خط ها ظاهر شوند، مانند کنترل های فرم. فرم Layout افقی به تغییرات زیادی در مارک آپ پیش فرض خود نیاز دارد. مراحل رسیدن به این Layout را در زیر مشاهده می کنید. گروه .form-horizontalرا به عنصر form اضافه کنید. برچسب ها و کنترل های فرم را در عنصر div طبقه بندی کرده و گروه .form-group را به کار بگیرید. گروه های گرید از پیش تعریف شده ی بوت استرپ را برای تنظیم برچسب ها و کنترل های فرم استفاده کنید. گروه .control-label را به عنصر labelاضافه نمایید.

مثال :

		

خروجی مثال بالا مانند زیر می باشد.

Bootstrap

ایجاد فرم Layout درون خطیایجاد فرم Layout درون خطی

گاهی اوقات ممکن است لازم باشد برای فشرده کردن جدول، کنترل های فرم را کنار یکدیگر قرار دهید. شما این کار را به راحتی با اضافه کردن گروه بوت استرپ .form-inlineبه عنصر

انجام می دهید.

 

    

خروجی مثال بالا مانند زیر می باشد.

Bootstrap
نکته:

پیشنهاد میشود برای هر فرم ورودی یک برچسب درج شود، در غیر اینصورت خواننده های صفحات با فرم های شما مشکل خواهند داشت. به هرحال در فرم Layout درون خطی شما می توانید این برچسب ها را با استفاده از گروه sr-only پنهان کنید.

ایجاد فرم Layout درون خطیفرم کنترل استاتیک

ممکن است موقعیتی وجود داشته باشد که لازم باشد تنها یک متن ساده را در کنار یک برچسب فرم به جای یک کنترل قرار دهید. شما می توانید این کار را در یک Layout افقی با استفاده از گروه .form-control- static روی یک عنصر pانجام دهید، مانند مثال زیر:

خروجی مثال بالا مانند زیر می باشد.

Bootstrap

ایجاد فرم Layout درون خطیاندازه ارتفاع در جعبه های ورودی و انتخاب

شما به سادگی می توانید ارتفاع جعبه های ورودی و انتخاب خود را کنترل کنید تا آنها را با دکمه های سایز هماهنگ کنید. گروه های اندازه گیری بوت استرپ مانند .input-lg و .input-smمی توانند هم بر روی جعبه انتخاب و هم بر رویجعبه ی اندازه گیری استفاده شوند تا اندازه های کوچک تر و بزرگ تر آن را ایجاد کنند.

ایجاد فرم Layout درون خطیانداره ی گرید جعبه های ورودی، متن و انتخاب

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



خروجی مثال بالا مانند زیر می باشد.

Bootstrap

ایجاد فرم Layout درون خطیگسترش فرم های کنترل با تویتر بوت استرپ

بوت استرپ دارای مولفه های مفید دیگری میباشد که فرم شما را جذاب تر می کند.

ایجاد فرم Layout درون خطیایجاد ورودی های افزوده و اضافه

شما می توانید قبل یا بعد از هر ورودی متن محور متن، آیکن و یا دکمه اضافه کنید.

ایجاد فرم Layout درون خطیبرای افزودن متن یا آیکن به یک ورودی

متن یا آیکن را داخل یک عنصرspan دارای گروه .input-group-addon قرار دهید و آن را قبل و یا بعد از عنصر input قرار دهید. span و عنصر متن محور input را در داخل عنصر div قرار دهید و گروه class .input-groupرا روی آن به کار برید.

نکته:

ویژگی افزوده در بوت استرپ تنها برای ورودی های متن محور قابل دسترسی می باشد و عناصر select یا text areaرا پشتیبانی نمی کند.

   
 
.00
$ .00

خروجی مثال بالا مانند زیر می باشد.

Bootstrap

به طور مشابه می توانید دکمه ی چک باکس یا رادیو را به جای متن در داخل گروه ورودی قرار دهید.

  

خروجی مثال بالا مانند زیر می باشد.

Bootstrap

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

اگر بخواهید بیشتر ازیک عمل را با یک دکمه انجام دهید،می توانید به جای متن دکمه های رو به پایین را اضافه کنید.


خروجی مثال بالا مانند زیر می باشد.

Bootstrap

ایجاد فرم Layout درون خطیایجاد گروه های دکمه های رو به پایین تقسیم

به طور مشابه می توانید زمانیکه دکمه در کنار دکمه های دیگر قرار دارد، گروهی از دکمه های رو به پایین ایجاد کنید.

خروجی مثال بالا مانند زیر می باشد.

Bootstrap

ایجاد فرم Layout درون خطیایجاد ورودی های غیرفعال

برای ایجاد ورودی های غیرفعال ویژگی disabled را به عنصر input اضافه کنید. بوت استرپ بقیه ی کارها را انجام خواهد داد.

	 

خروجی مثال بالا مانند زیر می باشد.

Bootstrap

همچنین می توانید ویژگی read only را به عناصر ورودی اضافه کنید و یک ورودی read only ایجاد کنید که مانع ورودی های یوزر شده و همان ویژگی های غیرفعال را داراست.

	
	  

به خای غیرفعال کردن کنترل های فرم به طور تکی، می توانید همه ی کنترل های فرم را در یک مجموعه فیلد با اضافه کردن ویژگی disabled به عنصر

غیرفعال کنید.

 

خروجی مثال بالا مانند تصویر زیر می باشد.

Bootstrap

قرار دادن متن کمکی در اطراف کنترل های فرمقرار دادن متن کمکی در اطراف کنترل های فرم

قرار دادن متن کمکی برای کنترل های فرم یک راه مناسب برای راهنمایی یوزرها در ورود به داده ی درست می باشد. می توانید با استفاده از گروه .help-blockسطح بلوک متن کمکی را نیز برای کنترل های فرم قرار دهید.

	
 
A block of help text that breaks onto a new line and may extend beyond one line.

خروجی مثال بالا مانند زیر می باشد.

Bootstrap

قرار دادن متن کمکی در اطراف کنترل های فرمقرار دادن متن کمکی در اطراف کنترل های فرم

بوت استرپ مکانیزم آسان و قدرتمند برای طراحی کنترل های ورودی ارائه می دهد تا وضعیت های مختلف اعتبار را نشان دهد. بوت استرپ دارای طرح های اعتبار برای خطا، هشدار و پیام های موفق می باشد. برای استفاده از آن فقط کافیست گروه مناسب را به پیرامون .form-group اضافه کنید.

		
Username is available
Password strength: Weak
Please enter a valid email address

خروجی مثال بالا مانند زیر می باشد.

Bootstrap

همچنین می توانید با استفاده از گروه .has-feedback روی .form-group و گلیفیکن (glyphicon) راست، آیکن های فیدبک اختیاری به ورودی های خود اضافه کنید.

Username is available
Password strength: Weak
Please enter a valid email address

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

بوت استرپ همه ی کنترل های فرم استاندارد و انواع ورودی های HTML5 جدید از جمله تاریخ زمان، اعداد، ایمیل، url، جستجو، tel رنگ و غیره را پشتیبانی می کند. مثال زیر موارد استفاده از کنترل های فرم استاندارد با تویتر بوت استرپ را نشان خواهد داد.


  • 2355
  •    2188
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .