سیستم Grid در بوت استرپ 4

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

این سیستم grid به شکل زیر است:

نکته ای که باید در ذهن داشته باشید این است که مجموع ستون ها باید 12 بشود.

کلاس های grid

کلاس های grid در بوت استرپ 4، سر جمع 5 کلاس هستند:

کلاس های بالا را می توان جهت پویا تر کردن طرح خود در هم ادغام کنیم.

کد زیر یک مثال در این زمینه می باشد:

<!-- شما می توانید خودتان عرض ستون ها و نحوه ی نمایش محتوا در دستگاه های مختلف را مدیریت کنید -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
 
<!-- یا بگذارید بوت استرپ خودش طرح را مدیریت کند -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

به طور مثال یک ردیف می سازیم (<"div class="row>) و سپس تعداد ستون های دلخواه را اضافه می کنیم (تگ هایی که از ساختار *-*-col. تبعیت می کنند) در این ساختار ستاره ی اول (*) نشان دهنده ی واکنش گرا بودن (sm, md, lg یا xl) و ستاره ی دوم عددی است که جمع آن برای هر ردیف برابر باید 12 باشد.

همچنین می توان به جای اضافه کردن عدد به col، اجازه بدهیم که خود بوت استرپ طرح را مدیریت کند (دو ستون “col” با عرض 50 درصد، یا سه ستون با عرض 33.33 درصد یا چهار ستون با عرض 25 درصد و غیره می سازد). همچنین می توان از ساختار col-sm|md|lg|xl. استفاده کرد تا ستون ها واکنش گرا شوند.

بیایید چند مثال دیگر را ببینیم.

سه ستون مساوی: در این مثال می خواهیم سه ستون داشته باشیم که دارای عرض مساوی هستند:

    <div class="container-fluid">
        <h1>سه ستون با عرض مساوی</h1>
        <p>توجه: سعی کنید یک div جدید با class="col" در داخل کلاس ردیف اضافه کنید - این چهار ستون با عرض برابر ایجاد می کند.</p>
        <div class="row">
            <div class="col" style="background-color:lavender;">.col</div>
            <div class="col" style="background-color:orange;">.col</div>
            <div class="col" style="background-color:lavender;">.col</div>
        </div>
    </div>

نمونه مثال:

ستون های واکنش گرا: در این مثال می خواهیم چهار ستون هم عرض ایجاد کنیم که ابتدا اندازه ی کوچکی دارند اما برای صفحات بزرگتر نیز مقیاس می پذیرند. در صفحات گوشی همراه یا به طور کل در صفحاتی که کوچک تر از 576px باشند، ستون ها به طور پیش فرض روی هم قرار می گیرند:

    <div class="container-fluid">
        <h1>ستون های واکنش گرا</h1>
        <p>وقتی صفحه کمتر از 576px عرض داشته باشد ، ستون ها به طور خودکار روی یکدیگر قرار می گیرند.</p>
        <div class="row">
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
        </div>
    </div>

نمونه مثال:

ستون های غیر هم عرض: در این مثال دو ستون غیر هم عرض داریم که با بزرگتر شدن صفحه از خود واکنش نشان داده و بزرگتر می شوند:

    <div class="container-fluid">
        <h1>دو ستون های واکنش گرا غیر هم عرض</h1>
        <p>وقتی صفحه کمتر از 576px عرض داشته باشد ، ستون ها به طور خودکار روی یکدیگر قرار می گیرند.</p>
        <div class="row">
            <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
            <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
        </div>
    </div>

نمونه مثال: