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


منتشر شده در : جمعه, 03 خرداد 98


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

تفاوت بوت استرپ 3 و 4

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

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

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

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

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

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

 استفاده از Flexbox

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

بهبود Grid System

 در بوت استرپ نسخه 4 استفاده از گرید ها نسبت به نسخه قبل بهتر شده است و برخی از ویژگی های جدید گرید سیستم در زیر آمده است :

  • استفاده از 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

media-breakpoint-only()

برای هر کدام از کوئری ها مثال هایی را زدیم:

@media (min-width: 576px) and (max-width: 767.98px) { ... } 

@include media-breakpoint-only(sm) { ... }.

@media (min-width: 768px) and (max-width: 991.98px) { ... } 

@include media-breakpoint-only(md) { ... }.

@media (min-width: 992px) and (max-width: 1199.98px) { ... } 

@include media-breakpoint-only(lg) { ... }.

@media (min-width: 1200px) { ... } 

@include media-breakpoint-only(xl) { ... }.

@media (max-width: 575.98px) { ... } 

@include media-breakpoint-down(xs) { ... }.

@media (max-width: 767.98px) { ... } 

@include media-breakpoint-down(sm) { ... }.

@media (min-width: 576px) { ... } 

@include media-breakpoint-up(xs) { ... }.

@media (min-width: 768px) { ... } 

@include media-breakpoint-up(sm) { ... }.

یک مثال از مدیا کوئری ها با دو عرض :

@media (min-width: 768px) and (max-width: 1199.98px) { ... }

به جای این دستور می توانید از :

@include media-breakpoint-between(md, xl) { ... }

استفاده کنید.

 بهبود پشتیبانی فرم در بوت استرپ 4

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

Sass جایگزین Less 

بوت استرپ نسخه 3 از Less برای دسترسی به فایل css استفاده می کرد اما در ورژن سخه 4 بوت استرپ، از Sass  شده است .

بیشتر طراحان علاقه دارند تا از Sass  استفاده کنند زیرا Sass قابل انعطاف تر و سریعتر می باشد.

کامپوننت Card

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

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

 بوت استرپ ورژن 4 شامل کلاس هایی است که می تواند خیلی سریع فاصله بیرونی یا درونی عنصر را معین کند

مثالی از کاربرد این کلاس ها:

.mt-3 {

  margin-top: 3 !important;

{

بهبود Tooltip

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

از دیگر به روز رسانی های بوت استرپ نسخه 4:

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

 در مقاله بعدی ابزار هایی برای مهاجرت به Bootstrap 4 خواهیم گفت.

 


نظر شما: