مهاجرت از بوت‌استرپ ۳ به ۴

برای مهاجرت کردن از نسخه ۳ بوت استرپ به نسخه ۴ نیاز دارید چه مواردی را بدانید؟ ما امروز در این پست قصد داریم به صورت کامل در رابطه با تغییرات و ویژگی‌های جدید صحبت کنیم. 

همچنین در وبسایت راکت ما آموزش پروژه محور bootstrap ۴ را ارائه کرده‌ایم که با استفاده از آن می‌توانید درک بسیار بهتری از بوت‌استرپ ۴ را پیدا کنید. 

اما اگر قصد دارید به صورت بسیار جزئی به مسئله نگاه کنید و موارد کلی از تغییرات را مشاهده کنید، شما را به ادامه این مطلب دعوت می‌کنم.

ابتدا قصد داریم در رابطه با تغییرات موجود در نسخه جدید بوت استرپ و تاثیر آن روی کارایی وبسایت صحبت کنیم. بعد از آن ما راه جدید را برای نصب بوت‌استرپ و واحدهای اندازه‌گیری گرید را بررسی می‌کنیم و در رابطه با سیستم فلکس‌باکس نیز توضیحاتی را ارائه می‌دهیم. اضافه بر این موارد در رابطه با تغییرات بخش کامپوننت‌ها صحبت می‌کنیم و تغییراتی که در جاوااسکریپت اعمال شده را بررسی می‌نماییم.

تغییرات کلی:

تغییرات کلی و سراسری در بوت استرپ ۴ ارائه شده که شامل موارد زیر است:

• سوئیچ کردن از پیش‌پردازنده Less به Sass برای منبع فایل‌های CSS
• سوئیچ از واحد px به rem به عنوان واحد اندازه‌گیری اصلی
• مدیا کوئری‌ها حال بجای px مبتنی بر em هستند.
• اندازه font-size کلی از ۱۴ پیکسل به ۱۶ پیکسل تغییر پیدا کرده است. 

سورس کد بوت‌استرپ

سورس کد بوت‌استرپ ۳ شامل سی‌اس‌اس پیش ساخته، جاوااسکریپت و موارد جانبی در بخش فونت است. همراه با آن LESS و مستندات نیز قرار دارد. سیستم فایلی بوت‌استرپ ۳ به صورت زیر است:

در بوت‌استرپ نسخه ۴ Less حذف شده و جای خود را به پیش‌پردازنده Sass داده است. همچنین در این نسخه پوشه فونت ها نیز حذف شده است. سیستم فایلی بوت‌استرپ ۴ به صورت زیر است:

نصب بوت‌استرپ نسخه۴

در بوت‌استرپ ۴ شما راهکارهای مختلفی برای نصب دارید. می‌توانید براساس نیازتان از طریق راه های زیر بوت استرپ نسخه ۴ را دانلود و نصب کنید:

۱. منبع فایل‌ها: در حالت اول می‌توانید پکیج کامل بوت‌استرپ را که شامل فایل‌های Sass، جاوااسکریپت و قسمت مستندات است دانلود کنید. این موضوع به یک کامپایلر Sass و برخی تنظیمات نیاز دارد. اگر تنها قصد دارید که از خود بوت‌استرپ همراه با CSS/JS استفاده کنید، پس فایل های موجود را به صورت لینک در کدهای‌تان قرار دهید. 

۲. CDN بوت‌استرپ: راهکار دوم استفاده کردن از یک سیستم توزیع محتوا به صورت رایگان است. بوت‌استرپ از MaxCDN استفاده می‌کند. تنها کاری که نیاز است انجام دهید کپی کردن لینک‌ها در داخل فایل HTMLتان است. 

۳. مدیریت پکیج: در حالت سوم شما می‌توانید با استفاده از یک مدیر پکیج مانند Bower، npm، meteor و یا composer بوت‌استرپ را نصب کنید. 

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

• Reboot: در این حالت جاوااسکریپت در بسته بوت‌استرپ قرار نمی‌گیرد.
• Grid Only: شامل تمام متغیرها و کلاس‌های مربوط به سیستم گرید است. 
• Flexbox: شامل تمامی گزینه‌های مربوط به فلکس‌باکس در بوت‌استرپ است.

بروزرسانی سیستم گرید

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

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-7 sm-6">
            <div class="row">
                <div class="col-lg-7 sm-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="col-lg-5 sm-8">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-5 sm-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

