گرید پایه (Grid Basic)
اینجا «گرید بوت استرپ 5» را یاد می گیری. «گرید (Grid)» یعنی چیدمان شبکه ای ستون ها. همچنین «فلکس باکس (Flexbox)» موتور این چیدمان است. تا 12 ستون داریم. سپس ستون ها با هم جمع می شوند. حالا عملی تمرین می کنیم.
ساختار پایه گرید
اول یک «ردیف (Row)» بساز. سپس ستون ها را اضافه کن. مجموع هر ردیف حداکثر 12 باشد.
<!-- Control the column width on devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Auto equal columns -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
سه ستون مساوی
وقتی عدد ندهی، کلاس .col ستون های هم عرض می سازد. این کار سریع و تمیز است.
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
ستون های واکنش گرا
با کلاس های اندازه مثل .col-sm-3 ستون ها از تبلت چیدمان می گیرند. در موبایل زیر هم می آیند.
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
دو ستون نامساوی
با جمع اعداد به 12، نسبت ها را می سازی. چهار و هشت یعنی 12. مثل تقسیم نمره پروژه.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
کلاس های اندازه گرید
کلاس ها: .col-، .col-sm-، .col-md-، .col-lg-، .col-xl-، .col-xxl-. هر کدام از عرض تعیین شده فعال می شوند.
نکته: هر کلاس به بالا هم اثر می گذارد. بنابراین گاهی فقط sm کافی است.
گام های عملی
- یک ردیف بساز و سه ستون اضافه کن.
- کلاس های
smوmdرا تست کن. - نسبت 4 و 8 را پیاده سازی کن.
ادامه مسیر
برای کانتینرها این صفحه را ببین: کانتینرها. همچنین برای تایپوگرافی به تایپوگرافی برو. برای مرور سریع، همینجا: گرید بوت استرپ 5.
جمع بندی سریع
- گرید 12 ستونه و انعطاف پذیر است.
- .col ستون های برابر می سازد.
- کلاس های sm تا xxl واکنش گرا هستند.
- جمع ستون ها حداکثر دوازده باشد.