شبکه‌های Bootstrap 5

تداخل/افقی Bootstrap 5

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

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

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

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

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

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

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

  • .col- (دستگاه‌های فوق‌العاده کوچک - عرض صفحه کمتر از 576px)
  • .col-sm- (دستگاه‌های کوچک - عرض صفحه برابر یا بزرگتر از 576px)
  • .col-md- (دستگاه‌های متوسط - عرض صفحه برابر یا بزرگتر از 768 پیکسل)
  • .col-lg- (دستگاه‌های بزرگ - عرض صفحه برابر یا بزرگتر از 992 پیکسل)
  • .col-xl- (دستگاه‌های xlarge - عرض صفحه برابر یا بزرگتر از 1200px)
  • .col-xxl- (دستگاه‌های xxlarge - عرض صفحه برابر یا بزرگتر از 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>
<!-- یا به Bootstrap اجازه دهید که ساختار را مدیریت کند -->
<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 یک عدد اضافه کنید، اما به جای آن به bootstrap اجازه دهید که ساختار را مدیریت کند تا ستون‌های یکسان‌عرض ایجاد کند: دو "col" عنصر = هر col دارای عرض 50% است، و سه cols = هر col دارای عرض 33.33% است. چهار ستون = 25% عرض، و غیره. همچنین می‌توانید از .col-sm|md|lg|xl|xxl ایجاد پاسخگویی برای ستون‌ها.

در اینجا چند مثال پایه از چیدمان شبکه‌ای Bootstrap 5 جمع‌آوری شده است.

ستون‌های سه‌بخشی

در این مثال نشان داده می‌شود که چگونه می‌توان سه ستون یکسان‌عرض در تمام دستگاه‌ها و عرض‌های صفحه نمایش ایجاد کرد:

مثال

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

آزمایش کنید

ستون‌های پاسخگو

در این مثال نشان داده می‌شود که چگونه می‌توان از تبلت شروع به ایجاد چهار ستون یکسان‌عرض کرد و آن‌ها را به دسکتاپ‌های فوق‌العاده بزرگ گسترش داد.در عرض کمتر از 576px در تلفن‌های همراه یا صفحات نمایش، ستون‌ها به صورت خودکار روی هم قرار می‌گیرند:

مثال

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

آزمایش کنید

دو ستون نابرابر پاسخگو

در این مثال نشان داده می‌شود که چگونه می‌توان دو ستون با عرض متفاوت در تبلت دریافت کرد و آن‌ها را به دسکتاپ‌های فوق‌العاده بزرگ گسترش داد:

مثال

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

آزمایش کنید

توضیح:شما در بخش‌های بعدی این آموزش در مورد سیستم شبکه‌ای محتوای بیشتری.