در حقیقت این موضوع جدیدی نیست و در بوت‌استرپ نسخه ۳ نیز به همین صورت استفاده می‌شود اما واحد اندازه‌گیری تغییر کرده. پس اگر شما همین کد را در دو نسخه اجرا کنید، دو خروجی متفاوت خواهید داشت. -بسته به اندازه صفحه نمایش-. در لیست زیر می‌توانید کلاس‌ها را براساس اندازه صفحه نمایش مشاهده کنید:

• col-xs: برای صفحه نمایش بسیار کوچک (عرض صفحه کمتر از 34em)
• col-sm: برای صفحه نمایش کوچک (عرض صفحه 34em و بیشتر)
• col-md: برای صفحه نمایش متوسط (عرض صفحه 48em و بیشتر)
• col-lg: برای صفحه نمایش بزرگ (عرض صفحه 62em و بیشتر)
• col-xl: برای صفحه نمایش بسیار بزرگ (عرض صفحه 75em و بیشتر)

اگر از Sass در بوت استرپ ۴ استفاده کنید می‌توانید اندازه‌ گریدها را با استفاده از متغیرهای زیر تغییر دهید:

• $grid-columns: تعداد گریدها به صورت افقی (پیشفرض ۱۲ مورد)
• $grid-gutter-width: اندازه Padding کامل در اطراف هر گرید (پیشفرض ۳۰پیکسل)
• $grid-float-breakpoint: حداقل اندازه نوار منو در حالت بسته.
• $grid-float-breakpoint-max: حداکثر اندازه نوار منو در حالت باز شده.

بروزرسانی کامپوننت‌های Reset

در نسخه بوت استرپ ۳ از CSS reset استفاده شده بود. این حالت را در فایل normalize.css می‌توانید مشاهده کنید. در نسخه ۴ بوت‌استرپ نیز این قابلیت وجود دارد اما نسبت به نسخه قبلی بهبود بیشتری پیدا کرده است. 

تغییرات کلاس‌ها و بروزرسانی‌ها

در نسخه ۴ تعدادی از کلاس‌ها تغییر نام پیدا کرده‌ند. پس اگر در حال حاضر از نسخه ۳ استفاده می‌کنید و قصد دارید به نسخه ۴ مهاجرت کنید نیاز است که مواظب این تغییرات باشید.

تایپوگرافی

بوت‌استرپ در زمینه تایپوگرافی از rem استفاده می‌کند. برخلاف px و em این مقدار ثابت یا متناسب با مقدار والد خود نیست. واحد rem پویا و وابسته به تگ ریشه یعنی html است. البته می‌توانید بجای آن از واحدهای دیگری نیز استفاده کنید.

برای اینکه به شما یک ایده راجع به کارکرد rem بدهیم شما می‌توانید المان ریشه خود را ابتدا با استفاده از مقدار ثابت پیکسل اندازه بدهید و سپس در المان‌ها زیرین از rem استفاده کنید. برای مثال به صورت زیر:

html{
font-size: 16px; 
}
p{
font-size: 1rem; /* 1rem = 16px */
}
h1 {
    font-size: 1.875rem; /* 30px / 16px = 1.875rem */
}

در نمونه بالا. ما به المان پاراگراف مقدار 1rem را داده‌ایم که با مشاهده کردن المان اصلی html متوجه می‌شویم که این مقدار برابر با ۱۶ پیکسل است. بنابراین مقدار تگ h1 برابر با ۳۰ پیکسل خواهد بود.

کلاس‌های محتوایی جداول

بوت‌استرپ ۳ از کلاس‌های محتوایی برای قرار دادن پس‌زمینه‌های رنگی روی جداول، ردیف‌ها و سلول‌های منحصر به فرد استفاده می‌کند. در بوت‌استرپ ۴ به هرکدام از این کلاس‌ها یک پیشوند «.table-» اضافه شده است. 

کلاس‌های فرم

فرم‌ها نیز از نظر کلاسی تغییراتی داشته است. دو تغییر عمده در این المان تغییر نام کلاس .input-lg و .input-sm به کلاس‌های .form-control-lg و .form-control-sm است. برای تغییرات کامل‌تر به کدهای زیر دقت کنید:

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="inputEmail3" placeholder="Email">
    </div>
  </div>
 
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control form-control-sm" id="inputPassword3" placeholder="Password">
    </div>
  </div>
 
  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

کد بالا خروجی شبیه به زیر را خواهد داشت:

دیگر تغییرات

