نمونه های شبکه بوت استرپ

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

در این مثال‌ها .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-xxl-4
.col-xxl-4
.col-xxl-4

سه ستون مساوی

سه ستون با عرض مساوی دریافت کنید که از دسک‌تاپ شروع می‌شوند و به دسک‌تاپ‌های بزرگ مقیاس می‌شوند . در دستگاه‌های تلفن همراه، تبلت‌ها و پایین‌تر، ستون‌ها به‌طور خودکار روی هم چیده می‌شوند.

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

سه ستون مساوی جایگزین

با استفاده از .row-cols-*کلاس ها می توانید به راحتی یک شبکه با ستون های مساوی ایجاد کنید.

.colفرزند از .row-cols-md-3
.colفرزند از .row-cols-md-3
.colفرزند از .row-cols-md-3

سه ستون نابرابر

سه ستون دریافت کنید که از دسکتاپ شروع می شود و به دسکتاپ های بزرگ با عرض های مختلف مقیاس می شود. به یاد داشته باشید، ستون های شبکه باید برای یک بلوک افقی منفرد تا دوازده عدد جمع شوند. بیشتر از آن، و ستون‌ها بدون توجه به درگاه دید شروع به انباشتن می‌کنند.

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

دو ستون

دو ستون دریافت کنید که از دسکتاپ شروع می شود و به دسکتاپ های بزرگ مقیاس می شوند .

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

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

هیچ کلاس شبکه ای برای عناصر با عرض کامل لازم نیست.

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

طبق مستندات، تودرتو کردن آسان است - فقط یک ردیف از ستون ها را در یک ستون موجود قرار دهید. این به شما دو ستون می‌دهد که از دسک‌تاپ شروع می‌شوند و به دسک‌تاپ‌های بزرگ مقیاس می‌شوند، با دو ستون دیگر (عرض مساوی) در ستون بزرگ‌تر.

در اندازه‌های دستگاه همراه، تبلت‌ها و پایین‌تر، این ستون‌ها و ستون‌های تودرتوی آن‌ها روی هم قرار می‌گیرند.

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

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

سیستم شبکه Bootstrap v5 دارای شش طبقه کلاس است: xs (بسیار کوچک، این کلاس پسوند استفاده نمی‌شود)، sm (کوچک)، md (متوسط)، lg (بزرگ)، xl (x-large) و xxl (xx) -بزرگ). می‌توانید تقریباً از هر ترکیبی از این کلاس‌ها برای ایجاد طرح‌بندی‌های پویا و انعطاف‌پذیرتر استفاده کنید.

هر ردیف از کلاس ها افزایش می یابد، به این معنی که اگر قصد دارید عرض های یکسانی را برای md، lg، xl و xxl تنظیم کنید، فقط باید md را مشخص کنید.

.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-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

ناودان

با .gx-*کلاس ها می توان ناودان های افقی را تنظیم کرد.

.colبا .gx-4ناودان
.colبا .gx-4ناودان
.colبا .gx-4ناودان
.colبا .gx-4ناودان
.colبا .gx-4ناودان
.colبا .gx-4ناودان

از .gy-*کلاس ها برای کنترل ناودان های عمودی استفاده کنید.

.colبا .gy-4ناودان
.colبا .gy-4ناودان
.colبا .gy-4ناودان
.colبا .gy-4ناودان
.colبا .gy-4ناودان
.colبا .gy-4ناودان

با .g-*کلاس ها، ناودان ها در هر دو جهت قابل تنظیم هستند.

.colبا .g-3ناودان
.colبا .g-3ناودان
.colبا .g-3ناودان
.colبا .g-3ناودان
.colبا .g-3ناودان
.colبا .g-3ناودان

ظروف

کلاس های اضافی اضافه شده در Bootstrap v4.4 به کانتینرهایی اجازه می دهد که 100٪ عرض تا یک نقطه شکست خاص داشته باشند. v5 یک xxlنقطه شکست جدید اضافه می کند.

.کانتینر
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.ظرف مایع