در Bootstrap 4 شاهد تغییرات زیادی هستیم و ویژگی های  جدیدی را به  سیستم Grid  اضافه کرد که همه ما آن را از نسخه 3 می شناسیم. سیستم Gridجدید توسط flexbox طراحی شده و بسیاری از کلاس های مورد استفاده تغییر نام پیدا کرده وbreakpointجدید به نامXL اضافه شده است.

1 – Grid اصلی در Bootstrap 4

همه می دانند که شبکه Grid بوت استرپ چگونه کار می کند. در این سیستم هر سطر را به 12 بخش مساوی تقسیم می کنیم ، و ستون هایی که در این سطر ها قرار می گیرند. هر ستون می تواند در هر قسمت از این سیستم قرار بگیرد از خانه 1 تا خانه 12.

<divclass="row">

<divclass="col-xs-2">.col-xs-2</div>

<divclass="col-xs-4">.col-xs-4</div>

<divclass="col-xs-6">.col-xs-6</div>

</div>

از لحاظ ساختاری هیچ چیز تغییر نکرده است،  سیستم هنوز سطر و 12 ستون را دارد، با این حال تغییراتی در عرض container ها، تغییرات کوچکی مثل اندازه کوچکترین breakpoint که  از .col-xs-   به .col- تغییر نام داده است.

<divclass="row"><divclass="col-2">.col-2</div><divclass="col-4">.col-4</div><divclass="col-6">.col-6</div></div>

برای اینکه تغییرات را بهتر تصور کنید، می توانید  شبکه پایه بوت استرپ را ملاحظه کنید:

2- layout اتوماتیک در Bootstrap 4

مزیت فوق العاده جدیدی که به سیستم grid بوت استرپ 4 اضافه شده حالت auto-layout است . این مزیت به توسعه دهندگان اجازه می دهد تا اندازه ستون را بشکنند وبه طور خودکار در فضای آن سطر توزیع شوند.

<div class="row">

    <div class="col">.col</div>

    <div class="col">.col</div>

    <div class="col">.col</div>

</div>

ستون های بدون اندازه  (Sizeless ) فضای موجود را به طور مساوی  به اشتراک می گذارند و تمام سطر را پر می کنند.

اگر ستونی بزرگتر یا کوچتر بخواهیم ، با استفاده از کلاس .col-size این کار امکان پذیر است.

3- Wrapping ستون ها در Bootstrap 4

زمانی که  جمع تعداد ستون ها در یک سطر بیش از 12 تا باشد، ستون های اضافه  به خط بعدی منتقل می شوند. این کار Wrapping نامیده می شود و همانند آن در Bootstrap از non-flexbox استفاده می شود.

<div class="row">

   <div class="col-6">.col-6</div>

   <div class="col-6">.col-6</div>

   <div class="col-3">.col-3, This column will move to the next line.</div>

</div>

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

4- سیستم grid ریسپانسیو

همانطور که در ابتدا ذکر شد،  در Bootstrap 4 علاوه بر انواع ردیف های قدیمی، ردیف جدیدی به نام XL  اضافه شده است. در حال حاضر نمایش داده های رسانه ای (media) شبیه زیر است:

Extra small (xs) – زیر 576px

Small (sm) – بین 576px و 768px

Medium (md) – بین 768px و 992px

Large (lg) – بین 992px و 1200px

Extra Large (xl) – بیش از 1200px

غیر از این، هیچ تغییراتی در نحوه واکنشگرا کردن طراحی اعمال نشده است.

5- ارتفاع ستون:

سیستم گرید قدیمی، مبتنی بر عناصر شناور بود، و بعلت اینکه هرستوون می توانست ارتفاع متفاوتی داشته باشد،وابسته به عنصر در برگیرنده(والد) خود بود.

در طرح های flexbox  ارتفاع سلول های هر سطر، متناسب با ارتفاع سلولی که بیشترین محتوا را دارد، تنظیم می شود.

