نمادها

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

آموزش 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 ها الباقی را مرتب میکنیم برای اینکه موضوع واضح تر شود پیشنهاد میکنیم کد زیر را دنبال کنید: