این روزها Bootstrap به یک Framework خیلی محبوب برای طراحی وب سایت های رسپانسیو تبدیل شده است. تقریبا چیزی به منتشر شدن نسخه اصلی Bootstrap 4 Beta نمانده است و زمان این رسیده که کمی به جزئیات ماجرا برویم .برای طراحی پروژه هایی که از Bootstrap 3 استفاده می کنند، ما می خواهیم به نسخه جدیدتر مهاجرت کنیم.

Bootstrap 4 نزدیک به 2 سال است که در حال طراحی است و همچنان موضوعات کوچکی مانده است تا به نسخه پایدار برسد. با این حال، همان طور که نزدیک به منتشر شدن نسخه جدید هستیم، ما می توانیم با اطمینان لیست برخی از تغییرات را برای مهاجرت از نسخه 3 به 4 مشخص کنیم. در نسخه جدید Bootstrap مهاجرت نباید ساده و پیش پا افتاده باشد. بر خلاف نسخه قدیمی، اینبار Bootstrap با SASS (Syntactically Awesome Stylesheets) نوشته شده است. این یک خبر واقعا بد هست برای کسانی که خیلی زیاد از Bootstrap 3 استفاده کرده اند.

تغییر بزرگ دیگری که انجام شده است کامپوننت هایی است که از Bootstrap 4 پشتیبانی می کنند – یا، در حقیقت آن هایی که دیگر در حال حاضر پشتیبانی نمی کنند. به عنوان مثال نسخه Alpha 4، Bootstrap دیگر از Panel ها، Well ها، Thumbnail ها پشتیبانی نمی کنند. در غیر این صورت، این موارد جای گزینه یک مفهوم به نام Cards گرفته اند. Card ها برای این هدف ساخته شده اند که well ها و panel ها را خودتان بسازید. اما این بار به وسیله پشتیبانی کردن از انواع محتوای مختلف مانند لیست ها، عکس ها، header ها و footer ها، محدودیت کمتری دارند. کامپوننت badge همچنین از قلم افتاده است؛ به جای آن نیاز هست تا از کامپوننت label استفاده کنیم.

چه خبر از اتفاقات جدید Bootstrap 4؟

بازنویسی نرمال سازی یا به عبارت دیگر Reboot Normalize

با توجه به تحقیقات در همه عناصر HTML که رفتار نا متناقض در مرورگر ها دارند، Bootstrap 3 از Normalize.css استفاده می کرده است. از طرف دیگر Bootstrap 4 تغییرات جدیدی را به Normalize.css اضافه کرده است و اسم آن را Reboot گذاشتند. (می توانید از این لینک مشاهده کنید: https://v4-alpha.getbootstrap.com/content/reboot/ ). با این حال این تغییر بزرگ، منظور مهاجرات از Normalize به Reboot برای توسعه Bootstrap نکته قابل توجهی نیست که بخواهید نگران باشید.

سیستم Grid:

مانند نسخه قدیمی، هسته Bootstrap 4 از سیستم شبکه ای یا Grid استفاده می کند: یک مجموعه کلاس های css و media query است که برای طرح بندی رسپانسیو صفحه استفاده می شود. با این حال خوشبختانه تغییرات خیلی زیادی در این سیستم نداشتیم. اگرچه چند نکته به آن اضافه شده است و اکثر نام های کلاس ها یکسان است و نقطه قاطع آن از همان 480px است.

علاوه بر درجه بندی های گذشته، اکنون ما 5 نقطه قاطع یا همان BreakPoint داریم.

یک نقطه قاطع خیلی کوچک برای دستگاه هایی که حالت نرمالی را پشتیبانی نمی کنند.

یک breakpoint کوچک دیگر برای گوشی های موبایل در نقطه 544px

یک نقطه برای صفحه نمایش ها با اندازه حداقل 768px برای تبلت ها

یک نقطه برای کامپیوتر های رو میزی و با اندازه 992px

یک نقطه برای کامپیوتر ها با صفحه نمایش های بزرگ 1200px

این نقاط با متغیر $grid-breakponints در _variables.scss ساخته شده اند:

$grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
   // Small screen / phone
   sm: 544px,
   // Medium screen / tablet
   md: 768px,
   // Large screen / desktop
   lg: 992px,
   // Extra large screen / wide desktop
   xl: 1200px
   ) !default;

در نتیجه همه کلاس های غیرفعال سازی این متغیر ها در $enable-grid-classes در داخل فایل _variables.scss طراحی شده اند، همچنین _variable.scss روش جدیدی برای سفارشی سازی Bootstrap پیشنهاد می دهد.

