تمام آنچه که باید درباره بوت استرپ ۵ بدانید!

تمام آنچه که باید درباره بوت استرپ ۵ بدانید!

مشخصات مقاله

تمام آنچه که باید درباره بوت استرپ ۵ بدانید!

محبوب ترین فریم ورک فرانت اند در سال های اخیر که می توان توسط آن دیزاین های مدرن و واکنش گرا (responsive)، رابط کاربری داینامیک و صفحات وب حرفه ای طراحی کرد در حال بروز شدن به نسخه 5 است.

فریم ورک bootstrap شامل کدهای css، js و جی کوئری رایگان برای طراحی وب سایت ها و وب اپلیکیشن های داینامیک و پیشرفته می باشد. بنابراین فریم ورکی که می خواهد در تمام پلتفرم ها و اپلیکیشن ها بخوبی نمایش یابد و کاربرپسند باشد باید برای تمام المان های صفحات وب (مانند button, navigation, list, panel و…) دیزاین های متنوعی در نظر گرفته باشد.

اهمیتی ندارد که شما یک طراح وب مبتدی هستید یا یک توسعه دهنده وب حرفه ای، بوت استرپ می تواند گزینه مناسبی برای طراحی رابط کاربری بسیاری از وب سایت ها و وب اپلیکیشن ها باشد.

نسخه 4 بوت استرپ و زمان رونمایی از نسخه 5:

فریم ورک بوت استرپ 4 هم اکنون روی نسخه 4.4.1 می باشد که المان ها و امکانات ویژه ای نسبت به نسخه های قبلی خود دارد. مانند SASS, Flexbox, Cards و پشتیبانی از پلاگین های قدرتمند جی کوئری.

بعد از گذشت 4 سال از توسعه و تکمیل نسخه 4 بوت استرپ سرانجام ورژن آلفای آن در تاریخ 19 آگوست 2015 میلادی عرضه شد و الان نیز تیم توسعه دهنده بوت استرپ در شرکت توییتر در حال توسعه و کار روی نسخه 5 بوت استرپ می باشند.

در این مقاله قصد داریم مطالب مرتبط با بوت استرپ نسخه 5 را بیان کنیم. مانند زمان عرضه bootstrap 5 ، تغییرات آن نسبت به نسخه 4 و غیره…

آپدیت بوت استرپ از ورژن 4 به 4.1 حدود 3 ماه طول کشید، از ورژن 4.1 به 4.2 حدود 8 ماه زمان برد و پیش بینی می شود نسخه 5 بوت استرپ در اواسط سال 2020 میلادی عرضه شود. اما بوت استرپ هنوز تاریخ دقیق ارائه نسخه 5 خود را اعلام نکرده است.

در ادامه قصد داریم تغییرات بوت استرپ 5 را نسبت به نسخه های قبلی بیان کنیم. دو مورد از تغییرات عمده و اساسی، حذف کتابخانه جی کوئری و عدم پشتیبانی از ورژن های 10 و 11 مرورگر اینترنت اکسپلورر می باشد.

لیست برخی از تغییرات بوت استرپ 5:

  • حذف jQuery
  • استفاده از Vanilla Javascript
  • فونت سایزهای واکنش گرا
  • عدم پشتیبانی از نسخه های 10 و 11 اینترنت اکسپلورر
  • بهینه سازی navigation
  • کتابخانه SVG سفارشی
  • آپدیت کلاس های CSS
  • و…

 

حذف جی کوئری (jQuery):

جی کوئری این امکان را فراهم می کند که توسعه وب سایت را سریع تر و ساده تر انجام دهیم. نمونه کاربردهای جی کوئری: حذف، آپدیت یا افزودن محتوا به صفحه وب، نمایش انیمیشن روی المان ها، پاسخ به رفتار کاربران، دریافت داده از سرور توسط آژاکس، ساده سازی توابع جاوا اسکریپت و…

تقریبا 8 سال است که فریم ورک بوت استرپ از کتابخانه جی کوئری استفاده می کند و کاربران باید برای استفاده از بوت استرپ به منظور طراحی قالب سایت شان حتما کتابخانه jQuery را در صفحه خود تعریف کنند تا با ارور مواجه نشوند.

تفاوت جی کوئری با فریم ورک‌هایی مانند ریکت:

در سال های اخیر با توجه به رشد و توسعه فریم ورک های جاوا اسکریپتی مانند ReactJS, Angular, VueJS از محبوبیت کتابخانه جی کوئری کاسته شده است. یکی از دلایل اصلی این کاهش محبوبیت jQuery اینست که جی کوئری مستقیما روی DOM کار می کند و آن را دستکاری (Manipulate) می کند. اما فریم ورک هایی مانند ریکت با ویرچوال دام (Virtual DOM) کار می کنند. این قضیه باعث افزایش سرعت اپلیکیشن ها و کارایی آنها شده است.

