در این مقاله سعی میشود با تعریف کلی به ویژگی های جدید بوت استرپ۵ | bootstrap5 بپردازیم.
این یک چارچوب متن باز از اواخر سال ۲۰۱۱ است که برای طراحی وب سایت های واکنش گرا با رویکرد اول موبایل سریعتر و آسان تر استفاده می شود.
بوت استرپ برای HTML، CSS و JS در دسترس است. با توجه به زبان های سمت سرور مانند PHP، Node و غیره، بوت استرپ به طراحی ظاهری کمک می کند.
بوت استرپ با آماده کردن قالب هایی که بخش اصلی هر وب سایت هستند، کار را برای توسعه دهندگان آسان تر کرده است.
بوت استرپ یک چارچوب توسعه وب قدرتمند و محبوب است که توسط میلیون ها توسعه دهنده در سراسر جهان استفاده می شود. این مجموعه قدرتمندی از ابزارها و منابع را برای کمک به توسعه دهندگان برای ایجاد سریع وب سایت ها و برنامه های کاربردی تلفن همراه ارائه می دهد.
در این مقاله، ویژگیهای بوت استرپ، مزایای آن و اینکه چگونه میتواند به توسعهدهندگان کمک کند تا برنامههای وب مدرن را سریعتر ایجاد کنند را بررسی خواهیم کرد. ما همچنین در مورد برخی از مشکلات رایج که هنگام استفاده از Bootstrap باید مراقب آنها باشید صحبت خواهیم کرد. در نهایت، ما به چند مورد استفاده محبوب برای پروژه های توسعه بوت استرپ نگاه خواهیم کرد.
دیگر ویژگی مهم این سیستم، رایگان بودن آن و دسترسی سریع از طریق سایت www.getbootstrap.com میباشد.
بوت استرپ ۵ آلفا در اواسط ژوئن ۲۰۲۰ راه اندازی شد. (در نسخه های آلفا، برخی ویژگی ها میتوانند در آینده به سیستم اضافه شوند.)
مهمترین تغییر در بوت استرپ ۴ تغییر کردن ستون ها از ساختار 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>
در قسمت نظرات میتوانید سوالات خود را بپرسید و این مقاله را با دوستانتان به اشتراک بگذارید. موفق باشید♥
امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.