×
خانه » آموزش ها » ویژگی های جدید بوت استرپ ۴
23 ژانویه 2020

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

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

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

۱- حذف Normalize و جایگزین شدن Reboot

قبل از نسخه ۴ از N برای ارائه ظاهری سازگار از عناصر Html استفاده می شد در Bootstrap 4 تیم بوت استرپ تصمیم گرفت از Reboot به جای No استفاده کند.

۲- تغییر پشتیبانی از مرورگر ها

بوت استرپ v4.0 در حال حاضر از اینترنت اکسپلورر ۱۰+ و iOS 7+ پشتیبانی می کند. علاوه بر این، پشتیبانی رسمی برای آندروید v5.0 Browser Lollipop و WebView اضافه شده است. متاسفانه، پشتیبانی از IE8، IE9 و iOS 6 کاهش یافته است. اگر شما در حال ساخت برنامه هایی هستید که نیاز به پشتیبانی از این نسخه های مرورگر دارند، از Bootstrap v3 استفاده کنید.

۳- استفاده از Flexbox

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

۴- بهبود Grid System

در بوت استرپ نسخه ۴ استفاده از گرید ها نسبت به نسخه قبل بهتر شده است. برخی از ویژگی های جدید گرید سیستم :
استفاده از flexbox
پشتیبانی از کلاسهپ ها و تراز بندی عمودی و افقی.
تغییرات در media queries
تغییر کلاس col-xs به col

۵- Media کوئری Steriods

فرمت screen در Bootstrap 4 وجود ندارد کنید: حالا می توانید از media کوئری ها استفاده کنید مانند مثال زیر:
@media (min-width: 576px) { … }
مدیا کوئری های جدید عبارتند از :
media-breakpoint-up(), media-breakpoint-down(), media-breakpoint-between, or media-breakpoint-only()
برای هر کدام از کوئری ها مثال هایی را زدیم:
@media (min-width: 576px) and (max-width: 767.98px) { … } can be used as @include media-breakpoint-only(sm) { … }.
@media (min-width: 768px) and (max-width: 991.98px) { … } can be used as @include media-breakpoint-only(md) { … }.
@media (min-width: 992px) and (max-width: 1199.98px) { … } can be used as @include media-breakpoint-only(lg) { … }.
@media (min-width: 1200px) { … } can be used as @include media-breakpoint-only(xl) { … }.
@media (max-width: 575.98px) { … } can be used as @include media-breakpoint-down(xs) { … }.
@media (max-width: 767.98px) { … } can be used as @include media-breakpoint-down(sm) { … }.
@media (min-width: 576px) { … } can be used as @include media-breakpoint-up(xs) { … }.
@media (min-width: 768px) { … } can be used as @include media-breakpoint-up(sm) { … }.
یک مثال از مدیا کوئری ها با دو عرض :
@media (min-width: 768px) and (max-width: 1199.98px) { … }
به جای این دستور می توانید از :
@include media-breakpoint-between(md, xl) { … }
استفاده کنید.

۶- بهبود پشتیبانی فرم در بوت استرپ ۴

کلاس های فرم و چک باکس و اینپوت ها نسبت به ورژن ۳ تغییراتی را داشته و کلاس هایی اضافه یا کم شده است.

۷-Sass جایگزین Less

بوت استرپ نسخه ۳ از Less برای دسترسی به فایل css استفاده می کرد اما در ورژن سخه ۴ بوت استرپ از Sass شده است .
بیشتر طراحان علاقه دارند تا از Sass استفاده کنند زیرا Sass قابل انعطاف تر و سریعتر می باشد.

۸- کامپوننت Card

بوت استرپ از Card ها به جای panel ها استفاده می کند و Card ها قابل انعطاف و کاربردی تر می باشد و Card ها دارای عرض خاصی نیستند، به طوری که به صورت پیش فرض ۱۰۰٪ هستند و با css سفارشی می توانید آن را تغییر دهید.

۹- ابزار های فاصله {margin or padding}

بوت استرپ ورژن ۴ شامل کلاس هایی است که می تواند خیلی سریع فاصله بیرونی یا درونی عنصر را معین کند
مثالی از کاربرد این کلاس ها:
.mt-3 {
margin-top: 3 !important;
{

۱۰- بهبود Tooltip

بوت استرپ ورژن ۴ به جای Tether.js از Popper.js استفاده می کند که کار بسیار خوبی است.

از دیگر به روز رسانی های بوت استرپ نسخه ۴:
اندازه font-size از ۱۴px به ۱۶px افزایش یافته است.
واحد اصلی CSS در حال حاضر به جای px از rem استفاده می کند. با این حال، پیکسل ها به طور گسترده ای برای نمایش media queries استفاده می شود.
بوت استرپ ۴ از فونت آیکون Glyphicons استفاده نمی کند و گزینه های پیشنهادی fontAwesome و Octicons هستند.
این ورژن همچنین از کتابخانه جی کوئری Affix استفاده نمی کند و گزینه پیشنهادی این نسخه position:sticky polyfill می باشد.
در ورژن جدید به جای فونت های قبلی از system fonts استفاده می کند.
در مقاله بعدی ابزار هایی برای مهاجرت به Bootstrap 4 خواهیم گفت.

علیرضا

یک وردپرس کار دوست داشتنی :)

پاسخی بگذارید

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