توسعه دهندگان ریکت، انگولار و ویو قادرند اپلیکیشن های مورد نظر خود را با امکانات و کنترل بیشتری توسعه دهند و در مقایسه با جی کوئری قدرت بیشتری دارند. در نسخه 5 بوت استرپ تمام کارهایی که با جی کوئری انجام میشد باید توسط جاوا اسکریپت وانیلا (pure) صورت گیرد. اینکار باعث کاهش سایز فایل های js پروژه نیز می شود.

 

استفاده از Vanilla Javascript:

جاوا اسکریپت زبان برنامه نویسی وب می باشد. اغلب وب سایت های مدرن از جاوا اسکریپت برای توسعه خود استفاده کرده اند. تمام مرورگرهای دسکتاپ، موبایل، تبلت دارای مفسر و کامپایلر زبان جاوا اسکریپت می باشند که باعث شده جاوا اسکریپت یک زبان برنامه نویسی جهانی و سراسری شود.

توسعه بوت استرپ 5 توسط جاوا اسکریپت:

حذف جی کوئری از نسخه 5 بوت استرپ باعث شده تا بتوان اسکریپت های موردنیاز برای توسعه صفحات وب را توسط زبان جاوا اسکریپت بنویسید. بدون اینکه نیاز باشد نگران حجم فایل js پروژه خود باشید یا کلی تابع بدون استفاده و اضافی به پروژه تان اضافه شود.

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

 

فونت سایز واکنش گرا:

طراحی وب سایتی که در تمام پلتفرم ها و مرورگرها بخوبی نمایش پیدا کند برای بسیاری از توسعه دهندگان به یک چالش تبدیل شده است. مدیا کوئری روشی است برای مدیریت فونت سایز (تایپوگرافی:typography) محتوای سایت در تمام دستگاه ها و مرورگرهای موجود در بازار. دسکتاپ، لپ تاپ، تبلت، موبایل و…

در بوت استرپ 5 بطور پیش فرض قابلیت فونت سایز واکنش گرا (Responsive Font Size) فعال است و بر اساس دستگاه مورد استفاده کاربران (دسکتاپ-تبلت یا موبایل) اندازه فونت المان های تایپوگرافی نیز تغییر می یابد.

ریسپانسیو بودن تمام واحدهای اندازه‌گیری:

موتور RFS (Responsive Font Size) ابتدا برای تغییر فونت سایز المان های تایپوگرافی ارائه شد اما بتدریج برای تغییر اندازه تمام المان هایی که شامل یونیت اندازه گیری هستند (مانند margin, padding, border-radius و…) استفاده شد. این موتور مکانیزمی دارد که می تواند سایز فونت، padding، margin مربوط به یک صفحه وب را بر طبق سایز اسکرین کاربر (viewport) تغییر دهد تا ظاهر زیبا و همچنین خوانایی بیشتری فراهم کند.

این قابلیت در روی تمام پیش پردازنده ها مانند SASS, LESS, Stylus نیز وجود دارد.

ریسپانسیو بودن تمام واحدهای اندازه‌گیری

بعنوان مثال فرض کنید شما در صفحه وب خود یک تگ h1 با کلاس hero-title دارید. می خواهید آن را توسط sass و یک mixin بصورت زیر استایل دهی کنید:

.hero-title {
  @include font-size(4rem);
}

پس از اعمال RFS ، استایل فوق به کد زیر کامپایل خواهد شد:

.hero-title {
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .hero-title {
            font-size: 4rem;
  }
}

 

عدم پشتیبانی از نسخه های 10 و 11 مرورگر اینترنت اکسپلورر:

در سال 1995 میلادی شرکت مایکروسافت مرورگر Internet Explorer را عرضه کرد و باعث استقبال بی نظیر کاربران اینترنت قرار گرفت. زیرا اولین مرورگری بود که از CSS و Javascript پشتیبانی می کرد. بطوریکه در سال 2003 حدود 95% کاربران از مرورگر اینترنت اکسپلورر برای مشاهده وب سایت های موردنظر خود استفاده می کردند.

کاهش میزان محبوبیت اینترنت اکسپلورر:

در سال 2020 میلادی مرورگر اینترنت اکسپلورر محبوبیت سابق را ندارد و سه مرورگر Chrome و Firefox و Edge بسیار پرطرفدارتر می باشند.

در حقیقت مرورگر IE یکی از کابوس های طراحان وب است زیرا بسیاری از استایل های CSS و اسکریپت های JS را پشتیبانی نمی کند و باعث دردسر وب دیزاینرها و دولوپرها شده است.

جاوا اسکریپت برای اینکه در مرورگر اینترنت اکسپلورر نسخه های 10 و 11 قابل شناسایی باشد باید با استانداردهای ES5 نوشته شود (ES6 در آنها پشتیبانی نمی شود). این قضیه می تواند سایز پروژه شما را تا 30% افزایش دهد. همچنین اجبار به استفاده از اکما اسکریپت 5 باعث می شود نتوانید از معلومات خود در ES6 بهره ببرید و از استانداردهای این زبان برنامه نویسی در پروژه خود استفاده کنید. حتی نسخه های 10 و 11 اینترنت اکسپلورر از برخی از استایل های CSS نیز پشتیبانی نمی کند پس دیزاین وب سایت نیز دچار اختلال خواهد شد.

به همین خاطر تیم توسعه دهنده بوت استرپ 5 تصمیم گرفتند از ورژن های 10 و 11 مرورگر IE پشتیبانی نکنند. در اینصورت توسعه دهندگان وب می توانند تمرکز خود را روی طراحی وب سایت های مدرن با کدهای بهینه بگذارند بجای اینکه نگران باشند فلان استایل یا اسکریپت در IE شناخته یا اجرا نمی شود. همچنین حجم فایل های خروجی پروژه نیز کاهش خواهد یافت.

 

بهینه سازی Navigation:

کامپوننت منوی navbar در بوت استرپ یکی از پر کاربردترین المان ها در بوت استرپ می باشد که تقریبا در تمام وب سایت ها وجود دارد. در نسخه های قدیمی بوت استرپ نیاز بود کد زیادی برای طراحی منو نوشته شود اما در نسخه 4 با استفاده از تگ nav در html5 کمی از کدنویسی منوی سایت کاسته شد.

بهینه سازی Navigation

در نسخه 4 بوت استرپ بطور پیش فرض کلاس inline-block برای navbar تعریف شده است بود اما در نسخه 5 از قابلیت فلکس (flexbox) برای منوی سایت استفاده شده است که انعطاف بیشتری نسبت به inline-block دارد.

 

کتابخانه آیکون های SVG سفارشی:

در Bootstrap 3 مجموعه ای از 250 آیکون بنام Glyphicon وجود داشت که طراحان وب می توانستند از آنها به شکل فونت در المان های دلخواه خود استفاده کنند. در نسخه 4 از مجوعه فونت آیکون  Font Awesome برای ارائه آیکون های SVG استفاده شد. در حالیکه در نسخه 5 قرار است از فونت آیکون های طراحی شده توسط آقای Mark Otto (هم بنیان گذار فریم ورک بوت استرپ) استفاده شود که مجددا با فرمت svg می باشد. برای اطلاعات بیشتر در مورد آیکون های بوت استرپ کلیک کنید.

کتابخانه آیکون های SVG سفارشی

بعنوان مثال آیکون وای فای به صورت زیر تعریف خواهد شد:

<svg class="bi bi-wifi" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M6.858 11.858A1.991 1.991 0 018 11.5c.425 0 .818.132 1.142.358L8 13l-1.142-1.142z" clip-rule="evenodd"/>
</svg>

 

آپدیت کلاس های CSS:

امکان ندارد به نسخه پنجم بوت استرپ کلاس های CSS جدید اضافه نشده باشد. در واقع چند کلاس CSS از نسخه چهارم این فریم ورک حذف شده و چند کلاس CSS جدید در نسخه 5 بوت استرپ اضافه شده است.

آپدیت کلاس های CSS

بر اساس مستندات بوت استرپ در گیت هاب، کلاس های زیر حذف شدند:

form-row

form-inline

list-inline

card-deck

و چند کلاس جدید زیر در نسخه 5 اضافه خواهد شد:

gx-* classes control the horizontal/column gutter width

gy-* classes control the vertical/row gutter width

g-* classes control the horizontal & vertical gutter width

row-cols-auto

نتیجه گیری:

با توجه به اطلاعاتی که در این مقاله بیان کردیم تیم توسعه دهنده فریم ورک بوت استرپ نسخه 5 سعی دارند تا حد ممکن این فریم ورک را سریع، ساده و کاربردی کنند.

 

5/5 (1 نظر)

اطلاعات مقاله

تمام آنچه که باید درباره بوت استرپ ۵ بدانید!

فرم ارسال دیدگاه درباره

تمام آنچه که باید درباره بوت استرپ ۵ بدانید!

دیدگاه کاربران درباره

تمام آنچه که باید درباره بوت استرپ ۵ بدانید!

دیدگاهی وجود ندارد