تفاوت بوت استرپ 4 و 5 چیست ؟

برنامه نویسی در حوزه طراحی وب همواره دارای چالش‌های متعددی است که توسعه دهندگان همواره با آنها سروکار دارند. یکی از مشکلاتی که هر از مدتی برای این افراد پیش می‌اید، دریافت بروزرسانی بزرگ برای ابزارها و فریمورک‌های مورداستفاده توسعه دهندگان است؛ جایی که نسخه قبلی همچنان به طور گسترده مورداستفاده قرار می‌گیرد و نسخه جدید نیز تغییر خارق العاده‌ای را تجربه نمی‌کند. بوت استرپ نسخه 5، یکی از بزرگترین بروزرسانی‌های این فریمورک بود؛ اما به دلایلی، خیلی از افراد تفاوت بوت استرپ 4 و 5 را به خوبی درک نمی‌کنند و نمی‌توانند از بین این دو انتخاب کنند.

این موضوع باعث شد در این مقاله از وبلاگ سبزلرن، به این موضوع بپردازیم که تفاوت بوت استرپ 4 و 5 چیست؟ و کدام نسخه برای یادگیری مناسب است؟

فریمورک بوت استرپ چیست؟

در ابتدا بهتر است معرفی مختصری از فریمورک بوت استرپ داشته باشیم.

Bootstrap یک فریمورک طراحی وب متن‌باز و محبوب است که به توسعه‌دهندگان کمک می‌کند صفحات وب ریسپانسیو و زیبا را بدون نیاز به جاوا اسکریپت و تنها با استفاده از HTML و CSS و به سادگی هرچه تمام‌تر توسعه دهند. این فریمورک شامل مجموعه‌ای از ابزارها و قالب‌های آماده برای دکمه‌ها، فرم‌ها، منوها و سایر المان‌های موردنیاز برای یک سایت است که می‌توان از آن‌ها در صفحات وب استفاده کرد.

همچنین، بوت استرپ از یک سیستم گرید پیش‌فرض بهره می‌برد که به طراحان کمک می‌کند که به سادگی ستون‌ها و ردیف‌ها را همانطور که می‌خواهند، ایجاد کرده و آنها را به صورت ریسپانسیو پیاده‌سازی کنند. علاوه بر این، فریمورک Bootstrap انعطاف پذیری بالایی دارد و دست توسعه دهندگان برای شخصی‌سازی پروژه خود را کاملا باز می‌گذارد.

مهمترین تفاوت بوت استرپ 4 و 5 چیست؟

همانطور که در ابتدای مطلب نیز گفتیم، دو نسخه بوت استرپ 4 و بوت استرپ 5 محبوب‌ترین نسخه‌های این فریمورک در حال حاضر هستند و توسعه دهندگان این فریمورک، از یکی از این نسخه‌ها استفاده می‌کنند. در ادامه نگاهی به مهمترین تفاوت‌های Bootstrap نسخه 4 و 5 خواهیم داشت.

عدم پشتیبانی از جی کوئری

بزرگترین تفاوت بوت استرپ 4 و 5، عدم استفاده از کتابخانه JQuery برای استفاده از کدهای جاوا اسکریپت در نسخه 5 این فریمورک بود. این کار باعث عدم نیاز به بارگزاری این کتابخانه در پروژه و افزایش سرعت برکزاری صفحات وب می‌شود. علاوه بر این، کتابخانه جی کوئری محبوبیت سابق را ندارد و با وجود رقبای قدرتمندی نظیر انگولار و React، در حال منسوخ شدن است.

حذف جی کوئری از بوت استرپ 5 باعث شد بسیاری از توسعه دهندگانی که به دلیل سرعت لود پایین صفحات Bootstrap از آن مهاجرت کرده بودند، دوباره به این فریمورک برگردند. با این کار بوت استرپ جان دوباره‌ای گرفت و محبوبیت بیشتری نزد توسعه دهندگان فرانت اند بدست آورد.

تغییر واحد اندازه‌گیری از PX به Rem و Em

یکی دیگر از مهمترین تفاوت‌های بوت استرپ نسخه 4 و 5 در تغییر واحدهای اندازه گیری پیش‌فرض است؛ جایی که این واحدها از پیکسل به Em و Rem تبدیل شده‌اند. همانطور که احتمالا می‌دانید، واحد اندازه گیری پیکسل، یک واحد استاتیک است؛ در نتیجه در صورتی که قصد طراحی یک سایت واکنشگرا را داشته باشید، حسابی به دردسر می‌افتید.