FlexBox

به وسیله تنظیم $enable-flex در داخل فایل _variables.scss، اجازه می دهد تا Flexbox از سیستم شبکه ای، کامپوننت media ها و input group ها استفاده کند. برای کسانی که با Flexbox آشنا نیستند: Flexbox یک مدل طراحی است که اجازه می دهد ساختار پیچیده تری نسبت به سیستم شبکه ای تعریف کنید و اینبار این سیستم توسط خود CSS طراحی شده است نه توسط توسعه دهندگان دیگر.

واحد های اندازه گیری متون یا همان Typographic

واحدهای اندازه گیری متون برای اندازه فونت ها در عناصر صفحه تعیین شده اند. Bootstrap 4 از سیستم اندازه گیری جدیدی نسبت به قبل استفاده می کند و از حالت پیکسلی (px) به استفاده از ریشه یا em (rem) مهاجرت کرده است. استفاده از پیکسل در گذشته یک سری مشکلاتی داشت در امر رسپانسیو شدن، آن هم این بوده است که اگر کاربر فونت مرورگر را بزرگ یا کوچک می کرد، سیستم رسپانسیو به مشکل بر می خورد.  از آنجایی که rem مرتبط است با عنصر ریشه صفحه، سایت هایی که از Bootstrap 4 استفاده می کنند، مقیاس پذیری بیشتری نسبت به گذشته دارند. در نتیجه، اندازه فونت عمومی یا همان global، دو درجه افزایش یافته است و از 14px به 16px رسیده است.

ظاهر و زیبایی

در کنار تغییرات اندازه فونت ها، نگاه کلی و زیبایی Bootstrap 4 تغییری نکرده است. تنها چند تغییر کوچک بر روی اندازه عناصر به وجود آمده است از جمله padding و margin متن های اصلی (primary) و رنگ پس زمینه از #2f79b9 به #0072db تغییر کرده است. Bootstrap 4 همچنین دیگر از Glyphicon ها استفاده نمی کند و با استفاده از framework ساده تر و سبک تر استفاده می کند.

توسعه یافتگی کنترل های فرم

هیجان انگیز ترین تغییراتی که در Bootstrap 4 رخ داده است، رنگ بندی کنترل فرم است. نسخه حال حاضر که Alpha می باشد با اعتبار سنجی ها نمایش داده می شوند که در این صورت بسیاری از افزونه های موجود برای اعتبار سنجی منسوخ می شوند. همچنین تغییر بزرگ دیگری که در این زمینه داریم، تجربه خارج از جعبه است. البته اینبار Bootstrap با ارائه راح حلی زیبا مشکل نمایش Checkbox ها و RadioButton های سفارشی در مرورگرهای مختلف را رفع کرده است.

به وسیله اضافه کردن کلاس custom-control هم custom-checkbox یا custom-radiobutton به عنصر پدر هر عنصر inputی اشاره می کند که پدرش کلاس custom-control-input می باشند. و همچنین شامل یک کلاس custom-control-indicator نیز هستند، Bootstrap باید در شیوه نمایش در مرورگرهای مختلف نیز مطئمن شود.

<label class="custom-control custom-checkbox">
  <input class=“custom-control-input" name="checkbox" type="checkbox" >
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">My checkbox</span>
</label>

Navigation

تغییر بسیار زیبای دیگر در Bootstrap 4، در بخش منوی ثابت صفحه یا همان Navigation است که بسیار ساده تر شده است. درحالیکه منوی ثابت صفحات در Bootstrap 3 از List ها با استفاده از کلاس پایه nav استفاده می کرد و کلاس دیگر کلاسی برای nav-tab ها و مجبور بودید در tab heading آن ها را قرار بدهید. این روش ناآگاهانه باعث می شد تا کلاس ها کثیف و شلخته باشند.

<ul class="nav nav-tabs nav-justified" role="tablist">
  <li role="presentation" class=“active">
    <a href=“#my-id" role="tab" data-toggle=“tab”>Foobar</a>
  </li>
</ul>

درعوض Bootstrap 4 کلاس های جدیدی برای Navigation هایش دارد، این حالت کد ها را راحت تر و واضح شده است.

<ul class="nav nav-tabs nav-justified">
   <li class="nav-item">
       <a href="#my-id" data-toggle="tab" class=“nav-link active">Foobar</a>
    </li>
</ul>

