تغییرات بوت استرپ در بروز رسانی جدید به بوت استرپ 4

تغییرات بوت استرپ در بروز رسانی جدید به بوت استرپ 4


مهاجرت از LESS به SASS
4 bootstrap با پیوستن به جامعه بزرگ SASS ، از هر زمان دیگری سریع‌تر کامپایل خواهد شد و این به کمک LibSASS اتفاق افتاده است.


بهبود یافتن سیستم Grid
در این نسخه با بازنویسی کلی فریم ورک بوت استرپ 4 Bootstrap ، امکانات بهتری برای بهینه کردن پروژه طراحی سیایت برای دستگاه‌های تلفن همراه فراهم شده است.


پشتیبانی از Flex box
کافی است مقادیری را تغییر داده و CSS را دوباره کامپایل کنید تا با Grid بندی مجدد از اجزای صفحه بر پایه Flex box بهره‌مند شوید.


اضافه شدن ویژگی جدید Cards به بخش کامپوننت ها
در بوت استرپ 4 Bootstrap بخشی با نام Cards اضافه شده که کارکرد آن همانند Panel ، Thumbnails و Well می‌باشد. اما با کارایی و کیفیت بهتری جایگزین مناسبی برای سایر ویژگی‌های مشابه خواهد بود.


ثابت شدن تمام HTML Reset ها داخل یک ماژول جدید با نام Reboot
Reboot یک ماژول جدید از SASS است که تمام کارایی Normalize.css را در خود دارد.


قابلیت سفارشی سازی مدرن
در نسخه Bootstrap 3 تمامی کدهای تزئینی مانند Gradient ، Transition و .. در یک فایل جداگانه قرار می‌گرفتند ، اما در بوت استرپ 4 Bootstrap ، تمامی این تنظیمات در یک متغیر SASS قرار گرفته و تنها برای تغییراتی مانند حذف و یا اعمال آن کد بر روی کلیه صفحات تنها نیاز است یک متغیر را تغییر داده و فایل را مجدداً کامپایل کنید.


عدم پشتیبانی از IE8 و IE9 و استفاده از واحدهای em و rem
4 Bootstrap دیگر از Internet Explorer 8 و Internet Explorer 9 پشتیبانی نمی‌کند. با حذف این پشتیبانی , Bootstrap توانایی این را خواهد داشت که جدیدترین و بهترین بخش‌های CSS استفاده کرده و با استفاده از em و rem سایزبندی بهتری را در متون و نوشتارهای گرافیکی در قالب‌های Responsive ایفا کند.


بازنویسی مجدد پلاگین‌های جاوا اسکریپت در بوت استرپ 4
تمامی پلاگین‌های جاوا اسکریپت برای استفاده بهتر از امکانات و مزایای بیشتر در فریم ورک بوت استرپ 4 Bootstrap باز نویسی شده اند تا کاربران این فریمورک محبوب بتوانند از جدیدترین متدها به صورت جزئی و کلی استفاده نمایند.


بهبود یافتن مکان قرارگیری خودکار tooltip و popover
در بوت استرپ 4 Bootstrap با کمک ابزاری به نام Tether مکان‌های نمایش خودکار Tooltip و Popover بهبود یافته است.


بازنویسی تمام مستندات
تمامی مستندات با Markdown بازنویسی شده‌اند تا به کمک استفاده از برخی پلاگین‌ها نمایش کدها و اجزای زنده کدها بهنیه‌تر استفاده گردد و جستجو در مستندات با سرعت بهتری صورت پذیرد. امکانات بهبود یافته بسیار زیادی مانند بهبود کلاس‌های مرتبط با Margin و Padding ، افزایش کلاس‌ها کاربردی ، فیلدهای سفارشی فرم و … در بوت استرپ 4 اضافه شده است که این فریمورک را بیش از پیش جذاب می‌سازد.


آموزش بوت استرپ -روش های نصب و راه اندازی بوت استرپ


روش اول : نصب بوت استرپ 4 با Compiled CSS and JS


