در این مقاله سعی میشود با تعریف کلی به ویژگی های جدید بوت استرپ۵ | 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 OF	BOOTSTRAP 4	BOOTSTRAP 5
Grid System	(xs, sm, md, lg, xl)	(xs, sm, md, lg, xl, xxl)
Color	رنگ های محدودی دار	رنگ های اضافی به ظاهر اضافه شده است، پالت رنگی کارت بهبود یافته است. سایه های مختلفی برای انتخاب وجود دارد.
Jquery	دارای jquery و تمامی پلاگین های مرتبط است	Jquery حذف شده و با چند پلاگین فعال به vanilla JS تغییر مکان داده است
Internet Explorer	Bootstrap 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 Generator	Bootstrap 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>

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

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