اما واحدهای Em و Rem واحدهایی نسبی هستند و برای استفاده در طراحی واکنش‌گرا، گزینه‌ای عالی محسوب می‌شوند. EM نوعی واحد اندازه گیری است که برابر با اندازه فونت فعلی یک المان است؛ برای مثال اگر مقدار Font-size برای نوشته‌های H1 را روی مقدار 20 پیکسل قرار دهیم، سایز 1.5 EM برای این تگ، برابر با سایز 30 پیکسل است. REM مشابه EM است، اما به جای فونت فعلی، به فونت ریشه وابسته است. برای مثال، اگر مقدار Font-size برای المان‌های موجود در تگ Header را روی 12 پیکسل قرار دهیم و از یک تگ H2 در Header با سایز 2 REM استفاده کنیم، سایز این هدر برابر با 24 پیکسل خواهد بود.

در صورت عدم تعیین سایز فونت برای ریشه یک المان، سایز 16 پیکسل برابر با 1 REM محاسبه خواهد شد.

پشتیبانی از سایت‌های راست چین

پس از سال‌ها، بلاخره در نسخه پنجم Bootstrap شاهد اضافه شدن نسخه RTL یا راست چین این فریمورک هستیم. در گذشته و قبل از اضافه شدن این ویژگی، مجبور بودیم استایل‌های CSS و برخی از کدهای HTML قالب بوت استرپ را ویرایش کنیم و آن را به صورت دستی، راست چین کنیم. این کار زمان قابل توجهی از ما می‌گرفت و ممکن بود ناسازگاری‌هایی در فرآیند توسعه پروژه برای ما به وجود آورد. اضافه شدن این قابلیت تاثیر قابل توجهی بر محبوبیت فریمورک Bootstrap بین توسعه دهندگان ایرانی داشت.

اضافه شدن پالت‌های رنگی بیشتر

در بوت استرپ 5 رنگ‌های جدید و متنوع‌تری برای استفاده در سایت‌ها ارائه شده که می‌تواند در جذابیت و زیبایی خروجی نهایی تاثیر مثبتی داشته باشد. همچنین این فریموریک به وضوح و خوانایی رنگ‌ها نیز توجه ویژه‌ای داشته؛ به طوری که افراد با مشکلات بینایی نیز می‌توانند به راحتی از سایت‌های مبتنی بر بوت استرپ استفاده کنند و مشکلی از نظر دیدن رنگ‌ها نداشته باشند!

در مجموع، هدف از این تغییرات، بهبود تجربه کاربری و امکان توسعه سایت‌های جذاب‌تر و قابل استفاده برای همه کاربران است. چیزی که به نظر می‌رسد بوت استرپ در پیاده سازی آن موفق بوده است!

اضافه شدن آیکون‌های جدید با نام Bootstrap Icon

یکی دیگر از تفاوت‌های بوت استرپ 4 و 5 که زیاد به چشم آمد، اضافه شدن دوباره آیکون‌ها در این فریمورک بود. در نسخه سوم بوت استرپ، آیکون‌های متعددی برای استفاده در پروژه‌ها وجود داشت؛ اما این ویژگی در نسخه چهارم این فریمورک به طور کلی حذف شد تا کاربران مجبور به استفاده از آیکون‌های دیگر شوند. اما با معرفی بوت استرپ 5، شاهد اضافه شدن دوباره آیکون‌ها با نام Bootstrap Icons هستیم که بیش از 1300 آیکون متن‌باز و رایگان با فرمت SVG را در اختیار توسعه دهندگان قرار می‌دهد.

علاوه بر این، در استفاده از این آیکون‌ها که دارای ظاهر منحصر به فردی نیز هستند، محدودیتی وجود ندارد؛ بنابراین می‌توانید از آنها در سایر پروژه‌های خود که مبتنی بر بوت استرپ نیستند نیز استفاده کنید!

تغییرات و بهبود در Grid و طرح‌بندی

فرمورک Bootstrap 5 در زمینه گرید و طرح‌بندی صفحات، دارای بهبودها و تغییرات مثبتی است که فرآیند توسعه را راحت‌تر و سریعتر می‌کنند. برای مثال، می‌توانید از کلاس‌های ستون نظیر col-6 برای قرار دادن عرض ستون به مقدار 50% استفاده کنید. علاوه بر این، کلاس‌هایی نظیر position: relative و کامپوننت .media از بوت استرپ حذف شده‌اند.

عدم پشتیبانی از مرورگرهای قدیمی

