نسخه stable و نهایی بوت استرپ 4 منتشر شد. در این مقاله به بررسی تغییرات و امکانات اضافه شده به بوت استرپ 4 می اندازیم.
فهرست عناوین مقاله
- 1 خبر خوش برای مهاجرت از بوت استرپ 3 به بوت استرپ 4
- 2 تغییر از Less به Sass
- 3 بهبود grid system مبتنی بر “rems”
- 4 جایگزین panel و wells با cards
- 5 Reset Component جایگزینی برای normalize.css
- 6 قابلیت سفارشی سازی مدرن
- 7 توقف پشتیبانی از IE8 و IE9
- 8 پلاگین‌های جاوا اسکریپت در بوت استرپ 4 بازنویسی شده اند
- 9 بهبود مکان قرارگیری خودکار tooltip و popover
- 10 منبع آموزش بوت استرپ 4
خبر خوش برای مهاجرت از بوت استرپ 3 به بوت استرپ 4
در هنگام ارائه نسخه 3 bootstrap ، پشتیبانی از نسخه 2 قطع شد اما بوت استرپ 4 از بوت استرپ 3 پشتیبانی می‌کند و توسعه دهندگان می‌توانند بدون نگرانی می توانند کتابخانه های خود را به بوت استرپ 4 آپدیت کنند و به تدریج از امکانات جدید بوت استرپ 4 استفاده کنند.
تغییر از Less به Sass
در نسخه‌ی جدید، بوت استرپ با پیوستن به جامعه بزرگ SASS، سریع‌تر کامپایل خواهد شد و این به کمک LibSASS اتفاق افتاده است. هر چند در نسخه سه با استفاده از گیت هاب می توانستید این کار را انجام دهید.
بهبود grid system مبتنی بر “rems”
استفاده از سیستم grid همچنان با همان syntax پیشین استفاده می‌شود، اما کمی تغییر در معماری آن به وجود آمده است. برای مثال شما هنوز هم قادر به پیاده سازی سیستم مبتنی بر 12 ستون با استفاده از grid، یا تغییر عرض صفحه با استفاده از container و یا سیستم nested rows هستید.
اما تغییر اصلی بنا به سایز دستگاههای مختلف است. برای مثال در Codepen چگونگی تغییر فونت سایز و سپس تغییر container را مشاهده می‌کنید. تا کنون شما قطعا از px، em و pt برای تغییر ابعاد استفاده کرده‌اید. در bootstrap 4 تمام این اندازه‌ها مبتنی بر واحدی با نام rem است. این مفهوم خیلی آسان و قابل درک است. به این صورت که با استفاده از rem، تمامی font-sizeها وابسته به root element خواهند شد.
شاید بتوان گفت که مهم‌ترین دلیل این حرکت، ساده‌تر کردن فرایند بزرگ و کوچک کردن scale برای دستگاههای مختلف است. شما به سادگی قادرید که HTML tag را به سایز کوچک‌تر یا بزرگ‌تر تغییر دهید تا تمامی محتویات نیز به همان مقدار تغییر کنند. البته این نکته قابل توجه است که این تغییر از px به واحد rem تنها شامل font-sizeها نبوده و شامل تمامی scalingها مانند margin، padding و … نیز می‌شود.
جایگزین panel و wells با cards
panel و wells با cards جایگزین شده اند این مجموعه به عنوان یک container محتویات که هم قابل انعطاف و هم قابل توسعه است معرفی شده است.
list box ها و thumbnail ها نیز در Card قرار گرفته‌اند.
Reset Component جایگزینی برای normalize.css
Normalize در حقیقت یک مجموعه از قوانین CSS مینیفای شده است که تمامی استایل‌های پیش‌فرض مرورگرها را به یک حالت پایدار reset می‌کند. بوت استرپ دیگر از normalize.css استفاده نمی کند.
معمولا همه‌ی مرورگرها یک stylesheet از پیش تعریف شده‌ای دارند که برای وب‌سایت‌هایی که هیچ استایلی ندارند معمولا قابل مشاهده است. به عنوان مثال غالب مرورگرها به صورت پیش‌فرض لینک‌ها را به صورت آبی رنگ با underline نمایش می‌دهند و اینکه یک border خاص به جداول می‌دهند. با استفاده از css reset ها، تمامی استایل‌های از پیش تعیین شده‌ی مرورگرها null می‌شوند. این قابلیت به ما کمک می‌کند که راحت‌تر بتوانیم یک صفحه‌ی cross-browser ایجاد نماییم.
حال اینکه در Bootstrap جدید نوعی دیگر جایگزین Normalize شده است که reboot نام نهاده شده و محتویات آن در GitHub موجود است. به نوعی می‌توان گفت که یک سری base style و resetها در این یک فایل ریخته شده که reboot نام دارد. این امر می‌تواند کمک بسیاری در Customize کردن موارد توسط خود توسعه دهنده کند.
قابلیت سفارشی سازی مدرن
در بوت استرپ 3 تمامی کدهای فانتزی مثل Gradient ، Transition و .. در یک فایل جدا قرار دارد ، اما در بوت استرپ 4 ، تمامی این تنظیمات در متغیر SASS قرار گرفته و برای تغییراتی مانند حذف و یا اعمال آن کد بر روی کلیه صفحات تنها نیاز است یک متغیر را تغییر داده و فایل را مجدداً کامپایل کنید.
توقف پشتیبانی از IE8 و IE9
بوت استرپ 4 دیگر از Internet Explorer 8 و Internet Explorer 9 پشتیبانی نمی‌کند. با حذف این پشتیبانی بوت استرپ توانسته از جدیدترین و بهترین بخش‌های CSS استفاده کند و با استفاده از em و rem سایزبندی بهتری را در متون و نوشتارهای گرافیکی در قالب‌های Responsiveا ایجاد کند.
پلاگین‌های جاوا اسکریپت در بوت استرپ 4 بازنویسی شده اند
تمامی پلاگین‌های جاوا اسکریپت برای استفاده بهتر از امکانات و مزایای بیشتر در بوت استرپ 4 دوباره نویسی شده است.
بهبود مکان قرارگیری خودکار tooltip و popover
در نسخه 4 فریمورک بوت استرپ مکان نمایش خودکار Tooltip و Popover بهتر شده است.
بازنویسی تمام مستندات
تمامی مستندات با Markdown بازنویسی شده‌اند تا به کمک استفاده از برخی پلاگین‌ها نمایش کدها و اجزای زنده کدها بهنیه‌تر استفاده گردد و جستجو در مستندات با سرعت بهتری صورت پذیرد.
منبع آموزش بوت استرپ 4
دوره آموزشی کامل برای یاد گیری پروژه محور بوت استرپ 4 را در این لینک، آموزش بوت استرپ 4 ببینید.
پکیج تخصصی آموزش Front End با تدریس استاد احمد هادیزاده با بیش از 58 ساعت ویدیو آموزشی به شما کمک می‌کند تا به صورت تخصصی و پروژه محور، مهارت‌های برنامه نویسی فرانت اند را یاد بگیرید. در این دوره هرآنچه برای تبدیل شدن به یک برنامه نویس فرانت اند نیاز دارید، آموزش داده می‌شود. مسیری درخشان به سوی مهارت های حرفه ای برای طراحی وب سایت های جذاب و کاربرپسند را با شرکت در این دوره تجربه کنید.
