نمادها

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

آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)

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

آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group) از سری آموزش های تک قسمتی است.

 

input گروهی

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

 

سایز ورودی های گروهی

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

  • سایز کوچک: برای ساخت سایز کوچک باید از کلاس input-group-sm در کنار کلاس input-group استفاده کرد.
  • سایز متوسط :به صورت پیشفرض این سایز روی تمام موارد قرار دارد و نیاز به تعریف کلاس خاصی نیست.
  • سایز بزرگ: برای ساخت سایز بزرگ باید از کلاس input-group-lg در کنار کلاس input-group استفاده کرد.

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

input های چندگانه

اگر بخواهیم input های چند تایی تعریف کنیم لازم نیست کار خاصی انجام دهیم کافیست تمام input ها را داخل کلاس input-group قرار دهیم و برای فیلد هایی که ورودی ندارند کلاس input-group-prepend ایجاد کنیم برای واضح کردن موضوع میتوانید از کد زیر کمک بگیرید:

 

ورودی های گروهی با checkbox و radios

شما میتوانید همراه با input های خود checkbox و radio را اضافه کنید و در نهایت آن هارا در یک گروه قرار دهید برای این کار کافیست آنهارا در داخل تگی با کلاس input-group-text قرار دهید به همین راحتی میتوانید در کنار input های خود چک باکس و رادیو داشته باشید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

قرار دادن دکمه در input Group ها 

برای قرار دادن دکمه ها کافیست از آموزش جلسه آن که قبلا توضیح داده ایم استفاده کنید اما برای آنکه آن را به صورت گروه در کنار input قرار دهیم لازم است آن را در div با کلاس input-group-append قرار دهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

input های زیر منو دار

درست است شما میتوانید برای ورودی های خود زیر منو هم داشته باشید و زیر منویی را به آن بچسبانید اگر طریقه ساخت خود زیرمنو را بلد نیستید به آموزش های جلسات قبل مراجعه کنید برای اضافه کردن زیر منو به input کافیست آن را در کلاس input-group-prepend قرار دهید و به همین راحتی زیرمنو را در کنار input خود داشته باشید برای واضح شدن موضوع میتوانید از کد زیر استفاده کنید:

 

اضافه کردن label به input

شاید در برخی از سایت ها دیده باشید قسمتی از باکس ورودی محتوا از قبل تعریف شده و غیر قابل تغییر است مانند ورودی ایمیل که بعد از @ آن در کمپانی های مختلف ثابت است یا قرار دادن علامت @ قبل از نام های کاربری برای ایجاد این حالت کافیست به کمک کلاس های بوت استرپ لیبل خود را اضافه کنید به کمک کلاس input-group-text که در یک تگ span قرار میگیرد میتوانید این کار را انجام دهید اما توجه کنید قبل از این مورد باید کل input-group-text را در داخل div با کلاس input-group-append قرار دهید.
برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

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

آموزش Bootstrap 4 جلسه بیست و سوم (Custom Forms)

 

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

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (2 رای, میانگین: 4٫50 امتیاز از 5)
Loading...

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

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

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

پاسخی بگذارید

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

*

code

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