Bootstrap یکی از مهم‌ترین لایبرری‌های طراحی صفحات وب است که توسعه‌دهندگان فرانت‌اند زیادی از آن استفاده می‌کنند. پس از عرضهٔ نسخهٔ ۴ از این لایبرری محبوب، یکسری فیچرهای جدیدی به آن افزوده شده است که در این مقاله قصد داریم آن‌ها را مورد بررسی قرار دهیم.
در ژانویهٔ سال ۲۰۱۸، نسخهٔ چهارم بوت‌استرپ پس از دو سال به سر بردن در نسخهٔ آلفا معرفی شد که تغییرات زیادی را به همراه دارد. در واقع، علاوه بر تغییراتی که در پشت‌پرده هستند، توسعه‌دهندگان با تغییرات زیادی در ظاهر آن نیز مواجه شده‌اند که در این مقاله سعی بر آن داریم تا بزرگ‌ترین تغییرات نسخهٔ چهارم بوت‌استرپ نسبت به نسخهٔ سوم را بررسی نماییم (البته برای درک کامل این مقاله، دانش ابتدایی بوت‌استرپ لازم است).
دکمه‌های مجلل‌تر
با قابلیت جدید و کاربرپسند بوت‌استرپ شروع می‌کنیم. دکمه‌ها در نسخهٔ چهارم بوت‌استرپ ظاهر جذاب‌تری نسبت به نسخه‌های قبل دارند. در واقع، می‌توان گفت که این نوع طراحی، به وب‌سایت‌ها حال و هوای طراحی متریال‌دیزاین را خواهد داد.
بهبود مدیا کوئری
نسخهٔ سوم بوت‌استرپ مشکلاتی برای کنترل گرید داشت. به طور مثال، یکی از نمونه‌هایی که باعث ایجاد مشکلاتی برای توسعه‌دهندگان می‌شد این بود که کوچک‌ترین مقدار xs برابر با 768 پیکسل می‌شد؛ اما بیشتر کاربران از دیوایس‌هایی استفاده می‌کنند که قادر به نمایش این اندازه نیست!
اکنون تیم توسعهٔ بوت‌استرپ برای این مشکل راه‌حلی در نظر گرفته است که عبارت است از xl. این دقیقاً نقش lg را دارد به طوری که الباقی آیتم‌ها را به پایین هدایت کرده و این طیف اندازه تا مقدار 576 پیکسل ادامه دارد.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;این ساختار کنترل گرید را آسان‌تر می‌سازد و در تمامی صفحات وب به درستی نمایش داده می‌شود.
انعطاف‌پذیری بیشتری با پشتیبانی از فلکس‌باکس
گریدهای معروف بوت‌استرپ از این به بعد به جای Float، با Flexbox ساخته می‌شوند. از آنجایی که بیشتر لی‌اوت‌های گرید به طور یکسانی کار می‌کنند، در نگاه اول این تغییر برای دولوپرها زیاد محسوس نیست، اما به هر حال امکانات جدیدی را برای ایشان به ارمغان می‌آورد.
در نسخه‌های قبل، باید برای هر ستون یک عرض مشخص از 1 تا 12 انتخاب می‌شد اما اکنون می‌توان یک عرض تعیین کرد و توسط فلکس‌باکس آن را برای بقیه ستون‌ها اعمال کرد. به عنوان نمونه داریم:
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>همان‌طور که در مارک‌آپ فوق مشاهده می‌کنید، تنها عرضِ ستون وسط برابر با 6 قرار داده شده (که نصف عرض کامل است) و به راحتی بقیهٔ ستون‌ها خود را با فضای باقی مانده وفق داده‌اند.
کلاس‌های فلکس‌باکس
نسخهٔ چهارم بوت‌استرپ با کلاس‌هایی همراه شده است که به همراه آن‌ها، هم می‌توان آیتم‌ها و هم ستون‌های فلکس‌باکس را کنترل کرد. برای تبدیل اِلمنت‌ها به کانتینر فلکس‌باکس، تنها لازم است که از کلاس d-flex استفاده کنید:
<div class="d-flex">I'm a flexbox container!</div> حال بیاییم چند آیتم و کلاسی که نحوهٔ قرار گرفتن آن‌ها را در کانتینر معین می‌کند نیز تعریف کنیم:
<div class="d-flex justify-content-center">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>همچنین می‌توانید به خود آیتم‌ها نیز کلاس اضافه کنید.
کنترل فاصله‌ها بوسیلهٔ کلاس
شما می‌توانید پدینگ و مارجین را از طریق کلاس‌های *-p و *-m کنترل کنید که محدودهٔ آن 0 تا 5 می‌باشد که برابر است با دو و نیم تا سه rem (به عبارتی، پدینگ فاصلهٔ داخلی آیتم و مارجین فاصله آیتم با بیرون را مشخص می‌کند). به عنوان مثال، بیایید برای دادن بیشترین حد پدینگ به کانتینر فلکس‌باکس، از کلاس p-5 استفاده کنیم:
<div class="d-flex p-5">I'm a flexbox container!</div>همچنین برای دادن فاصله در قسمت‌های مشخص کادر (بالا، پایین، چپ و راست)، می‌توان از t ،b ،r یا l استفاده کرد:
<div class="d-flex pl-5">I'm a flexbox container!</div>
این کد تنها بر فاصله‌ها را بر سمت چپ اعمال می‌کند.
مهاجرت از px به rem
نسخهٔ چهارم بوت‌استرپ، در همه‌جا به جز مدیا کوئری‌‌ها و گریدها، واحد px را با rem جایگزین کرده است. این به معنی راحتی و انعطاف‌پذیری می‌باشد زیرا واحد px قطعی و ثابت می‌باشد در صورتی که rem بستگی به دیوایس شخص دارد و هرگز ثابت نیست (به صورت پیش‌فرض، یک rem برابر با شانزده px است).
به‌وسیلهٔ rem، تمامی فونت‌سایز‌ها وابسته به اِلِمنت اصلی یا همان تگ <html></html> می‌شوند؛ مثلاً اگر فونت‌سایز را در اِلِمنت اصلی صفحه به 50٪ کاهش دهید، 1 رِم برابر با 8 پیکسل می‌شود.
جایگزینی Card به جای Panel، Well و Thumbnail
بوت‌استرپ عضو جدیدی به نام Card به همراه دارد که جایگزین Panel، Well و Thumbnail می‌شود. می‌توان گفت که کارت‌ها، کانتینرهایی هستند که انعطاف‌پذیرند؛ همچنین کارت‌ها گزینه‌هایی برای کنترل هِدر و فوتر، محدوده‌ای بالا از متن و رنگ پس‌زمینه به همراه دارند.
خداحافظی با IE9
بوت‌استرپ نسخهٔ ۴ از IE8 و IE9 و نسخهٔ ششم iOS پشتیبانی نمی‌کند و برای استفاده از آن باید به IE10 و نسخهٔ هفتم و بالاتر iOS مجهز باشید. این به معنی آن است که اگر نیاز دارید تا سایت شما در IE8 و یا IE9 به نمایش درآید، مجبور به استفاده از بوت‌استرپ نسخهٔ سوم هستید.
