1. خانه
2. مقاله
3. ویژگیهای جدید سیستم گرید بوت استرپ 4

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

---

Bootstrap 4 بسیاری از ویژگیهای سیستم گرید خود را از ورژن قبلی به ارث برده است. ولی اکنون از flexbox در سیستم گرید خود استفاده می کند.

1. Basic Grid

همانطور که می دانید سیستم گرید بوت استرپ صفحه را به 12 قسمت مساوی تقسیم می کند.

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

در بوت استرپ 4 ستونهای کوچک با col-x به col تغییر کرده اند.

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

در تصویر زیر بهتر با سیستم گرید بوت استرپ آشنا می شوید.

2. Automatic Layout

یکی از ویژگی های جدید Bootstrap 4 سیستم گرید خودکار آن است و این اجازه می دهد تا توسعه دهندگان وب اندازه ستونها را به طور خودکار توزیع کنند.

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

برای بزرگ و کوچک کردن ستونها در سیستم گرید بوت استرپ همچنان می توانید از col-size استفاده کنید:

3. Column Wrapping

وقتی که مجموع ستون ها در یک ردیف بیش از 12 است، اولین ستون اضافی به خط بعدی حرکت می کند. این تکنیک در بوت استرپ 4 با 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>

4. Responsive Grid

در بوت استرپ 4 یک ردیف شبکه ای جدید به نام XL اضافه شده است.

• Extra small (xs) - below 576px
• Small (sm) - between 576px and 768px
• Medium (md) - between 768px and 992px
• Large (lg) - between 992px and 1200px
• Extra Large (xl) - over 1200px

5. Column Height

سیستم گرید بوت استرپ ورژنهای قدیمی دارای ارتفاعات متفاوتی بودند:

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

6. Horizontal Alignment

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

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

اما در سیستم گرید بوت استرپ 4 از justify-content استفاده می شود.

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

اگر می خواهید از offset ها استفاده کنید هنوز این امکان وجود دارد فقط باید از .offset-xs-* استفاده کنید.

7. Vertical Alignment

هیچ گزینه ای برای تراز بندی عمودی در شبکه بوت استرپ 3 وجود ندارد و حتی با CSS هم باید دردسر زیادی بکشید تا اینکار را انجام شود که اکثرا خراب می شود.

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

<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. Reordering Columns

در سیستم گرید قدیمی برای گشیدن گرید به اطراف باید از push,pull استفاده می کردیم.

<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>

اما در بوت استرپ 4 از ویژگیهای flexbox استفاده می شود:

• .flex-first - Displayed first.
• .flex-last - Displayed last.
• .flex-unordered - Displayed between first and last.

آدرس منبع خارجی خبر