کامل ترین جدول تفاوت های بوت استرپ 5 و 4 و 3

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

اول از هرچیزی یک نکته را خاطر نشان کنیم . از آنجایی که بوت استرپ یک فریمورک جهت سهولت کار و همچنین رسپانسیو سازی پروژه براساس زبان Css است ، پس از این جهت لازم است تا حتما با زبان Css آشنایی های لازم را در حد قابل قبول داشته باشید تا قادر به استفاده از فریم ورک Css نیز باشیم . البته ممکن است اطلاع داشته باشید که فریمورک‌های css تنها به Bootstrap مختوم نیست و فریمورک‌هایی مثل Uikit و TailwindCss و … نیز بسیار معرف و کاربردی هستند اما طرف حساب ما در این مقاله ، بوت استرپ است . اگر علاقمند به یادگیری یک فریمورک جدید در زمینه طراحی با Css باشید می‌توانید از دوره آموزش TailwindCss که توسط مجموعه ما تهیه و تدوین شده است نیز استفاده کنید .

صحبت را از بوت استرپ 2 شروع کنیم ؟

از آنجایی که قصد داریم این مقاله یک محتوای کامل و حتی دانشی و استخدامی باشد ( برای دوستانی که احتمال دارد در شرکت‌های طراحی سایت استخدام شوند و از انها درمورد تفاوت‌های نسخه‌های مختلف بوت استرپ سئوال شود ) لذا صحبت را از همان ب یسم الله شروع کنیم تا نقطه ابهامی نیز برای شما عزیزان وجود نداشته باشد . می‌توان گفت بوت استرپ نسخه 2 در زمان رونمایی خودش ، کاربرد قابل قبولی داشت اما اگر با دامنه کاربرد بوت استرپ 3 و 4 و 5 مقایسه کنیم خواهیم دید که بوت استرپ 2 استقبال چندان چندانی نداشت و طراحان قالب‌های html علاقه زیادی نداشتند تا از بوت استرپ نسخه 2 آنچنان زیاد در طرح های خود استفاده کنند . بوت استرپ 2 در تاریخ August 19, 2011 ارائه شده است .

علت این امر نیز تاحد زیادی مشخص بود . بوت استرپ در نسخه 2 خود از واحد پیکسل و همچنین تکنولوژی Float برای تقسیم و انجام چیدمان یا اصطلاحا ایجاد Layout در صفحه استفاد می‌کرد و این روش پیکسل درکنار Float چندان خوشایند نبود به این دلیل که در حالت‌های رسپانسیو به شدت با مشکل روبرو می‌شدیم اما باتوجه به مرسوم نبودن تکنولوژی‌های مدرن همچون Flex ، می‌توان گفت بوت استرپ تاحدی برای طراحان در زمان خود ، کارساز شده بود .

درحال حاضر تعداد وب سایت‌هایی که هنور با بوت استرپ نسخه 2 طراحی شده و به نسخه‌های بعدی مهاجرت نکرده‌اند بسیار بسیار کم است و شاید اصلا وجود ندارند . البته خاطر نشان کنیم که این فریمورک در زمان ارائه خود باتوجه به نیاز روز و میزان دامنه رشد طراحی سایت ، یک ابزار عظیم به حساب می‌آمد . اما سرعت رشد ابزارها و کدهای زبان Css در یک بازه مشخص ، سرعت گرفت و به همین دلیل بوت استرپ شروع به عیب یابی کرد تا خود را بروز کرده و این دایره رقابت را بنام خود حفظ کند که می‌توان گفت همین موارد نیز دلیل رشد نام بوت استرپ بودند که در زمان درست ، از قافله عقب نماند . پس از مدت کوتاهی ، بوت استرپ نسخه 3 خود را منتشر کرد که در ادامه خواهیم دید در این نسخه چه اتفاقاتی افتاد !

بوت استرپ 3 یک تحول در بوت استرپ

