نمادها

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

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

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

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

 

ساخت input

در جلسه قبلی درباره ساخت فرم ها به صورت کلی صحبت کردیم در این جلسه ریز تر شده و درباره مواردی که در فرم قرار میگیرد صحبت میکنیم انواع باکس ها و ورودی هایی که میتواند در فرم جای گیرد اولین آنها input است . به کمک input و کلاس های بوت استرپ میتوانیم ورودی هایی مثل password و text را بسازیم کلاسی که بوت استرپ برای این نوع ورودی ها در نظر گرفته است form-control است.

از جمله دیگر type هایی که در input جای میگیرند:

  • datetime
  • datetime-local
  • date
  • month
  • time
  • week
  • number
  • email
  • url
  • search
  • tel
  • color

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

 

ساخت textarea

معمولا از textarea برای بخش نظر گذاری یا همان comment استفاده میشود. این باکس به شما امکان درج تعداد text بالا را میدهد کلاسی که بوت استرپ برای textarea در نظر گرفته است form-control است دقیقا مشابه input همچنین باید بدانید که textarea تگ باز و بسته دارد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت checkbox

به کمک checkbox میتوانید چند گزینه را با هم انتخاب کنید کافیست به تگ label کلاس form-check-label و به تگ input کلاس form-check-input را بدهید. همچنین label و input را باید داخل div با کلاس form-check قرار دهید به این روش میتوانید هر تعداد چک باکسی که میخواهید بسازید اگر قصد دارید چک باکسی را غیر فعال کنید کافیست به آن مقدار disabled را بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

ساخت checkbox خطی 

در قسمت قبل ساخت چک باکس را یاد گرفتید اما اگر میخواهید این چک باکس را در یک خط بنویسید و اصطلاحا inline checkbox بسازید لازم است کلاس form-checkinline را به تگ div اختصاص دهید یعنی هر div که تگ های label و input داخل آن قرار دارد باید این کلاس در آن قرار گیرد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت radio button

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

 

ساخت radio button خطی

مشابه checkbox شما میتوانید رادیو های خود را نیز در یک خط قرار دهید برای این کار کافیست دقیقا مشابه چک باکس خطی عمل کنید و به تگ div خود که مربوط به هر label و input است کلاس form-check-inline را اختصاص دهید به همین راحتی میتوانید radio های خود را در یک لاین قرار دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت select list

select list یا همان لیست انتخابی به شما امکان این را میدهد که از لیستی یک یا چند مورد را انتخاب کنید بله درست است در اینجا ۲ حالت وجود دارد انتخاب یک مورد از لیست یا انتخاب چند مورد از لیست ابتدا ساخت خود لیست را بررسی میکنیم برای ساخت لیست باید تگ select را بسازیم و کلاس form-control را به آن بدهیم و گزینه های لیست را با تگ option نمایش میدهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

حالت قبل امکان انتخاب یک مورد از لیست را میدهد اگر قصد انتخاب چند مورد از لیست را دارید باید مقدار multiple را به تگ select اضافه کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

سایز input ها

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

 

ساخت plain text

ابتدا لازم است توضیح دهیم plain text چیست اگر میخواهید کادری دور باکس هایتان نباشد باید از حالت plain text استفاده کنید این حالت تنها نوشته داخل input را نمایش میدهد و کادر دور آن را تنها در زمانی که روی آن کلیک میکنید نمایش میدهد برای ساخت این حالت باید کلاس form-control-plaintext را به تگ input خود بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت range و file

به عنوان آخرین مبحث range و file را با هم توضیح میدهیم اگر قصد ساخت یک نوار لغزنده را دارید باید از type با مقدار range استفاده کنید و به آن کلاس formcontrol-range را بدهید و اگر قصد ساخت file را دارید که به کمک آن بتوانید امکان آپلود فایل را ایجاد کنید باید از type با مقدار file و کلاس form-control-file استفاده کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

 

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

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

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

 

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

 

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

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

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

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

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

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

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

*

code

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