امکانات جدید در بوتسترپ ۴

دسته: مقالات
738 بازدید
چهارشنبه ۸ مهر ۱۳۹۴
امکانات جدید در بوتسترپ ۴Reviewed by جواد نبوی on Sep 30Rating: 4.5

بوتسترپ یکی از دوست داشتنی ترین فریم ورک های CSS است. به همین دلیل وقتی سازندگان بوتسترپ خبر از انتشار نسخه بعدی یعنی نسخه ی  ۴ آن دادند, طراحان و توسعه دهندگان وب در سراسر جهان به شدت خوشحال شدند.

در ۱۹ آگوست ۲۰۱۵ بوتسترپ ۴ آلفا با حذف قابلیت پشتیبانی از اینترنت اکسپلورر ۸ منتشر شد. البته احتمالا آن ها قبل از انتشار نسخه بتا, دو نسخه آلفا منتشر خواهند کرد. اما این نسخه به ما یک نگاه اجمالی میدهد که باید انتظار چه تغییراتی را در نسخه های بعدی داشته باشیم.

به هر حال, بوتسترپ ۴ آلفا برپایه SCSS خواهد بود. خوب است. نه؟

اگر یادتان باشد بوتسترپ ۱ امکانات خاصی نداشت. قابلیت های آن تنها به شبکه بندی ها, تایپوگرافی و لیست ها محدود می شد و تا زمان ارائه بوتسترپ ۲ کاملا واکنشگرا نبود.

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

امکانات جدید در بوتسترپ ۴ حتما شما را شگفت زده خواهد کرد. اگر میخواهید بوتسترپ ۴ را به آسانی بیاموزید اینجا را کلیک کنید. در این مطلب از وب تستر به بررسی مهمترین امکانات جدید در بوتسترپ ۴ می پردازیم. با ما همراه باشید.

انتقال از Less به Sass

یکی از بزرگترین تغییرات در بوتسترپ ۴, نقل مکان از Less به Sass است. بوتسترپ ۳ در زمان انتشارش از Less استفاده کرده بود, اگر چه نسخه ی جداگانه ای با استفاده از Sass منتشر شده بود. دلیل این تغییر اینست که Sass اجتماع عظیمی از کاربران را دارد و بسیار سریعتر است.

گزینه های سفارشی جدید Sass

امکانات جدید در بوتسترپ 4

در بوتسترپ ۴ همه ی گزینه های متغیر transition ها, گرادینت ها و … به یک فایل جداگانه منتقل شده اند و با استفاده از متغیر های Sass امکان شخصی سازی آنها وجود دارد.

برای مشاهده تمام گزینه هایی که قابلیت شخصی سازی دارند می توانید اینجا را مشاهده کنید.

سیستم شبکه بندی پیشرفته تر

در بوتسترپ ۳ کلاس های مختلفی برای هدفگیری عناصر در صفحات با سایز های مختلف بر اساس پیکسل وجود دارد. اما در بوتسترپ ۴ یک ردیف جدید کوچکتر با نام (sm-) برای هدفگیری بهتر صفحات گوشی های موبایل وجود دارد. اکنون این کلاس ها بر اساس واحد rem (برای تایپوگرافی) و em به جای پیکسل تعریف شده اند.

برای درک بهتر جدول مقایسه ای زیر را مشاهده کنید:

امکانات جدید در بوتسترپ 4

کاهش پشتیبانی از Internet Explorer 8

بوتسترپ ۴ آلفا پشتیبانی کمتری از اینترنت اکسپلورر ۸ دارد. یکی از بزرگترین مشکلات با IE8 عدم پشتیبانی از دستورات media در CSS است. دستورات media نقش مهمی در اجرای طراحی واکنشگرا در فریم ورک ایفا می کند.

هماهنگ سازی طرح با مرورگر های قدیمی مشکلات زیادی را برای توسعه دهندگان به وجود می آورد. و این یک حرکت بزرگ است. اگر پشتیبانی از IE8 برای شما مهم است پس همچنان از بوتسترپ ۳ استفاده کنید.

