تفاوت های بوت استرپ 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 هم واقعا شگفت انگیز بود .

آموزش بوت استرپ 5

رنگ های فلت به همراه رنگ ها 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 ایجاد شدند را بخوبی مشاهده کنید . امیدواریم این مقاله و جدول تهیه شده برای شما مفید باشد .

تفاوت های 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-left float-right , float-left float-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-lg col-sm-md-lg-xl col-sm-md-lg-xl-xxl
مشخصه های عرض موبایل تا 768 هستند مشخصه های عرض موبایل تا 576 هستند همانند نسخه 4
col-md-offset-* offset-md-* همانند نسخه 4
Tables
جدول مشکی نداریم table-dark | thead-light | thead-dark thead-light | thead-dark => table-dark
table-condenced table-sm table-sm
table-borderless نداریم table-borderless اضافه شده همانند نسخه 4
کلاس table-responsive به div داده می شد table-responsive به همراه breakpoint همانند نسخه 4
Forms
form-horizontal حذف شده همانند نسخه 4
input-lg | input-sm form-control-lg | form-control-sm form-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-lg btn-xs حذف شده است همانند نسخه 4
Images
img-responsive img-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-bottom fixed-top | fixed-bottom fixed-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-footer card , card-body , card-header , card-footer همانند نسخه 4
Slider
item carousel-item همانند نسخه 4
اسلایدر معمولی داریم اسلایدر حالت Fade و لمسی اضافه شده است همان ساختار 4 بعلاوع اسلایدر dark
Other
Modal ها معمولی هستند Modal های وسط چین و اسکرول دار آمدند Modal های فول اسکرین هم اضافه شدند
کلاس های border نداشتیم border و border-color اضافه شدند border-1 تا border-5 اضافه شدند
بک گراند gradient نداریم بک گراند gradient نداریم bg-gradient اضافه شد
breadcrumb ها معمولی هستند همانند نسخه 3 breadcrumb ها استایل بهتری دارند و می توان divider را تغییر داد
آکاردئون ها معمولی هستند آکاردئون ها بهتر شدند آکاردئون با کلاس flush اضافه شدند
دکمه های Close مشکی هستند دکمه های Close مشکی هستند btn-close-white اضافه شده است
tooltip معمولی tooltip با خاصیت نوشتن html tooltip برای svg
Spinner نداشتیم Spinner ها اضافه شدند همانند نسخه 4
Toast نداشتیم Toast ها اضافه شدند همانند نسخه 4