Bootstrap 4 معرفی می کند:

1- کلاس nav-item برای عناصر منو

2- کلاس nav-link برای عناصر لینک در منو

همچنین، آن نیاز به عناصر لینک (anchor) نیاز دارد نه عنصر nav، که مشخص می شد فعال است یا غیر فعال. نکته دیگری که به منو اضافه شده است، ظاهر و استایل آن است: اینبار navbar-dark و navbar-light خواهیم داشت. این دو کلاس به سادگی رنگ منو را به سفید یا مشکی تغییر می دهند، به منظور اینکه از پس زمینه تیره و روشن پشتیبانی کند. این به شما اجازه می دهد تا به راحتی رنگ عنصر منو تان را تغییر دهید.

<nav class="navbar navbar-dark bg-danger">
</nav>
<nav class="navbar navbar-light bg-success“>
<nav>

آخرین اما نه کوچترین، در Bootstrap 4 اینبار استایل جدیدی برای کلید ها داریم: btn-outline-* (منظور از ستاره نوع استایل و ظاهر رنگی آن است.) برای مثال primary button، تبدیل شده است به کلاس btn-outline-primary

لیست های آبشاری یا DropDown ها

بسیار مشابه نسبت به عناصر منو (Navigation) هر لیست آبشاری نیاز دارد به یک کلاس dropdown-item که به آن عنصر اضافه شود. همچنین نماد caret بصورت اتوماتیک به کلید های لیست آبشاری اضافه می شود که برای نشان دهنده آبشاری بودن لیست است.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type=“button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    My Dropdown
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href=“#”>My Menu Item</a>
  </div>
</div>

صفحه بندی یا Pagination

در راستای تغییراتی که به شما معرفی کردیم برای Navigation و Dropdown ها، اینبار می خواهیم درباره تولید کامپوننت pagination صحبت کنیم. برخلاق Bootstrap 3، نسخه جدید نیاز دارد تا دقیقا مشخص شود این لیست برای صفحه بنددی است و عناصر لینک با استفاده از عنصر صفحه و کلاس های page-link شناخته می شوند:

<ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
</ul>

در Bootstrap 4، ما باید حتما نشان دهیم تا عناصر مختلفی از صفحه بندی را قرار دهیم:

<ul class="pagination">
    <li class=“page-item”><a class=“page-link” href="#">1</a></li>
    <li class=“page-item”><a class=“page-link” href="#">2</a></li>
</ul>

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

Bootstrap 4 از همه مرورگر های معروف از جمله Chrome، Safari، Opera و نسخه های دیگر IE البته نسخه های بالاتر از 8 را پشتیبانی می کند.

نکات تغییر نام کلاس ها

علاوه بر مسائلی که تاکنون صحبت کردیم، ویژگی هایی اضافه شده اند و برخی حذف و یا تغییر کرده اند. گروه توسعه دهنده Bootstrap 4 Alpha اینبار مجموعه ای از کلاس ها را معرفی کردند که باید به آن ها برای مهاجرت از نسخه قدیمی به جدید دقت کنید:

نام کلاس btn-default به btn-secondary تغییر یافته است.

کلید های بسیار کوچک (Extra small buttons) دیگر وجود ندارند، درواقع دیگر چیزی به نام btn-xs وجود ندارد. به همین ترتیب کلیدهای گروهی یا button groups دیگر وجود ندارند همچنین btn-group-xs ها نیز نیستند.

کلاس جدا کننده برای dropdown ها به dropdown-divider تغییر نام داده است.

در نسخه جدید navbar-form نیز حذف شده است.

کلاس label به tag تغییر نام داده است.

عنصر carousel به carousel-item تبدیل شده است

ستون های offset نیز تغییر کرده اند. از  .col-*-offset-** به offset-*-** به روز رسانی داده شده اند. برای مثال col-md-offset-2 به offset-md-2 تبدیل شده است. به صورت مشابه برای عناصر push و pull هم همین تغییرات مشابه انجام شده است.

پلاگین ها

هیچ تغییر شگفت آور یا شدیدی در اینکه چطور پلاگین ها نوشته شده اند، وجود ندارد: به عنوان مثال Bootstrap 3، پلاگین هایش به دو فایل مجزا تبدیل می شده است. یکی برای جاوا اسکریپت، دیگری قوانین ظاهری آن در قالب CSS جای می گرفت. برای نمونه، پلاگین کلید شامل bootstrap/js/src/button,js و bootstrap/scss/mixins/_buttons.scss بوده است. در لحظه ای که Bootstrap کامپایل یا ترجمه می شوند آن ها بخشی از bootstrap توزیع پذیر تبدیل می شوند، و به عنوان مثال کاربر نهایی می تواند کمی زمان بگذارد و دیگر نگران آن ها نباشد.