در مقایسه Bootstrap 4 و 5 یک نکته جالب وجود دارد؛ این فریمورک دیگر از برخی مرورگرها پشتیبانی نمی‌کند. این عدم پشتیبانی برای ارائه خروجی بهتر و بهینه‌تر بدون نیاز به رعایت برخی استانداردهای قدیمی برای نسخه‌های قدیمی برخی مرورگرها اعکال شده است. لیست زیر، این مرورگرها و نسخه‌های آنها که دیگر توسط فریمورک بوت استرپ 5 پشتیبانی نمی‌شوند را نشان می‌دهد.

• مرورگر Microsoft Edge Legacy
• مرورگر IE نسخه 10 و 11
• مرورگر فایرفاکس نسخه 60 و قدیمی‌تر
• مرورگر کروم نسخه 60 و قدیمی‌تر
• مرورگر سافاری نسخه 10 و قدیمی‌تر (هم در مک و هم در آیفون)
• مرورگرهای تلفن‌های دارای اندروید 6 و قدیمی‌تر

حالا از کدام یک استفاده کنیم؟ بوت استرپ 4 یا 5؟

انتخاب بین بوت استرپ 4 یا 5 به نیازها و شرایط شما بستگی دارد. هر دو نسخه مزایا و معایب خاص خود را دارند و شما باید بسته به نیاز و شرایطی که دارید، از یکی از این دو استفاده کنید.

پیشنهاد ما، استفاده از Bootstrap 5 است؛ زیرا این نسخه 5 مزایای متعددی نسبت به نسخه 4 دارد. این مزایا شامل سرعت بارگذاری بیشتر به دلیل حذف جی کوئری، واکنشگرایی بهتر به واسطه استفاده از واحدهای اندازه گیری Em و Rem، پشتیبانی کامل از زبان فارسی و راست چین، پالت رنگی گسترده‌تر، آیکون‌های جدید و رایگان و همچنین بهبود در Grid و طرح‌بندی صفحات می‌شود. انتخاب نسخه مناسب به نیازها و شرایط شما بستگی دارد، اما بوت استرپ 5 با ارائه این مزایا، انتخابی ایده‌آل برای طراحان و توسعه‌دهندگان وب محسوب می‌شود.

البته این نسخه معایبی هم دارد. برای مثال، از برخی نسخه‌های مرورگها پشتیبانی نمی‌کند و به طور کامل، پشتیبانی از مرورگر Microsoft Edge Legacy که نسخه‌ای قدیمی از مرورگر محبوب Microsoft Edge است را متوقف کرده است. همچنین برای کسانی که می‌خواهند از نسخه 4 به نسخه 5 بوت استرپ مهاجرت کنند، مشکلاتی نظیر تغییر نام کلاس‌های پیش‌فرض و نیاز به یادگیری برخی مباحث جدید وجود دارد.

به طور کلی، در مقایسه بوت استرپ 4 و 5، پیشنهاد ما استفاده از نسخه پنجم این فریمورک است.

یادگیری بوت استرپ هنوز ارزش دارد؟

با وجود ظهور فریمورک‌های جدید و قدرتمندی نظیر React و Angular، بوت استرپ به عنوان یکی از محبوب‌ترین فریمورک‌های طراحی وب، جایگاه خود را حفظ کرده است. سرعت بارگذاری بیشتر، واکنشگرایی بهتر، پشتیبانی از زبان فارسی و راست چین، پالت رنگی متنوع، آیکون‌های جدید و بهبود در Grid و طرح‌بندی، تنها بخشی از مزایای بوت استرپ 5 هستند. با استفاده از این فریمورک، می‌توانید به سادگی صفحات وب زیبا و ریسپانسیو را به صورت مقیاس پذیر برای پروژه‌های کوچک و متوسط و حتی بزرگ توسعه دهید.

اما یادگیری یک فریمورک خوب، نیاز به دیدن آموزش‌های خوب و عمیق دارد! دوره آموزش بوت استرپ سبزلرن با ارائه محتوای آموزشی جامع و به‌روز، شما را در این مسیر همراهی خواهد کرد. در این دوره، با زبانی ساده و گویا، به تمام مفاهیم و ابزارهای بوت استرپ 5 تسلط پیدا خواهید کرد و می‌توانید از آن برای خلق وب‌سایت‌هایی جذاب و کارآمد استفاده کنید. این دوره دارای پشتیبانی رایگان و تخصصی توسط مدرس است که به صورت مادام العمر و تا زمانی که سبزلرن وجود داشته باشد، به شما ارائه می‌شود!

همین امروز با شرکت در دوره آموزش مقدماتی تا پیشرفته بوت استرپ در آکادمی سبزلرن، قدم در مسیر حرفه‌ای شدن در دنیای طراحی وب بردارید!