این روش یکی از عمومی ترین و کارآمد ترین روش ها برای نصب بوت استرپ 4 یا استفاده از Bootstrap 4 در صفحات وب و طراحی وب سایت می باشد . این روش به این صورت است که پس از کلیک بروی گزینه Download بسته آماده و کامپایل شده بوت استرپ 4 را در اختیار شما قرار می دهد تا به راحتی درون پروژه خود استفاده کنید .


در بالای دکمه دانلود به شما هشدار می دهد که درون این فایل ها فایل مربوط به JQuery برای بخش جاوا اسکریپت Bootstrap و فایل Popper.js برای قسمت تولتیپ ها نیاز می باشد و شما باید درون پروژه فراخوانی کنید . موضوعی که اینجا باید به آن اشاره کرد این است که شما حتما درون پروژه هایی که میخواهید از فریم ورک بوت استرپ و امکانات خاص آن مثل اسلایدر ، تب ها ، آکاردئون و … استفاده کنید باید فایل جی کوئری را درون صفحه فراخوانی کنید چه از طریق CDN و یا چه از طریق include کردن درون پروژه .


اما در صورتی که نیازی به استفاده از tool tip ندارید نیازی به وارد کردن فایل popper.js درون پروژه نمی باشد . پس از کلیک و دانلود فایل مربوطه و باز کردن آن به دو پوشه اصلی بر می خوریم . یک پوشه به نام CSS و یک پوشه به نام JS . فایل های استایل آن درون پوشه CSS وجود دارد و فایلهای مرتبط به جاوا اسکریپت درون فولدر JS قرار دارد .


روش دوم : راه اندازی بوت استرپ 4 با CDN


یکی دیگر از روش های نصب Bootstrap 4 راه اندازی Bootstrap 4 با CDN است. مزیتی که وجود دارد سرعت لود فایل های بوت استرپ شما افزایش پیدا می کند عیبی که در استفاده از راه اندازی بوت استرپ 4 با CDN وجود دارد امکان ویرایش فایل های Bootstrap وجود ندارد و عیب بعدی اگر اینترنت شما قطع باشد و پروژه خودتان به صورت لوکال باشد ، به دلیل نبود اینترنت این فایل ها درون صفحه بارگزاری نمی شود .برای فراخوانی فایل های بوت استرپ از طریق CDN باید در بخش head پروژه خود دستور مربوط به وارد کردن فایل CSS و در بخش انتهای Body دستور وارد کردن فایل های JS را قرار دهیم .


روش سوم : نصب بوت استرپ با npm


برای نصب Bootstrap با npm نیاز است که ابتدا نرم افزاری را روی سیستم خود نصب کنید برای دانلود این نرم افزار وارد سایت nodejs.org شوید این سایت بصورت خودکار سیستم عامل شما را تشخیص می دهد و بر اساس سیستم عامل شما نسخه مناسب نرم افزار را به شما پیشنهاد می دهد.بعد از نصب npm با استفاده از کامند ویندوز cmd اقدام به نصب Bootstrap می کنیم.


ویژگی های کلی فریم ورک بوت استرپ


استفاده آسان : به طور کلی هر کسی که دانش پایه ای از HTML و CSS داشته باشد به راحتی می تواند با این فریم ورک قدرتمند کار کند .
ویژگی ریسپانسیو : فریم ورک Bootstrap به صورت کاملا حرفه ای با استفاده از کدهای CSS امکان واکنش گرا بودن فراهم کرده و سایتها به راحتی درون موبایل ، تبلت ، لبتاپ و سایر صفحه نمایش ها قابل مشاهده می باشد و کاملا نسبت به سایز و اندازه صفحه نمایش ها انعطاف پذیر می باشد .
رویکرد اصلی بر پایه موبایل : این روزه اکثر کاربران برای مشاهده سایت ها از موبایل استفاده می کنند برای همین فریم ورک بوت استرپ این نکته مهم را در نظر گرفته و چارچوب اصلی خود را بر پایه صفحه نمایش موبایل بنا کرده است .
سازگاری با مرورگرهای مدرن : فریم ورک Bootstrap 4 با تمام مرورگرهای مدرن سازگاری کاملی دارد . مرورگرهایی از جمله ( Chrome, Firefox, Internet Explorer 11+, Safari, Opera )

منبع: پایلاش