نمادها

شما اینجا هستید

آموزش Bootstrap جلسه بیست و ششم (Inputs2)

در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و ششم (Inputs2)

آموزش Bootstrap جلسه بیست و ششم (Inputs2) از سری آموزش های تک قسمتی است

سلام برنامه در خدمت شماست با ادامه بحث رسپانسیو کردن Input ها

در جلسه گذشته درباره input ، textarea ،checkbox ، radio و select صحبت کردیم

در این جلسه درباره input Group و Button group و همچنین کنترل های آنها صحبت می کنیم

مواردی مثل فعال و غیر فعال کردن المان های input و اضافه کردن addon به Input

در این جلسه مبحث Input ها را تمام میکنیم و هر موردی که مانده است گفته می شود

همچنین به صورت کامل درباره ساخت باکس سرچ صحبت می کنیم

 

Static control

اولین موضوعی که در قسمت دوم Input راجب آن بحث میکنیم static control است. اگر ساده بخواهیم این مورد را توضیح بدهیم باید بگوییم به واسطه کنترل گر های استاتیک همانطور که از نامشان مشخص است میتوانید یک بخش را به صورت استاتیک پر کنید و به آن مقدار ثابت دستی بدهید. به عنوان مثال ما در کد زیر به قسمت ایمیل به کمک کلاس form-control-static مقدار دستی داده ایم که ثابت است و توسط کاربر تغییر نمیکند.

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

 

input Group

باکس های گروهی یا input Group برای مواردی استفاده میشود که شما علاوه بر یک input ساده از موارد دیگری نیز در input های خود استفاده میکنید معمولا این موارد آیکن ها هستند که جلوه ی بهتری با فرم های ما میدهند و یا توضیحاتی قبل input که به باکس شما متصل هستند برای واضح تر شدن موضوع بهتر است از کد Html زیر خروجی بگیرید تا نتیجه را ببینید:

در کد بالا ما برای ایجاد Input های گروهی از کلاس input-group و برای اضافه کردن آیکن های تصویری از کلاس input-group-addon استفاده کردیم. توجه داشته باشید که کلاس input-group-addon تنها برای آیکن ها نیست اگر متنی هم قبل input و متصل به Input میخواهید ایجاد کنید باید از این کلاس استفاده کنید.

اگر قصد دارید دکمه ای را به input متصل کنید باید از کلاس input-group-btn استفاده کنید به تصویر زیر توجه کنید در این تصویر دکمه سرچ به باکس متصل است.

برای ساخت دکمه سرچ بالا و درک کلاس input-group-btn میتوانید از کد زیر استفاده کنید:

 

 

بوت استرپ form control

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

  • input focus : همانطور که از نامش مشخص است برای توجه روی input ها استفاده میشود.
  • disabled input : برای غیر فعال کردن input ها میتوانید از این کلاس استفاده کنید.
  • disabled fieldsets: برای غیر فعال کردن فیلد های از این کلاس استفاده میشود.
  • readonly inputs : این بخش تنها اطلاعات داخل Input را برای کاربر خواندنی میکند و کاربر نمیتواند تغییر دهد.
  • validation states : همانند دکمه ها که در جلسه های قبل توضیح دادیم برای input ها هم میتوانید کلاس های رنگی تعیین کنید.
  • icons : به کمک این کلاس شما میتوانید آیکن هایی مربوط به مرحله validation states را اضافه کنید.
  • hidden labels : اضافه کردن یک لیبل مخفی روی input ها که معمولا برای توضیحات استفاده میشود.

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

در جلسه قبلی درباره نوشتن input ها در حالت های خطی و یا عمودی صحبت کردیم که آن موارد برای آموزش های این جلسه نیز صدق میکند و میتوانید از آن استفاده کنید. ما در طی ۲ جلسه هر آنچه برای فرم ها و Input ها در بوت استرپ لازم بود را خدمت شما عرض کردیم البته مبحث input ها هم چنان ادامه دارد و در جلسات آینده به موارد بیشتری میپردازیم.
می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و پنجم (Inputs)

آموزش Bootstrap جلسه بیست و هفتم (Input Sizing)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

 

و یا آن را در آپارات مشاهده کنید:

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (4 رای, میانگین: 4٫75 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه بیست و ششم (Inputs2): نوع فایل:mp4 حجم فایل:24.21 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

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

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

*

code

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