زمانی که بوت استرپ برای اولین بار از نسخه سوم خودش رونمایی کرد در تاریخ August 19, 2013 بود یعنی دقیقا دو سال از ارائه اولین نسخه اساسی بوت استرپ نگذشته بود که نسخه سوم با قدرت بیشتری ارائه شد . پس از ارائه این نسخه از بوت استرپ ، می‌توان گفت کاربران و طراحان در تعداد قابل توجهی ، به استفاده از بوت استرپ نسخه 3 روی آوردند . بوت استرپ 3 حقیقتا نسخه متحول شده‌ای بود . در بوت استرپ 3 ، برای قسمت تقسیم بندی ستون ها وبخش Layout ، خبری از واحدهای پیکسل نبود و اندازه باکس‌ها و ستون‌های بوت استرپ از Px به درصد ( % ) تغییر کرده بود و همه طراحان بخوبی اطلاع داشتند که استفاده از واحد % تا چه اندازه برای ایجاد انعطاف در طراحی بهتر است .

اولین تغییراساسی که در بوت استرپ 3 به چشم خورد ، همین تغییر اندازه‌های بخش Layout به % بود . بوت استرپ 3 از لحاظ دیزاین و طراحی نیز واقعا پیشرفت خوبی داشت و هنوز هم با اینکه بوت استرپ 5 در بازار مشغول به کار است اما بسیاری از سایت‌ها با بوت استرپ نسخه 3 روی کار هستند و کوچکترین مشکلی نیز در نمایش و چیدمان ندارند .

تغییر در ظاهر و همچنین اضافه شدن المان‌های جدیدتر ، اسلایدرهایی بهتر با چند افکت جدید ، ظهور فونت آیکون هایی با نام Glyphicon که البته در زمان خود که کتابخانه‌های آیکون به این اندازه وجود نداشت جذاب بودند ، نسخه جی کوئری بهبود یافته و سرعت و دسترسی بهتر نسبت به نسخه 2 ، همگی از دلایلی بودند که بوت استرپ توانست در زمان ظهور نسخه 3 معروف شده و محبوبیت بالایی را حاصل کند .

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

بوت استرپ نسخه 4 ، من کاهش دهنده شگرف استایل‌ها هستم !

بوت استرپ 3 و کار کردن با آن بسیار لذت بخش بود و تا August 10, 2017 این فریمورک با نغییرات جزئی به کار خود ادامه داد . به عبارتی 4 سال تمام یعنی دوبرابر بیشتر از نسخه 2 ، نسخه 3 ارائه خدمات کرد . اما زمانی که بوت استرپ 4 ظهور کرد شاهد تغییراتی فوق العاده شدیم که می‌توان اینگونه گفت که بوت استرپ در نسخه 4 ، سنگ بنایی را ارائه کرد که تمامی رقیبان نیز کم کم به فکر افتادند تا به این روش ، برای طراح ، کار را ساده کنند و به سبب این سیستم ، در طراحی انعطاف بیشتری داشته باشند .

شگرف‌ترین تغییر در بوت استرپ 4 تغییر کردن ستون ها از ساختار Float به ساختار Flex بود که می‌توان گفت بیش از 90% محدودیت‌هایی در ستون بندی و همچنین چینش را از میان برداشت . زمانی که از تکنولوژی Flex استفاده کنیم ، محدودیت ستون بندی‌هایی که در برخی اندازه‌ها داریم از میان برداشته شدند . برای مثال توسط سیستم گرید بوت استرپ 3 ، قادر نبودیم تا 5 ستون در کنار هم داشته باشیم و ستون‌های هر ردیف یا باید 6 تا بودند ، یا 4 تا یا 3 عدد و در حالت کمتر نیز 1 و 2 ستون .

<div class="d-inline-block w-50 rounded h-50 bg-dark"></div>

زمانی که از Flex استفاده کنیم ، توسط ساختاری که این تکنولوژی در اختیار ما قرار خواهد داد ، می‌توانیم تعداد ستون‌های دلخواه را در بوت استرپ داشته باشیم . همچینن به دلیل استفاده نکردن از حالت Float برای هر کدام از ستون‌ها ، ساختار بندی در وب سایت‌های راست به چپ و مخصوصا فارسی بسیار راحت‌تر بود . تکنولوژی Flex با توجه به ویژگی Direction در تگ html ، چیدمان و جهت صفحه را درنظر گرفته و جهت المان‌های صفحه را بصورت راست به چپ و یا چپ به راست تنظیم می‌کند . اما با این وجود باز هم در بوت استرپ نسخه 4 ، یک کتابخانه راست چین المانی بود که به آن احساس نیاز می‌شد .

