طراحی سایت اختصاصی

ولی بوت استرپ ورژن 5
اینک بوت استرپ 5 ، ورژن انتها بوت استرپ میباشد و ما به صورت بی نقص در درون زمان فراگیری بوت استرپ ، به صورت بدون نقص بوت استرپ ورژن 5 را هم فراگیری دادیم . خب بوت استرپ 5 همان گونه که انتظار می رفت با تغییرات و تحولات خیلی عالی و همینطور امکاناتی اضافه خیس برای ما طراحی سایت اختصاصی ظواهر شد .

برای مثال مهمترین تغییرات که در بوت استرپ 5 شاهد آن بودیم می شود به 3 تغییر تحول اصلی اشاره نمود :
آیتم اولیه حذف شدن جی کوئری ( یعنی دیگر برای به کارگیری از کتابخانه js بوت استرپ نیازی به بار گذاری شدن کتابخانه jQuery نداریم .آیتم دوم اضافه شدن بوت استرپ RTL بود که بسیار کاری داهیانه در بوت استرپ 5 به حساب آورده می شود .
گزینه سوم اضافه شدن بوت استرپ آیکون ها با جلوه و ظاهری فوق العاده با بیشتراز 1300 آیکون و همینطور چگونگی فراتر .
این 3 تغییر تحول به عنوان مثال خصوصیت هایی نخستین بودند که در سفر به بوت استرپ 5 به شدت به دیده میخورند . ولی بوت استرپ 5 می اقتدار خاطرنشان کرد با هسته ای خوب و ظاهری بسیار شیک خیس ظهور کرد . بوت استرپ 5 در گام نخستین چنین که به لحاظ می رسید دو غرض مهم داشت که غرض اولیه بهبود ظواهر کلی و مقصود دوم حذف تعلق های گوناگون بود . ولی نکته ای که شایان توجه میباشد این میباشد که تغییرات در ورژن بوت استرپ 5 نسبت به 4 ، به اندازه ای نبودند که ما در بوت استرپ 4 نسبت به 3 تغییرات داشتیم . می اقتدار اعلام‌کرد بوت استرپ 4 یک ورژن شگفت انگیز در تحولات بوت استرپ بود که ورژن 5 هم هسته خویش را بر همین بستر پیشرفت بخشید و خصوصیت های نو را به خویش اضافه کرد .
اضافه شدن ورژن راست به چپ ، یکی مزیت های فوق العاده بود که تا ورژن بوت استرپ 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

ولی بوت استرپ ورژن 5
اینک بوت استرپ 5 ، ورژن انتها بوت استرپ میباشد و ما به صورت بی نقص در درون زمان فراگیری بوت استرپ ، به صورت بدون نقص بوت استرپ ورژن 5 را هم فراگیری دادیم . خب بوت استرپ 5 همان گونه که انتظار می رفت با تغییرات و تحولات خیلی عالی و همینطور امکاناتی اضافه خیس برای ما طراحی سایت اختصاصی ظواهر شد .

برای مثال مهمترین تغییرات که در بوت استرپ 5 شاهد آن بودیم می شود به 3 تغییر تحول اصلی اشاره نمود :
آیتم اولیه حذف شدن جی کوئری ( یعنی دیگر برای به کارگیری از کتابخانه js بوت استرپ نیازی به بار گذاری شدن کتابخانه jQuery نداریم .آیتم دوم اضافه شدن بوت استرپ RTL بود که بسیار کاری داهیانه در بوت استرپ 5 به حساب آورده می شود .
گزینه سوم اضافه شدن بوت استرپ آیکون ها با جلوه و ظاهری فوق العاده با بیشتراز 1300 آیکون و همینطور چگونگی فراتر .
این 3 تغییر تحول به عنوان مثال خصوصیت هایی نخستین بودند که در سفر به بوت استرپ 5 به شدت به دیده میخورند . ولی بوت استرپ 5 می اقتدار خاطرنشان کرد با هسته ای خوب و ظاهری بسیار شیک خیس ظهور کرد . بوت استرپ 5 در گام نخستین چنین که به لحاظ می رسید دو غرض مهم داشت که غرض اولیه بهبود ظواهر کلی و مقصود دوم حذف تعلق های گوناگون بود . ولی نکته ای که شایان توجه میباشد این میباشد که تغییرات در ورژن بوت استرپ 5 نسبت به 4 ، به اندازه ای نبودند که ما در بوت استرپ 4 نسبت به 3 تغییرات داشتیم . می اقتدار اعلام‌کرد بوت استرپ 4 یک ورژن شگفت انگیز در تحولات بوت استرپ بود که ورژن 5 هم هسته خویش را بر همین بستر پیشرفت بخشید و خصوصیت های نو را به خویش اضافه کرد .
اضافه شدن ورژن راست به چپ ، یکی مزیت های فوق العاده بود که تا ورژن بوت استرپ 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