فایل جاوا اسکریپت بصورت معمول شامل کلاسی بود که پلاگین فعلی و پیاده سازی data API که DOM را مانند قلاب می گرفت، تعریف کرده است. برای مثال پیاده سازی data API از پلاگین button به شکل زیر است:

$(document)
    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
      event.preventDefault()
 
      let button = event.target
 
      if (!$(button).hasClass(ClassName.BUTTON)) {
        button = $(button).closest(Selector.BUTTON)
      }
 
      Button._jQueryInterface.call($(button), 'toggle')
    })
    .on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
      let button = $(event.target).closest(Selector.BUTTON)[0]
      $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
    })

آخرین اما نه کوچکترین، پلاگین فایل جاوا اسکریپت شامل یک انتخاب گر Jquery است:

$.fn[NAME]             = Button._jQueryInterface
  $.fn[NAME].Constructor = Button
  $.fn[NAME].noConflict  = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT
    return Button._jQueryInterface
  }

کلاس های utility

به همراه آمدن شکوه مند Bootstrap 4 تغییر دیگری اضافه شده است به کلاس های utility که بدون بر هم زدن عملکرد های گذشته به میدان آمده است. یکی از آن ها کلاس های جهت دهی به متون است یا همان alignment، با تغییر رسپانسیو بسیار زیبا برای کلاس های جهت دهی متون در راستای رسپانسیو بودن. Text-*left، text-*-center و text-*-right برای مثال متن اگر می خواهید در دستگاه هایی که MD یا صفحه نمایش متوسط دارند، استفاده کنید باید text-md-center بنویسید

ویژگی جدید کلاس های utility همچنین میانبر های دیگری تعریف می کند که به شما اجازه می دهد از قرار دادن استایل های خطی جلوگیری کند یا اجازه ندهد تا شما کلاس های خودتان را داشته باشید. کلاس های d-* که به شما اجازه می دهد هم خاصیت block، inline و یا inline-block را داشته باشید. برای مثال d-block عنصر شما را به حالت block در می آورد و d-inline-block کلاس شما را به حالت خطی در می آورد. بصورت مشابه کلاس های w-*، به شما اجازه می دهد تا عرض عنصر را به حالت درصد در بیاورید. مثلا 2-100 عرض عنصر شما را به حالت 100% تبدیل می کند، درحالیکه w-50 عرض شما را به 50% تبدیل می کند. بصورت مشابه Bootstrap 4 از قوانین کوتاه شده تری برای تنظیم margin یا padding از هر عنصر استفاده می کند. درحالی که در این زمینه به شما اجازه می دهد از مخفف m به عنوان margin و p به عنوان padding استفاده کنید و به همین ترتیب t نشان دهنده top و b نمایان گر bottom، I (left)، r (right) و a برای تنظیم همه جهات بالا، پایین، چپ و راست استفاده می شود. اندازه یک عدد صحیح از بازه عددی 1 تا 3 را شامل می شود. در نتیجه اگر یک مثال بزنیم و بخواهیم margin یک عنصر را 0 کنیم، m-l-0 را می نویسیم.

تغییر زیبای دیگری که وجود دارد در زمینه رسپانسیو بودن float ها است: به جای استفاده از pull-lef و pull-right، نسخه جدید از کلاس های رسپانسیو float استفاده می کند که به این معنا است با توجه به viewport آن ها را تغییر می دهد pull-*-right و pull-*-left.

تغییر نهایی در کلاس های utility همچنین پشتیبانی از responsive embedding است. با استفاده از responsive embedding، نسبیت ابعاد از embedded media نسبت به اندازه viewport تغییر می یابد. بصورت ساده شما می توانید کلاس embed-responsive-item را به هر iframe یا object یا video یا embed object اضافه کنید.

آماده اید تا از Bootstrap استفاده کنید؟

اگر اکنون آماده هستید تا از نسخه جدید Bootstrap 4 alpha استفاده کنید، به این آدرس بروید: http://v4-alpha.getbootstrap.com

متناوبا شما می توانید از npm یا bower نیز استفاده کنید:

npm install bootstrap@4.0.0-alpha.4

یا

bower install bootstrap#v4.0.0-alpha.4

آموزش بوت استرپ