نویسنده mr.hajati
امتیاز مطلب
تعداد بازدید 1954
تاریخ بروزرسانی ۲۳ فروردین ۱۴۰۱

بوت استرپ 5

سلام در سپتامبر سال 2020 یک خبر توجه همه را به خودش جلب کرد. کمپانی توییتر پنجمین ورژن از فریمورک محبوب بوت استرپ را ارائه کرد. در این نسخه تغییرات بسیار زیادی ایجاد شده است که در ادامه آن ها را خواهیم نوشت. می خواهیم به سوالاتی که در این باره برای شما پیش می آید پاسخ دهیم.

  • بوت استرپ چیست؟
  • چرا باید از بوت استرپ بلد باشیم؟
  • بوت استرپ 5 چه ویژگی هایی دارد؟
  • چه تفاوتی بین ورژن 4 و 5 وجود دارد؟
  • چگونه از بوت استرپ 4 به 5 کوچ کنیم؟

 

بوت استرپ چیست؟

بوت استرپ یک فریمورک سی اس اس، محصول کمپانی توییتر می باشد. این محصول علاوه بر ریسپانسیو کردن وبسایت شما به یک سری کلاس آماده برای زیبا سازی و چینش سایت شما مجهز است. این محصول در 5 ورژن عرضه شده که نسخه 5 آن هنوز آزمایشی است. و تا اصلاح شدن آن زمان زیادی لازم است.

بوت استرپ 5

  1. خصوصیات فریمورک بوت استرپ

    1. قابلیت های ریسپانسیوسازی بسیار حرفه ای
    2. از ایجاد کدهای تکراری جلوگیری می کند
    3. سرعت کدنویسی را افزایش میدهد
    4. سازگاری با کلیه مرورگر
    5. حوزه کاری گسترده ای دارد

 

ویژگی ها و تفاوت های بوت استرپ 5 :

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

  • اضافه کردن کلاس جدید شبکه بندی:

در این نسخه یک کلاس شبکه بندی برای نمایش گر های بزرگ تر از 1400 پیکسل تحت عنوان col-xxl طراحی شده است.در نسخه های قبلی تا مدیا کوئری لارج (lg) یعنی عرض 1024 پیکسل ساپورت میشد. در این نسخه تحول بزرگی که در عرض های شبکه بندی ها ایجاد شد این بود که شما تا عرض 1400 هم یک دید کلی به سایت خود داشته باشید.

  • طیف رنگ های مختلف:

همان طور که می دانید در نسخه های قبلی از لحاظ انتخاب رنگ بسیار محدود بودیم . خبر خوشی که برای شما داریم این است که در نسخه جدید این فریم ورک یعنی بوت استرپ 5 تنوع رنگی بسیار بیشتر شده است. این امر به دلیل اضافه شدن کلاس هایی مثل bg-opacity ،bg-gradient و کلاس های قبلی در بوت استرپ 4 می باشد.

  • استفاده کتابخانه Sass:

کتابخانه sass یک کتابخانه از سی اس اس می باشد که بر پایه جاوا اسکریپت است.در این کتابخانه می توانیم متغیر تعریف کنیم و از آن ها استفاده کنیم.این کار باعث می شود تا کد های بهینه تری برای استایل بنویسیم.حال این خبر خوب را به شما می دهیم که شرکت توییتر در نسخه پنجم خودش از این کتابخانه استفاده بسیاری کرده استو شما نیز می توانید با فایل های sass که پسوند scss دارند تغییرات مورد نظر خود را به بوت استرپ اضافه کنید.

  • حذف جی کوئری:

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

  • قطع ساپورت اینترنت اکسپلورر:

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

  • بروز کردن فرم کنترل ها:

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

چگونه از بوت استرپ 4 به بوت استرپ 5 مهاجرت کنیم؟

Bootstrap 4 در مقابل Bootstrap 5: تفاوت چیست؟

مهاجرت از ورژن 4 به ورژن 5 در حال حاضر کار صحیحی نیست. باید صبر کنیم تا کمپانی نسخه کامل شده و دیباگ شده را ارائه کند. ولی در کل می توانید با خواندن و درک کردن کلاس های آن به بوت استرپ 5 مسلط شوید. اکنون می توانید با کلیک بر روی bootstrap به سایت بوت استرپ بروید و ورژن های مختلف آن را دانلود کنید.همچنین این را هم برای شما باید توضیح دهیم که نیازی نیست که شما vanilla js یاد بگیرید. صرفا چند خط کد دارد که آن را برای ایجاد انیمیشن ها و رابط کاربری بهتر سایت خود نیاز دارید.که آن هم به صورت آماده در اختیار شما قرار میگیرد.

در نسخه آلفا 1 بوت استرپ 5 برخی از کلاس های حذف شده عبارتند از:

form – row. form – inline. list – inline.

تفاوت بین Bootstrap 4 و Bootstrap 5.

تغییر اصلی
مولد سایت استاتیک
بوت استرپ 4
Bootstrap 4 از نرم افزار Jekyll استفاده می کند.
بوت استرپ 5
بوت استرپ 5 از نرم افزار Hugo استفاده می کند زیرا یک سایت تولید کننده سریع استاتیک است.

7 ویژگی جدید که باید در Bootstrap 5 به آنها توجه کنید

پشتیبانی جی کوئری بوت استرپ دیگر از کتابخانه جی کوئری استفاده نخواهد کرد. …
ویژگی های سفارشی CSS. …
سیستم شبکه بهبود یافته …
اسناد بهبود یافته …
کنترل های فرم بهبود یافته …
Bootstrap 5 Utilities API را اضافه می کند.
کتابخانه نماد بوت استرپ جدید.

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

مقالات مرتبط
شبکه بندی بوت استرپ
راهنمای سیستم شبکه بندی بوت استرپ

آموزش سیستم شبکه بندی در بوت استرپ در این مطلب از مجموعه آموزش های وب یار می خواهیم سیستم شبکه بندی بوت استرپ را آموزش دهیم. با ما همراه باشید و چنانچه پرسشی نسبت به این مبحث دارید می توانید در بخش نظرات سوال خود را مطرح کنید و پاسخ آن را خواهیم داد. شبکه (Grid) چیست؟ با مراجعه به ویکی پدیا تعریف زیر را…

مرجع آموزش بوت استرپ
مرجع آموزش بوت استرپ

مرجع آموزش بوت استرپ : Bootstrap از جمله برنامه های مفید برای طراحی سایت به شمار میرود. بوت استرپ دارای ابزارهای رایگان برای طراحی سایت و نرم افزارهای تحت وب است که حاوی دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد. بوت استرپ 5…

آموزش طراحی ساید بار ریسپانسیو
آموزش  کدهای طراحی سایت رسپانسیو Rsponsive

آموزش  کدهای طراحی سایت رسپانسیو Rsponsive آموزش کدهای طراحی سایت واکنش گرا آموزش کدهای طراحی سایت واکنش گرا,در آموزش امروز با آموزش کدهای طراحی سایت رسپانسیو قسمت  ساید بار سایت از تیم وب یار در خدمت شما هستیم,در این آموزش میخواهیم به شما آموزش دهیم که چگونه شما یک وب سایت ریسپانسیو داشته باشید که ساید بار آن نیز ریسپانسو باشد و در صورت تغییر…