سلام برنامه | HiProgram

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

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

بوت استرپ ۴

همانطور که با شما قول داده بودیم مبحث بوت استرپ ۴ را برای شما آغاز کردیم. در این جلسه به موارد زیر میپردازیم:

• تفاوت های بوت استرپ ۳ و ۴
• بوت استرپ ۳ یا بوت استرپ ۴
• امکانات بهبود یافته در بوت اسرپ ۴

در این جلسه کدی نداریم و قصد ما آشنا کردن شما با نسخه جدید بوت استرپ است. در نسخه های قدیم bootstrap وقتی نسخه ی جدیدی به وجود می آمد دیگر نسخه قبلی پشتیبانی نمیشد. اما خوشبختانه با وجود آمده بوت استرپ ۴ همچنان شما میتوانید از بوت استرپ ۳ استفاده کنید. نکته جالب اینجاست که شما به راحتی میتوانید بوت استرپ خود را به ۴ آپدیت کنید و همچنان از امکانات بوت استرپ ۳ استفاده کنید.

تفاوت bootstrap 4 و bootstrap 3

در حالت کلی اگر بخواهیم بگوییم هر آنچه در بوت استرپ ۳ وجود داشت در بوت استرپ ۴ هم وجود دارد اما اگر شما از بوت استرپ ۴ استفاده میکنید به کلاس ها و امکانات نسخه ۳ بر نگردید چون ممکن است دچار مشکل شوید. همچنین یکی از مشکلاتی که ممکن است با مهاجرت به نسخه ۴ با آن روبرو شوید این است که اگر از glyphicon های خود بوت استرپ استفاده میکنید ممکن است آنها را نبینید و یا ظاهرشان تغییر کرده باشد.

در بوت استرپ ۳ از فناوری less استفاده میشد اما در نسخه ۴ از فناوری sass استفاده میشود که در کامپایل کر دن سرعت به مراتب بالاتری دارد در نتیجه سرعت سایت شما نیز افزایش پیدا میکند.

بوت استرپ ۳ یا بوت استرپ ۴

قطعا پیشنهاد ما بوت استرپ ۴ است چرا که هم سرعت بیشتری نسبت به نسخه قبلی دارد و هم اینکه هدف آن رابط کاربری ساده تر است یعنی راه اندازی و اجرای بوت استرپ ۴ ساده تر از نسخه ۳ است و اولین سازگاری آن با نسخه های موبایل است که قاعدتا استفاده از رسپانسیو در اولین نظر بهبود سایت برای گوشی های هوشمند است. علاوه بر این نسخه های جیکوئری استفاده شده در این نسخه نیز بسیار بهینه تر شده اند.

نکته : شما میتوانید بدون هیچ تغییری در کد ها خود تنها با قرار دادن فایل نسخه ۴ به آن مهاجرت کنید.

امکانات bootstrap 4

ابتدا امکانات نسخه ۴ را برای شما لیست میکنیم سپس هرکدام را توضیح میدهیم:

1. ثابت بودن کتابخانه
2. استفاده از sass بجای less
3. بهبود grid system و استفاده از rem
4. جایگزین کردن panel و wells با cards
5. reset component بجای normalize
6. باز نویسی پلاگین های JS
7. بهبود تولتیپ و پاپ اور

ثابت بودن کتابخانه

منظور از ثابت بودن کتابخانه پایداری آن است. همانطور که میدانید برترین زبان های برنامه نویسی دنیا آنهایی هستند که پایداری بیشتری دارند بوت استرپ نیز در نسخه ۴ خود این مورد را لحاظ کرده و کتابخانه ای به مراتب پایدارتر ایجاد کرده است.

استفاده از sass بجای less

تکنولوژی که در نسخه ۳ استفاده میشد less بود که سرعت خوبی داشت اما اگر آن را بخواهیم با sass مقایسه کنیم باید بگوییم که sass به مراتب از less پرسرعت تر و بهینه تر است که خوب بوت استرپ هم از این فناوری استفاده کرده و نسخه ۴ خود را بر پایه sass بنا گذاشته است.

بهبود grid system و استفاده از rem

استفاده از grid ها تفاوت چندانی نکرده است اما در نسخه ۴ از rem استفاده میشود.

rem چیست؟

rem واحد اندازه گیری مشابه px و یا pt است اما با این تفاوت که بسیار بهینه تر برای حالت رسپانسیو است اگر از rem استفاده کنید علاوه بر سازگار شدن سایز فونت ها با حالت رسپانسیو padding ها و margin ها نیز کاملا به ورت اتوماتیک ساز گار میشوند.

جایگزین کردن panel و wells با cards

در نسخه ۴ از panel و wells به جای cards استفاده میشود همانطور که قبل تر گفتیم بوت استرپ ۴ بیشتر تاکید روی حالت موبایل دارد که در حالت موبایل استفاده از panel و wells بهتر است cards جواب میدهد.

reset component بجای normalize

مرورگر ها و سیستم های مختلف به ورت پیشفرض استایل هایی دارند که ما نمیخواهیم از آن استفاده کنید normalize فایلی است که به ما کمک میکند هم فایل ها را بهینه تر کنیم هم از حالت پیشفرض مرورگر ها و دستگاه ها خلاص شویم reset component هم همین کار را انجام میدهد با این تفاوت که بهینه تر از normalize است.

باز نویسی پلاگین های JS

یکی دیگر از کارهایی که در بوت استرپ ۴ اتفاق افتاده است و ما هم در آموزش Bootstrap 4 آن را بیان میکنیم باز نویسی پلاگین ها است بوت استرپ در نسخه جدید از نو پلاگین های JS را نوشته است و تمام تلاش خود را کرده است که آن را بهینه تر کند همانطور که میدانید یکی از علت های اصلی کند شدن سرعت سایت تعداد درخواست ها است که عمدتا به فایل های JS بر میگردد.

بهبود تولتیپ و پاپ اور

نحوه باز شدن تولتیپ و پاپ اور در سایز های مختلف یکی از مشکلات طراحان بود که در این نسخه کاملا حل شده است.

آموزش Bootstrap 4 در جلسه بعدی به صورت عملی آغاز میشود .

اگر قصد یادگیری بوت سترپ ۳ را دارید از لینک زیر آن را دنبال کنید:

آموزش Bootstrap 3 جلسه اول (معرفی)

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

آموزش Bootstrap 4 جلسه دوم (start)

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

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