دوره های پرنیان

ویژگی های جدید بوت استرپ۵ | bootstrap5

ویژگی های جدید بوت استرپ۵ | bootstrap5

در این مقاله سعی میشود با تعریف کلی به ویژگی های جدید بوت استرپ۵ | bootstrap5 بپردازیم.

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

این یک چارچوب متن باز از اواخر سال ۲۰۱۱ است که برای طراحی وب سایت های واکنش گرا با رویکرد اول موبایل سریعتر و آسان تر استفاده می شود.

بوت استرپ برای HTML، CSS و JS در دسترس است. با توجه به زبان های سمت سرور مانند PHP، Node و غیره، بوت استرپ به طراحی ظاهری کمک می کند.

بوت استرپ با آماده کردن قالب هایی که بخش اصلی هر وب سایت هستند، کار را برای توسعه دهندگان آسان تر کرده است.

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

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

دیگر ویژگی مهم این سیستم، رایگان بودن آن و دسترسی سریع از طریق سایت www.getbootstrap.com میباشد.

بوت استرپ ۵ آلفا در اواسط ژوئن ۲۰۲۰ راه اندازی شد. (در نسخه های آلفا، برخی ویژگی ها میتوانند در آینده به سیستم اضافه شوند.)

ویژگی flex از بوت استرپ۴ به بعد

مهمترین تغییر در بوت استرپ ۴ تغییر کردن ستون ها از ساختار Float به ساختار Flex بود که می توان گفت درصد بالایی از محدودیت ها در ستون بندی و همچنین چینش را از میان برداشت.

میدانید که فلکس چقدر قدرتنمند است و ستون بندی های ما در بوت استرپ را بسیار ساده و کاربردی کرده است.

بطور مثال در ورژن۳ و قبل که از ساختار float استفاده میشد، مانمیتوانستیم ۵ ستون کنار هم بندازیم، اما از زمان بکار گیری flex، این کار به سهولت قابل انجام است.

پس میتوان استفاده از ساختار فلکس از ورژن ۴ به بعد را انقلابی در بوت استرپ دانست.

ویژگی های جدید در بوت استرپ ۵

اما بریم سراغ ویژگی های جدید بوت استرپ۵ | bootstrap5

اضافه شدن نسخه راست به چپ ، یکی از مزیت های فوق العاده بود که تا نسخه بوت استرپ ۴ با این ویژگی مشکل داشتیم و ظهور نسخه RTL داخل خود بوت استرپ ۵ یک مزیت فوق العاده بود .

همچنین یکی از بخش هایی که در بوت استرپ ۵ به شدت به چشم خورد ، قسمت Bootstrap Icons بود که بوت استرپ در نسخه ۴ فونت آیکون ها را حذف کرد اما در نسخه ۵ مجدد با قدرتی بیشتر فونت آیکون ها را در قالب بوت استرپ آیکون معرفی کرد.

این فونت آیکون ها بسیار قدرتمند و قابل رقابت با سیستم های آیکون مشابه هستند.

یکی دیگر از مهمترین تغییرات، اضافه شدن گرید های بزرگتر از ۱۴۰۰ یا  XXl یا همان Extra Extra Large بود.


Extra small
<576px
Small
≥۵۷۶px
Medium
≥۷۶۸px
Large
≥۹۹۲px
Extra Large
≥۱۲۰۰px
XXL
≥۱۴۰۰px

در ورژن۴ روی موبایل های کوچک (۵۷۶px) کار شده بود و در ورژن ۵ روی دیوایس های بزرگ. این نشانه از بهبود سیستم grid bootstrap و اهمیت این موضوع است.

از شما دعوت میکنیم تا با مطالعه جدول زیر به تمام تفاوت های موجود بین بوت استرپ ۴ و ۵ پی ببرید.

BASIS OFBOOTSTRAP 4BOOTSTRAP 5
Grid System(xs, sm, md, lg, xl) (xs, sm, md, lg, xl, xxl)
Colorرنگ های محدودی داررنگ های اضافی به ظاهر اضافه شده است، پالت رنگی کارت بهبود یافته است. سایه های مختلفی برای انتخاب وجود دارد.
Jqueryدارای jquery و تمامی پلاگین های مرتبط استJquery حذف شده و با چند پلاگین فعال به vanilla JS تغییر مکان داده است
Internet ExplorerBootstrap 4 از هر دو IE 10 و ۱۱ پشتیبانی می کندبوت استرپ ۵ از IE 10 و ۱۱ پشتیبانی نمی کند
Form elementsدکمه های رادیویی، چک باکس ها در سیستم عامل ها و مرورگرهای مختلف ظاهر متفاوتی دارند. این فرم از هر آنچه مرورگرهای پیش فرض ارائه می کنند استفاده می کند.ظاهر عناصر فرم در سیستم عامل ها یا مرورگرهای مختلف تغییر نخواهد کرد. فرم ها را می توان سفارشی کرد و کنترل های فرم را می توان اضافه کرد، آنها به مرورگر بستگی ندارند.
Utilities APIما نمی توانیم ابزارهای کمکی را در بوت استرپ ۴ تغییر دهیمبوت استرپ ۵ آزادی تغییر و همچنین ایجاد ابزار خود را دارد
Gutterما از gutter با اندازه فونت در px استفاده می کنیم ما از gutter با اندازه فونت در rem استفاده می کنیم
***** ***** *****
Bootstrap Iconsبوت استرپ ۴ آیکون های SVG خود را ندارد، ما باید از فونت برای آیکون ها استفاده کنیمبوت استرپ ۵ آیکون های SVG خود را دارد
Jumbotronپشتیبانی می کنداز jumbotron پشتیبانی نمی کند
**** **** ****
Navbarما دارای ویژگی inline-block هستیم و برای کلاس dropdown-menu-dark یک کشویی سفید به عنوان پیش فرض دریافت می کنیمویژگی Inline-block حذف می‌شود و برای کلاس dropdown-menu-dark به‌عنوان پیش‌فرض، کشویی مشکی دریافت می‌کنیم
Static Site GeneratorBootstrap 4 از نرم افزار Jekyll استفاده می کندبوت استرپ ۵ از نرم افزار Hugo استفاده می کند زیرا یک سایت تولید کننده سریع استاتیک است
flexbox gridاین امر اجرای طرح های عمودی را آسان تر می کند و ستون ها و ردیف ها را می توان به راحتی پیاده سازی کرد. کلاس ها justify-content-center را می توان مستقیماً برای تراز کردن مطابق با نیاز استفاده کرد.سیستم شبکه پیشرفته در دسترس است

بهترین راه برای نصب بوت استرپ۵

همواره استفاده از CDN های معتبر، بهترین روش برای استفاده از کتابخانه های معروف هستند. پس برای این نسخه کاربردی بوت استرپ میتوانید از سی دی ان های زیر استفاده کنید.

<!– Latest compiled and minified CSS –>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css” rel=”stylesheet”> <!– Latest compiled JavaScript –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js”></script>

در قسمت نظرات میتوانید سوالات خود را بپرسید و این مقاله را با دوستانتان به اشتراک بگذارید. موفق باشید♥

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کلاس طراحی سایت