برای مشاهده دیگر تغییرات در سیستم استایل‌ها می‌توانید به تصویر زیر نگاه کنید:

تغییرات جاوااسکریپت

بوت‌استرپ از کامپوننت‌های زیادی که وابسته به جاوااسکریپت هستند استفاده می‌کند و واقعیت این است که در نسخه جدید بخش جاوااسکریپتی تغییرات زیادی نداشته است. 

می‌توانیم به چندین مزیت جدید در این نسخه اشاره کنیم، اما کلیات ماجرا مشابه با حالت قبلی است. 

• حذف پشتیبانی از اینترنت‌اکسپلورر نسخه ۸: حال که دیگر خبری از اینترنت اکسپلورر نسخه ۸ نیست بسیار خوب است که بتوانید از جی‌کوئری نسخه ۲.۰ استفاده کنید که نسبتا سریع‌تر است.
• پشتیبانی از اکمااسکریپت ۶: تمام پلاگین‌ها در اکمااسکریپت ۶ نوشته شده‌ و در Babel کامپایل شده اند. استفاده از این حالت کامپایل را سریع‌تر و راحت‌تر می‌کند.
• مشکلات AMD و UMD حل شد.

ویژگی‌های جدید

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

کاردها

در بوت‌استرپ نسخه ۴، پنل‌ها، تصاویر بندانگشتی و کادرها حذف شده اند و جای خود را به کاردها داده‌اند. این کامپوننت به ما اجازه می‌دهد که محتوا را روی قسمت‌هایی از وبسایت که می‌تواند موارد مختلفی مانند متون، تصاویر، سربرگ و... را پشتیبانی کند قرار دهیم.

 برای فعال کردن کاردها کلاس‌های .card و .card-block را به یک المان اضافه کنید. در کنار این موارد همچنین تعدادی کلاس وجود دارد که با استفاده از آن‌ها می‌توانید ویژگی‌های دیگری در اختیار داشته باشید.

• .card-title: برای عنوان سربرگ‌ها
• .card-text: برای المان متن
• .card-header: برای سربرگ
• .card-footer: برای فوتر

کد زیر را بررسی کنید تا در عمل آن‌ را مشاهده نمایید:

<div class="card">
        <!-- Card Header -->
 
        <div class="card-header">
            Card Header
        </div>
 
        <div class="card-block">
            <!-- Card Title -->
 
            <h4 class="card-title">This is the Card Title</h4><!-- Image -->
            <img alt="" src="http://goo.gl/oxHSMr" width="280"> 
            <!-- Card Text -->
 
            <p class="card-text">These are card text. See? They are
            awesome!</p>
        </div><!-- Card Footer -->
 
        <div class="card-footer">
            Card Footer
        </div>
</div>

کد بالا نتیجه زیر را ارائه می‌دهد:

فلکس‌باکس

یکی دیگر از گزینه‌های اضافه شده به بوت‌استرپ ۴ فلکس‌باکس است. لایه‌بندی منعطف یا فلکس باکس یک مدل لایه‌بندی تقریبا مدرن و بهینه شده برای رابط کاربری است که با CSS3 کار می‌کند. فلکس‌باکس شما را قادر می‌سازد تا صفحات واکنشگرایی را نیز پیاده‌سازی کنید.

برای فعال سازی این ویژگی‌ در پروژه‌های بوت استرپ مقدار بولین متغیر $enable-flex در فایل _variable.scss را برابر true قرار دهید. 

در این مثال می‌توانید شیوه کاری فلکس‌باکس را مشاهده کنید. همچنین برای آشنایی کامل با Flexbox می‌توانید دوره رایگان «آموزش کامل Flexbox» را مشاهده کنید. 

تول‌تیپ‌ها

پلاگین تول‌تیپ بوت‌استرپ در اصل برپایه jQuery.tipsy ساخته شده است. اما در نسخه ۴ به یک پلاگین دیگر به اسم Tether انتقال داده شده است. اگر می‌خواهید از این ابزار استفاده کنید درست قبل از bootstrap.js فایل tether.js را قرار دهید.

سخن آخر

در این مقاله در رابطه با تغییرات آخرین نسخه از بوت‌استرپ نکاتی را متوجه شدید. در کنار این مورد به شما پیشنهاد می‌کنم که مستندات رسمی خود وبسایت بوت‌استرپ را نیز مطالعه کنید. 

جدای از این می‌توانید به دوره «آموزش پروژه محور bootstrap ۴» وبسایت راکت مراجعه کنید. 

منبع