نمادها

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

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

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

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

سلام برنامه در این جلسه درباره انواع سایز باکس ها و input ها بحث می کند

وقتی صحبت از سایز می آید منظور Width و height است

در این جلسه هم ، درباره عرض باکس ها و input ها و استاندارد های آن بحث می کنیم

و هم درباره ارتفاع آنها که آن هم اندازه ای استاندارد دارد

این سایز ها بر اساس رسپانسیو بودن صفحات اعمال می شوند و براساس رزولیشن تعیین می شوند

و ارتفاع نیز بر اساس کوچک یا بزرگ بودن المان ارائه می شود

 

Input Sizing

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

سایز input ها یکی از موارد مهمی است که در دستگاه های مختلف آن هارا بهینه میکند یکی از مهمترین کلاس ها برای این بهینه سازی کلاس input-lg و یا input-sm است که برای تنظیم ارتفاع Input ها و کلاس های col-lg-12 و یا col-sm-6 برای عرض یا همان width باکس ها استفاده میشود جای مقدار های گذاشته شده از ۱ تا ۱۲ میتوان مقدار دهی کرد برای درک بهتر موضوع میتوانید از کد زیر استفاده کنید:

همانطور که در کد بالا مشخص است با کلاس های input-lg و input-sm توانستیم سایز input ها را تغییر دهیم برای مشاهده این تغییرات کافیست از کد بالا خروجی Html بگیرید.

 

تغییر سایز گروهی

اگر input های شما شامل متن ،توضیحات ،آیکن ها و … هستند و شما قصد دارید آنها را برای دستگاه های مختلف بهینه کنید بهتر است با ادامه این آموزش بوت استرپ همراه باشید.

همانطور که بالاتر به شما گفتیم با استفاده از col ها میتوانید این تنظیمات را به وجود بیاورید حال برای حالت گرهی کافیست کلاس form-group-lg و یا حالت های دیگر را نیز به کد های خود اضافه کنید توجه داشته باشید که این کلاس را به سر دسته گروه میدهیم و به واسطه col ها الباقی را مرتب میکنیم برای اینکه موضوع واضح تر شود پیشنهاد میکنیم کد زیر را دنبال کنید:

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

 

سایز col ها

تا اینجای کار درباره سایز دهی به input ها و form ها و المان های همراه آنها صحبت کردیم حال میپردازیم به سایز دهی خود باکس های input ها در جلسه آموزش col ها گفتیم که اگر از آخرین حالت یعنی xs استفاده کنیم و یا حالت دیگر مثلا sm استفاده کنیم کلاس های قبل از آن هم همان مقدار را میگیرد. شما میتوانید به راحتی با تغییر عددی این col ها سایز مد نظر خود را ایجاد کنید برای درک بهتر این موضوع میتوانید از کد زیر کمک بگیرید:

و اما آخرین مبحث input ها

 

نوشته توضیحات زیر input

اگر شما قصد دارید تویحاتی را در پایین هر Input قرار دهید پیشنهاد میکنیم روش زیر را دنبال کنید.
شما میتوانید با اضافه کردن کلاس help-block به پایین input های خود امکان نوشتن توضیحات برای هر input را ایجاد کنید. این توضیحات به input بالایی خود متصل شده و در دستگاه های مختلف بهم ریختگی ایجاد نمیکند برای اینکه موضوع واضح باشد از کد زیر کمک بگیرید:

 

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

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

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

 

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

 

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

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

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

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

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

1 دیدگاه برای “آموزش Bootstrap جلسه بیست و هفتم (Input Sizing)”

  1. arman گفت:

    واقعا خیلی پیگیر هستین هیچ جا بخاطر یه Input این همه توضیح نمیده ممنون آماتور هارو خوب درک میکنید

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

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

*

code

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