مثال های گرید (Grid Examples)
اینجا چند «مثال گرید (Grid)» بوتسترپ می بینی. گرید یعنی چیدن ستون ها در ردیف ها. با کلاس های مختلف، عرض ستون ها را کنترل می کنی. مثل چیدن نیمکت ها در کلاس، اما واکنش گرا برای صفحه ها.
سه ستون برابر با .col
فقط .col بده. بوتسترپ خودش ستون ها را برابر می کند.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
سه ستون برابر با عدد
با اعداد کنترل دقیق تری داری. جمع هر ردیف حداکثر 12 باشد.
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
سه ستون نابرابر 25/50/25
برای نابرابری، از اعداد متفاوت استفاده کن.
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div class="col-3">col-3</div>
</div>
تنظیم عرض فقط یک ستون
فقط وسطی را عدد بده. بقیه خودکار تنظیم می شوند.
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div class="col">col</div>
</div>
ستون های برابر بیشتر
دو، چهار، یا شش ستون برابر بساز.
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
کنترل تعداد ستون ها با .row-cols-*
بدون توجه به تعداد آیتم ها، تعداد ستون ها را تعیین کن.
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
ستون های نابرابر بیشتر
چند الگوی نابرابر معمول را ببین.
<!-- Two Unequal Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3 of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
ارتفاع برابر ستون ها
اگر یک ستون بلندتر باشد، ردیف هماهنگ می ماند.
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
ستون های تو در تو (Nested)
داخل یک ستون، یک ردیف جدید بساز و دوباره ستون بده.
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
از عمودی به افقی (Responsive)
روی موبایل عمودی است. از sm به بالا افقی می شود.
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
ترکیب کلاس ها (Mix and Match)
کلاس ها را ترکیب کن تا چیدمان در اندازه ها متفاوت شود.
<!-- 50%/50% xs و 75%/25% در بزرگ تر -->
<div class="row">
<div class="col-6 col-sm-9">col-6 col-sm-9</div>
<div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 58%/42% xs-md و 66%/33% lg+ -->
<div class="row">
<div class="col-7 col-lg-8">col-7 col-lg-8</div>
<div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
<!-- 25/75 sm، 50/50 md، 33/66 lg+ -->
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
بدون فاصله بین ستون ها (No Gutters)
برای حذف فاصله ستون ها، از .g-0 روی ردیف استفاده کن.
<div class="row g-0"></div>
گام های عملی
- یک
containerبساز. - یک
rowاضافه کن. - ستون ها را با
.colیا اعداد بساز. - جمع هر ردیف را حداکثر 12 نگه دار.
- در اندازه های مختلف تست کن.
نکته: کلاس ها از نقطه شکست خود به بالا اثر می گذارند. پس md روی بزرگ ترها هم فعال است.
لینک های داخلی
برای ادامه، سر بزن به گرید خیلی بزرگ و سپس گرید XXL برای نمونه های بیشتر.
جمع بندی سریع
.colستون های برابر می سازد.- با اعداد، عرض دقیق تر تعیین کن.
.row-cols-*تعداد ستون ها را مشخص می کند.- کلاس ها از breakpoint خود به بالا اعمال می شوند.
.g-0فاصله بین ستون ها را حذف می کند.