رنگ هایی که در بوت استرپ 4 تغییر کردند واقعا جلوه خیلی زیبایی به وب سایت‌ها دادند . بوت استرپ 4 با توسعه نسخه Css خود بر روی زبان Sass این امکان را به طراحان داد تا پا را از حد فراتر گذاشته و دسترسی بهتری به پالت‌های رنگ داشته وسرعت کدنویسی را بهینه کنند . هسته بوت استرپ 4 نسبت به نسخه 3 تماما بازنویسی شده و سرعت آن نیز کاملا بهبود یافته بود . تغییر واحدهای اندازه گیری از Px به rem نیز واقعا شگفت انگیز بود .

رنگ های فلت به همراه رنگ ها Dark و Light که به هسته بوت استرپ 4 اضافه شدند نیز جذاب بودند . یکی از اتفاقات دیگر که در نسخه 4 رخ داد ، بهبود سیستم Layout در موبایل بود . نسخه موبایل که در بوت استرپ 3 از عرض 0 تا 767 پیکسل بود در بوت استرپ 4 به 576 پیکسل تغییر یافت که حقیقتا نیز کار درستی بود به این دلیل که عرض 767 برای موبایل حتی در حالت افقی نیز عرض زیادی بود . به همین دلیل بوت استرپ یک ستون بندی دیگر نیز به سیستم Layout خود اضافه کرد که با نام Xl یا همان Extra Large شناخته می‌شود . در واقع 4 عرضی که در بوت استرپ نسخه 3 وجود داشت به 5 عرض در بوت استرپ نسخه 4 تغییر یافت و استایل دهی و ستون بندی در موبایل و تبلت بسیار بهبود یافته و المان‌ها با اندازه و ابعاد منظم‌تری نمایش داده شدند .

فرم‌هایی که با ظاهر بهتر ارائه شدند ، اضافه شدن کلاس های مختلف به row ها و همچنین امکان تغییر در Breakpoint های مختلف از جمله تغییرات خوب در بوت استرپ 4 بود . زمانی که در بوت استرپ 3 حالتی برای یک Div مشخص می‌شد ، از نظر ویژگی padding و margin در تمامی عرض‌ها به همان حالت نمایش داده می‌شد اما به کمک کلاس‌های ( mb  ,  mt  ,   pb  ,  pt …. ) که برای عرض‌های مختلف به شکل ( mb-md  ,  mb-sm ) و … تعریف شده بودند ، توانستیم یک حالت خاص را فقط برای عرض‌های خاصی تعریف کنیم . برای مثال یک Div فقط در حالت موبایل دارای پدینگ از بالا باشد و از عرض‌های موبایل به بالا این پدینگ از بالا حذف شود که از صدقه سر دستورات media در Css بود .

همچنین بوت استرپ نسخه 4 ، برای اساسی‌ترین کدهای Css نیز کلاس‌هایی با اسامی مناسب و قابل فهم تعریف کرد . برای مثال کدهایی بصورت w-100 , d-block , d-inline-block , position-relative و .. از جمله کدهایی بودند که در اکثریت المان‌های داخل کد برای استایل دهی به کار می‌رفتند و با استفاده از این کلاس‌ها در کدنویسی بصورت دقیق ، می‌توان ادعا کرد که بیش از 60% کدهای تکراری از فایل style.css ما حذف می‌شدند .

