طراحی واکنشگرا با استفاده از ردیف و ستون ها
از ردیف ها و ستون ها برای ساخت چیدمان دلخواه خود استفاده کنید. در نظر داشته باشید که این چیدمان ها به طور کامل واکنشگرا (responsive) هستند.
<div class="row">
<div class="{Column class}"></div>
</div>| اندازه | کلاس ستون |
|---|---|
| کوچک | col-sm |
| متوسط | col-md |
| بزرگ | col-lg |
| خیلی بزرگ | col-xl |
| اندازه ستون | col-[1-12] مثال: col-6 |
ستون های برابر
برای مثال دو ردیف شامل ستون هایی با اندازه یکسان وجود دارد، با اضافه کردن ستون های جدید اندازه ها به صورت خودکار تغییر خواهند کرد.
<div class="row">
<div class="col">
ستون 1/2
</div>
<div class="col">
ستون 2/2
</div>
</div>
<div class="row">
<div class="col">
ستون 1/3
</div>
<div class="col">
ستون 2/3
</div>
<div class="col">
ستون 3/3
</div>
</div>ستون 1/2
ستون 2/2
ستون 1/3
ستون 2/3
ستون 3/3
ستون های اندازه بندی شده
درصورتی که تعداد زیادی ستون در صفحه خود دارید، می‌توانید اندازه آنها را مشخص کنید.
<div class="row">
<div class="col-6">
ستون 50%
</div>
<div class="col-6">
ستون 50%
</div>
</div>
<div class="row">
<div class="col-3">
ستون 25%
</div>
<div class="col-6">
ستون 50%
</div>
<div class="col-3">
ستون 25%
</div>
</div>
<div class="row">
<div class="col-12">
ستون 100%
</div>
<div class="col-9">
ستون 75%
</div>
<div class="col">
ستون خودکار
</div>
</div>ستون 50%
ستون 50%
ستون 25%
ستون 50%
ستون 25%
ستون 100%
ستون 75%
ستون خودکار
ستون های وسط چین شده
با اضافه کردن کلاس margin-auto به لیست کلاس های ستون می‌توانید ستون مورد نظر خود را وسط چین کنید.
<div class="row">
<div class="col-3 margin-auto">
Column 25%
</div>
<div class="col-3 margin-auto">
Column 25%
</div>
</div>Column 25%
Column 25%
ستون های چند لایه‌ای
برای ایجاد محتوا های چند لایه‌ای کافیست یک ردیف در ستون مورد نظر ایجاد کنید و سپس ستون های مورد نیاز را در آن قرار دهید.
<div class="row">
<div class="col-7 margin-auto">
ستون والد #1
<div class="row">
<div class="col-4">
فرزند #1
</div>
<div class="col">
فرزند #2
</div>
</div>
</div>
<div class="col-4 margin-auto">
ستون والد #2
</div>
</div>
ستون والد #1
فرزند #1
فرزند #2
ستون والد #2