ستون بندی در بوت استرپ

طرح بندی شبکه های اصلی برای آشنا شدن با ساختار ستون بندی در Bootstrap.

در این مثال .themed-grid-col به ستون ها اضافه شده جهت نمایش محدوده هر ستون

پنج حالت ستون بندی

پنج حالت سیستم بوت استرپ وجود دارد، برای هر یک از دستگاههایی که ما می شناسیم که از حداقل اندازه نمایشگر شروع می شود و به صورت خودکار به دستگاه های بزرگتر اعمال می شود مگر اینکه لغو شود.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

سه ستونه عرض مساوی

.col-md-4
.col-md-4
.col-md-4

سه ستونه عرض نامساوی

.col-md-3
.col-md-6
.col-md-3

دو ستونه

.col-md-8
.col-md-4

تمام عرض تک ستون

هیچ کلاس ستون بندی برای تک ستون تمام صفحه وجود ندارد، یعنی نیاز به ستون بندی ندارد.

دو ستونه با دو ستون داخلی

برای ایجاد ستون داخلی کافیست یک row جدید به همراه ستون ها در آن ستون اضافه نمایید.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

ترکیبی: ستون بندی موبایل و دسکتاپ

The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

ترکیبی: موبایل، تبلت و دسکتاپ

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4