تفاوت های بوت استرپ 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

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

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

تفاوت های 3 نسخه بوت استرپ
بوت استرپ 3بوت استرپ 4بوت استرپ 5
Body
واحد ها پیکسل هستندواحد ها به rem تغییر پیدا کردند . هر rem معادل 16 px می باشد .همانند نسخه 4
یکسری فونت های پیشفرض تعیین شده اندفونت از سیستم کاربر خوانده می شودهمانند نسخه 4
فونت پیشفرض 14 px استفونت پیشفرض 16 px استهمانند نسخه 4
کلاس فونت سایز نداریمکلاس فونت سایز نداریمکلاس های fs-* , fw-* , fst-* , lh , display اضافه شدند
text truncate نداریمtext truncate نداریمtext truncate اضافه شد
Glyphicon داشتیمGlyphicon ها حذف شدندBootstrap Icon ها اضافه شدند
کتابخانه jQuery نیاز داشتیمکتابخانه jQuery نیاز داشتیمنیازمنده به jQuery نیستیم
کتابخانه RTL نداریمکتابخانه RTL نداریمبوت استرپ RTL اضافه شده است
واحد های فاصله نداریمواحدی های mb-* , mr-* , ml-* , mt-* , pb-* , pr-* , pl-* , pt-* اضافه شدندواحد های left , right با توحه به جهت وب سایت به start , end تغییر کردند
کلاس های عرض و طولی نداریمکلاس های w-100 , w-50 , mw-100 , mh-100 , h-100 , h-50 و… اضافه شدندهمانند نسخه 4
کلاس های نمایشی نداریمکلاس های d-block , d-inline , d-inline-block , d-none و… اضافه شدندهمانند نسخه 4
pull-right , pull-leftfloat-right , float-leftfloat-start , float-end
Grid
float ها دست و پای ما را بسته بودبه کمک تکنولوژی Flex قادر به هر کاری هستیمهمانند نسخه 4
کلاس row داریمکلاس row-cols و row-cols-breakpoint… و align-items داریمهمانند نسخه 4
کلاس container داریمکلاس container-breakpoint داریمهمانند نسخه 4
ستون بندی ها 4 تا هستندستون بندی ها به 5 افزایش یافته اندستون بندی ها به 6 افزایش یافته اند
xs-sm-md-lgcol-sm-md-lg-xlcol-sm-md-lg-xl-xxl
مشخصه های عرض موبایل تا 768 هستندمشخصه های عرض موبایل تا 576 هستندهمانند نسخه 4
col-md-offset-*offset-md-*همانند نسخه 4
Tables
جدول مشکی نداریمtable-dark | thead-light | thead-darkthead-light | thead-dark => table-dark
table-condencedtable-smtable-sm
table-borderless نداریمtable-borderless اضافه شدههمانند نسخه 4
کلاس table-responsive به div داده می شدtable-responsive به همراه breakpointهمانند نسخه 4
Forms
form-horizontalحذف شدههمانند نسخه 4
input-lg | input-smform-control-lg | form-control-smform-control ها بسیار جذاب تر شدند
haswarningنداردهمانند نسخه 4
Floating Label نداردFloating Label نداردFloating Label دارد
input از نوع Range و colorpicker نداریمinput از نوع Range داریمinput از نوع Range و colorpicker داریم
استایل input ها و .. معمولی هستنداستایل Radio و Check بهتر شدنداستایل Radio و Check بهتر شدند و حالت Switch اضافه شده است
Buttons
کلاس های دکمهکلاس های btn-light و btn-dark و btn-secondary اضافه شدندهمانند نسخه 4
btn-outline نداردکلاس های btn-outline اضافه شدند . btn-outline-successهمانند نسخه 4
کلاس btn xs-sm-lgbtn-xs حذف شده استهمانند نسخه 4
Images
img-responsiveimg-fluidهمانند نسخه 4
کلاس وسط نداریمd-block و m-x-autoهمانند نسخه 4
DropDowns
دراپ داون ها در داخل ul li هستنددراپ داون ها در داخل div li هستندهمانند نسخه 4
کلاس divider در تگ li هستندکلاس divider در تگ div قرار داردهمانند نسخه 4
btn-group-justifiedساپورت نمیشههمانند نسخه 4
Navbars
کلاس های navbar-default و navbar-reverseکلاس های navbar-light و navbar-darkهمانند نسخه 4
navbar-fixed-top | navbar-fixed-bottomfixed-top | fixed-bottomfixed-top | fixed-bottom | sticky-top
Pagination
کلاس pagination به ul داده میشهبه li کلاس page-item و به تگ a کلاس page-link داده میشههمانند نسخه 4
previous و next داشتیمنداریمهمانند نسخه 4
list group ها با استایل معمولیlist-group-flush اضافه شده استهمانند نسخه 4
Panels
panel , panel-body , panel-header , panel-footercard , card-body , card-header , card-footerهمانند نسخه 4
Slider
itemcarousel-itemهمانند نسخه 4
اسلایدر معمولی داریماسلایدر حالت Fade و لمسی اضافه شده استهمان ساختار 4 بعلاوع اسلایدر dark
Other
Modal ها معمولی هستندModal های وسط چین و اسکرول دار آمدندModal های فول اسکرین هم اضافه شدند
کلاس های border نداشتیمborder و border-color اضافه شدندborder-1 تا border-5 اضافه شدند
بک گراند gradient نداریمبک گراند gradient نداریمbg-gradient اضافه شد
breadcrumb ها معمولی هستندهمانند نسخه 3breadcrumb ها استایل بهتری دارند و می توان divider را تغییر داد
آکاردئون ها معمولی هستندآکاردئون ها بهتر شدندآکاردئون با کلاس flush اضافه شدند
دکمه های Close مشکی هستنددکمه های Close مشکی هستندbtn-close-white اضافه شده است
tooltip معمولیtooltip با خاصیت نوشتن htmltooltip برای svg
Spinner نداشتیمSpinner ها اضافه شدندهمانند نسخه 4
Toast نداشتیمToast ها اضافه شدندهمانند نسخه 4