6- ترازبندی افقی

در بوت استرپ قدیمی، با استفاده از سیستم offset ستون ها را به صورت افقی می توانستیم مرتب کنیم. Offset مانند ستون های خالی عمل می کند که به طراح اجازه می دهد تا عناصر را به سمت راست منتقل کند (مانند .col-xs-offset-3 که ستون را سه فضا به سمت راست منتقل می کند ).

این روش زمانی که بخواهید فضاهای موردنیاز را بصورت دستی تنظیم کنید، ممکن است کمی اذیت کننده باشد.

<div class="row">

    <div class="col-xs-6 col-xs-offset-3">This column is now centered.</div>

</div>

خوشبختانه ویژگی justify-content وجود دارد و از آن برای تراز بندی افقی در  flex-strap می توان استفاده کرد و روشی اسانتر به جای اضافه کردن کلاس های اضافی است.

<div class="row justify-content-center">

    <div class="col-6">All columns in that row will be automatically centered.</div>

</div>

همچنین زمانی که بخواهید از افست ها استفاده کنید، ، هنوز هم می توانید این کار را انجام دهید! فقط به خاطر داشته باشید که این کلاس ها محدود به .offset-xs-* هستند.

7- ترازبندی عمودی

در سیستم گرید bootstrap3 هیچ روشی برای ترازبندی عمودی وجود ندارد. تنها راه برای اینکار، استفاده از css های سفارشی است که اغلب ناکارآمد هستند.

از سوی دیگر، Flexbox در ترازبندی روشی مناسب است ولی فقط دو روش برای ترازبندی افقی ستون ها در اختیار ما می گذارد:

تمام عناصر یک ردیف را بصورت عمودی تراز کنید:

<div class="row align-items-center">

    <div class="col">Middle</div>

</div> 

<div class="row align-items-end">

    <div class="col">Bottom</div>

</div>

<div class="row align-items-start">

    <div class="col">Top</div>

</div>

ستون های متفاوت را در یک سطر قرار دهید:

<div class="row">

    <div class="col align-self-start">Top</div>

    <div class="col align-self-center">Middle</div>

    <div class="col align-self-end">Bottom</div>

</div>

8- تنظیم مجدد ستون ها

درسیستم گرید قدیمی، اگر میخواستیم تنظیمات ستون ها را عوض کنیم،  باید بصورت دستی عناصر را به راست یا چپ منتقل می کردیم.

<div class="row">

    <div class="col-xs-4 col-xs-push-8"> This column will move 8 spaces to the right. </div>

    <div class="col-xs-8 col-xs-pull-4"> This column will move 4 spaces to the left.</div>

</div>

اگر از flexbox استفاده کرده باشید می دانید که دارای ویژگی  order است . در این روش شما با سه کلاس می توانید ستون ها را مجددا تنظیم کنید:

• .flex-first– عنصر در ابتدا نمایش پیدا میکند.
• .flex-last- عنصر در انتها نمایش پیدا میکند.
• .flex-unordered– عنصر بین عناصر ابتدایی وانتهایی نمایش پیدا میکند.

هیچ عملیات دستی لازم نیست انجام دهید. اگر  بخواهید بیش از 3 عنصر را مرتب کنید (که به ندرت اتفاق می افتد) میتوانید  از   push&pull  یا ویژگی order با استفاده از css  استفاده کنید.

نتیجه گیری:

با مرور به نکاتی که بیان شد، بسیار روشن است که استفاده از flexbox و استفاده از ویژگی های بسیار زیاد آن عاقلانه بوده و می توانید از سیستم grid بسیار پیشرفته تر و متنوع تر استفاده کنید.

تنها نکته اصلی این است که مرورگرهای قدیمی  و ie9  سازگار نیست.

دراین مقاله به معرفی bootstrap 4 پرداختیم، امیدواریم که مفید واقع شده باشد.