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

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

خب از اونجا که بوت استرپ یک فریم ورک رسپانسیو برای Css هست ، پس از این جهت لازمه تا حتما با زبان Css آشنایی های لازم را داشته باشیم تا بتونیم از فریم ورک Css استفاده کنیم . البته همونطور که میدونید تنها Bootstrap نیست که به عنوان فریم ورک برای زبان Css معرفی شده . فریم ورک هایی مثل Uikit و .. هم خیلی معرف و کاربردی هستند اما طرف حساب ما اینجا بوت استرپ هست .

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

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

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

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

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

بوت استرپ 3 و کار کردن با آن بسیاز لذت بخش بود ، اما زمانی که بوت استرپ 4 ظهور کرد شاهد تغییراتی فوق العاده شدیم که می توانستیم در طراحی انعطاف بیشتری داشته باشیم .

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

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

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

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

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

همچنین بوت استرپ نسخه 4 ، برای اساسی ترین کدهای Css هم کلاس های خوبی تعریف کرد . برای مثال کد هایی مثلا w-100 , d-block , d-inline-block , position-relative و .. که از جمله کدهایی بودند که در 70% المان ها به کار می رفتند و با استفاده از این کلاس ها در کدنویسی می توان گفت بیش از 40% کد ها از فایل style.css ما حذف می شدند . همچنین اضافه شدن کلاس هایی مثل کلاس های Border , rounded و … که از جمله کد های پرکاربرد در فایل style.css بودند و کار ما با استفاده از این کلاس ها بسیار راحت میشد . تمامی تغییراتی که در بوت استرپ 4 نسبت نسخه 3 آن وجود دارد را می توانید در جدول پایین مشاهده کنید چرا که تغییرات بوت استرپ 4 در نسخه پایانی آن نسبت به بوت استرپ 3 زیاد بود و درواقع می توان گفت با ظهور بوت استرپ 4 ، بوت استرپ 4 هم کلا کنار رفت چرا که سیستم Flex و همچنین Grid بندی مناسب درکنار کلاس های کمکی بسیار زیاد ، ما را ملزم و مشتاق به مهاجرت از نسخه 3 به نسخه 4 می نمود .

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

در حال حاضر بوت استرپ 5 ، نسخه آخر بوت استرپ است و ما به شکل کامل در داخل دوره آموزش بوت استرپ ، به شکل کامل بوت استرپ نسخه 5 را هم آموزش دادیم . خب بوت استرپ 5 همانگونه که انتظار میرفت با تغییرات و تحولات خیلی خوب و همچنین امکاناتی اضافه تر برای ما ظاهر شد .

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

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

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

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