همچنین اضافه شدن کلاس هایی مثل Border , rounded و … که از جمله استایل‌های پرکاربرد در فایل style.css بودند و روند طراحی با استفاده از این کلاس‌ها بسیار راحت شد . تمامی تغییراتی که در بوت استرپ 4 نسبت به نسخه 3 آن وجود دارد را می‌توانید در جدول پایین مشاهده کنید چرا که تغییرات بوت استرپ 4 در نسخه پایانی آن نسبت به بوت استرپ 3 کمی متعدد بود و می‌توان اینگونه گفت که با ظهور بوت استرپ 4 ، بوت استرپ 3 نیز برای طراحی‌های جدید کلا کنار رفت چرا که سیستم Flex و همچنین Grid بندی مناسب درکنار کلاس‌های کمکی بسیار زیاد ، ما را ملزم و مشتاق به مهاجرت از نسخه 3 به نسخه 4 نمود .

اما بوت استرپ نسخه 5

در حال حاضر بوت استرپ 5 ، نسخه آخر بوت استرپ است ( در تاریخ بروزرسانی این مقاله ) و مجموعه ما به شکل کامل در داخل دوره آموزش بوت استرپ ، موارد مربوط به بوت استرپ نسخه 5 را نیز ارائه کرده است . بوت استرپ 5 همانگونه که انتظار میرفت با تغییرات و تحولات بسیار و همچنین امکاناتی اضافه‌تر ارائه شد . دقیقا در تاریخ May 5, 2021 اولین نسخه از بوت استرپ 5 رسما در داخل سایت رونمایی شد و بازهم ما را شگفت زده کرد .

از جمله مهم ترین تغییرات که در بوت استرپ 5 شاهد آن بودیم 3 تغییر اساسی بود که حقیقتا یک هسته بهینه و کارآمد را برای تمامی طراحی‌ها ارائه کرد :

• مورد اول حذف شدن جی کوئری ( یعنی برای استفاده از کتابخانه js که داخل خود بوت استرپ برای فعال کردن اسلایدر و منو و آکاردئون و … ارائه شده است ، نیازی به لود شدن کتابخانه jQuery نداریم
• مورد دوم اضافه شدن بوت استرپ RTL بود که کاری بسیار هوشمندانه در بوت استرپ 5 محسوب می‌شود
• مورد سوم اضافه شدن بوت استرپ آیکون ها با جلوه و ظاهری فوق العاده با بیش از 1300 آیکون و همچنین کیفیت بالاتر ( این آیکون ها همانطور که بالاتر گفته شد در نسخه 3 وجود داشتند اما در نسخه 4 حذف شدند ولی در نسخه 5 با حالتی بسیار حرفه‌ای برگشتند )

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

اضافه شدن نسخه راست به چپ ، یکی از مزیت‌های فوق العاده بود که تا نسخه 4 از بوت استرپ با این ویژگی مشکل داشتیم و ظهور نسخه RTL داخل خود بوت استرپ 5 به شکل رسمی و استاندارد ، یک مزیت فوق العاده برای ما ایرانیان بود که سایت‌های راست به چپ داریم .

همچنین بالاتر اشاره کردیم که یکی از بخش‌های جالب و بازگشتی در بوت استرپ 5 ، قسمت Bootstrap Icons بود که این فریمورک در نسخه 4 فونت آیکون ها را کاملا حذف کرده بود و به ناچار به سراغ کتابخانه‌هایی مثل FontAwesome می‌رفتیم ، اما در نسخه 5 مجدد با قدرتی بیشتر فونت آیکون‌ها را در قالب بوت استرپ آیکون معرفی کرد که بیش از 1300 آیکون با ظاهری فوق العاده را به ما ارائه نمود .

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

یکی دیگر از تغییرات بوت استرپ در نسخه 5 اضافه شدن یک عرض دیگر به سیستم Grid بود که کلاس XXl یا همان Extra Extra Large بود و برای عرض‌های بزرگتر از Xl که در نسخه 4 ارائه شده بود تعریف شد . پس به این ترتیب شاهد هستیم که بوت استرپ در هر دو نسخه 4 و 5 ، روی سیستم Grid خود کار کرده است و در هر دو نسخه تغییراتی در سیستم ستون بندی خود برای عرض های مختلف ارائه نموده تا جای‌گیری هر عنصر در صفحه به درستی انجام شود .

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