فونت های Glyphicon کاهش یافته اند

بوتسترپ ۳ دارای بیش از ۱۲ آیکون قابل استفاده برای اهداف مختلف است. اما درمورد بوتسترپ ۴ هنوز چیز مشخصی نمیدانیم. زمان همه چیز را مشخص می کند.

پشتیبانی توکار از Flexbox

امکانات جدید در بوتسترپ 4

Flexbox هم ترازی عمودی محتوای درون یک عنصر والد با ستون های با ارتفاع برابر را فراهم می کند. اگر میخواهید در مورد Flexbox بیشتر بدانید اینجا را بخوانید.

مراحل فعال کردن Flexbox در بوتسترپ ۴:

  1. فایل scss را باز کرده و متغیر بولین enable-flex$ را پیدا کنید.
  2. مقدار false را به true تغییر دهید.
  3. کامپایل کنید تا همه ی کامپوننت های شبکه بندی به حالت Flexbox درآیند.

ویژگی جدید Card

امکانات جدید در بوتسترپ 4

Card ها یکی از مهمترین امکانات جدید در بوتسترپ ۴ آلفا هستند که میتوانند اطلاعات را به عنوان page یا container نمایش دهند. این قابلیت جایگزین panel ,well و thumbnail است. Card از انواع مختلفی از محتوا از جمله لینک, متن, تصویر, هدر, فوتر و … با رنگ های پس زمینه مختلف پشتیبانی می کند.

Reboot.css به جای Normalize.css

اگر از بوتسترپ ۳ استفاده می کردید احتمالا متوجه شدید که در بوتسترپ ۳ از Normalize.css به عنوان فایل CSS reset استفاده میشد. اما در ورژن ۴ این فریم ورک, از Reboots.css استفاده می شود.

Reboot.css مجموعه ای از عناصر CSS است که پایگاهی را برای استایل ها با گزینشگرهای عناصر فراهم میکند. در واقع این فایل یک فایل Sass میباشد که گزینشگر های مختلف CSS را دربردارد.

بهبود یافتن قرار گرفتن Tooltip ها Popover ها در مکان خود به صورت خودکار

امکانات جدید در بوتسترپ 4

با استفاده از ابزار Tether این قابلیت بهبود یافته است.

اگر میخواهید از آن استفاده کنید کافیست کتابخانه tether.min.js را قبل از کتابخانه bootstrap.js به پروژه تان اضافه کنید.

پیشرفته تر شدن دستورات Media

در بوتسترپ ۳ دستورات media از واحد پیکسل جهت واکنشگرا کردن طرح استفاده می کردند. اما در بوتسترپ ۴ آلفا به جای پیکسل از واحد em استفاده می شود.

CSS
// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }
// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }
// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }
// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

کلاس جدید ‘Inverse’ برای جداول

بوتسترپ ۴ آلفا کلاس جدید inverse- دارد که یک پس زمینه به جدول می دهد. برای استفاده نگاهی به کد زیر بیاندازید.

HTML
<table class="table table-inverse">
<thead>
<tr>
<th>Label 1</th>
<th>Label 2</th>
<th>Label 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</tbody>

پلاگین های جاوااسکریپت بازنویسی شده اند

برای افزایش قدرت بوت استرپ ۴ آلفا تمامی پلاگین ها در ES6 طوری بازنویسی شده اند که از UMD , متد ها و گزینه های دیگر پشتیبانی کنند.

در پایان

انتظار ویژگی های جدید زیادی از بوت استرپ ۴ می رود. یادتان نرود که این تنها ورژن آلفای بوتسترپ است و مطمئنا ورژن بتای آن امکانات بیشتری از این خواهد داشت.

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

آیا تاکنون از بوتسترپ ۴ آلفا استفاده کرده اید؟ تجربیاتتان را در بخش دیدگاه ها با ما در میان بگذارید.

لینک های بوتسترپ ۴ آلفا:

تبلیغات

نویسنده (مدیر سایت)

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

پاسخ دهید

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