سیستم شبکه‌های Bootstrap 5

سیستم شبکه

سیستم شبکه Bootstrap با استفاده از flexbox ساخته شده است و بیشترین تعداد ستون مجاز بر روی صفحه 12 است.

اگر نمی‌خواهید از تمام 12 ستون به طور جداگانه استفاده کنید، می‌توانید این ستون‌ها را ترکیب کنید تا ستون‌های وسیعتری ایجاد کنید:

سیستم شبکه به سرعت پاسخ می‌دهد و ستون‌ها بر اساس اندازه صفحه خودکاراً بازآرایی می‌شوند.

مطمئن شوید که مجموع برابر یا کمتر از 12 است (نیاز به استفاده از تمام 12 ستون موجود نیست).

کلاس‌های شبکه

سیستم شبکه Bootstrap 5 شش کلاس ارائه می‌دهد:

  • .col- (تجهیزات فوق‌العاده کوچک - عرض صفحه کمتر از 576px)
  • .col-sm- (تجهیزات کوچک - عرض صفحه برابر یا بزرگتر از 576px)
  • .col-md- (تجهیزات متوسط - عرض صفحه برابر یا بزرگتر از 768px)
  • .col-lg- (تجهیزات بزرگ - عرض صفحه برابر یا بزرگتر از 992px)
  • .col-xl- (تجهیزات فوق‌العاده بزرگ - عرض صفحه برابر یا بزرگتر از 1200px)
  • .col-xxl- (تجهیزات بزرگتر - عرض صفحه برابر یا بزرگتر از 1400px)

با ترکیب این کلاس‌ها، می‌توانید قالب‌های پویاتر و انعطاف‌پذیرتری ایجاد کنید.

توجه:هر کلاس به نسبت بزرگتر است، بنابراین اگر بخواهید عرض sm و md را برابر کنید، فقط باید sm را تعیین کنید.

ساختار اولیه شبکه Bootstrap 5

این ساختار اولیه شبکه Bootstrap 5 است:

<!-- کنترل پهنای ستون‌ها و نحوه نمایش آن‌ها در دستگاه‌های مختلف -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- یا اجازه دهید بوت استرپ طراحی را مدیریت کند -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

آزمایش کنید

مثال اول: ایجاد یک خط (<div class = "row">). سپس، تعداد مورد نیاز ستون‌ها را اضافه کنید (با .col-*-* برچسب کلاس). ستاره اول (*) نمایانگر پاسخگویی است: sm، md، lg، xl یا xxl، و ستاره دوم یک عدد است که مجموع آن‌ها باید 12 باشد.

مثال دوم: نه به هر col یک عدد اضافه کنید، تا بوت استرپ طراحی را مدیریت کند و ستون‌های یکسان‌پایه ایجاد کند: دو "col" عنصر = پهنای 50% هر ستون، و سه ستون = پهنای 33.33% هر ستون. چهار ستون = 25% پهنای ستون و غیره. همچنین می‌توانید از .col-sm|md|lg|xl|xxl ستون‌ها را به صورت پاسخگو قرار می‌دهد.

گزینه‌های شبکه

در جدول زیر عملکرد سیستم شبکه Bootstrap 5 در اندازه‌های مختلف صفحه نمایش آمده است:

کوچک‌تر از 576px بزرگ‌تر از یا برابر با 576px بزرگ‌تر از یا برابر با 768px بزرگ‌تر از یا برابر با 992px بزرگ‌تر از یا برابر با 1200px بزرگ‌تر از یا برابر با 1400px
پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
رفتار شبکه همیشه افقی شروع تاپ، در نقاط برش افقی شروع تاپ، در نقاط برش افقی شروع تاپ، در نقاط برش افقی شروع تاپ، در نقاط برش افقی شروع تاپ، در نقاط برش افقی
پهنای کانتینر هیچ (اتوماتیک) 540px 720px 960px 1140px 1320px
مناسب برای صفحه عمودی موبایل صفحه افقی موبایل تبلت لپ‌تاپ لپ‌تاپ و کامپیوتر رومیزی لپ‌تاپ و کامپیوتر رومیزی
شماره ستون‌ها 12 12 12 12 12 12
پهنای فضای بین ستون‌ها 1.5rem (در هر طرف ستون .75rem ) 1.5rem (در هر طرف ستون .75rem ) 1.5rem (در هر طرف ستون .75rem ) 1.5rem (در هر طرف ستون .75rem ) 1.5rem (در هر طرف ستون .75rem ) 1.5rem (در هر طرف ستون .75rem )
قابلیت جابجایی بله بله بله بله بله بله
جابجایی بله بله بله بله بله بله
ترتیب ستون‌ها بله بله بله بله بله بله