شبکه‌های Bootstrap 5: دستگاه‌های بزرگ

مثال شبکه دستگاه‌های متوسط

XSmall Small Medium Large Extra Large XXL
پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
عرض صفحه <576px >=576px >=768px >=992px >=1200px >=1400px

در فصل قبلی، ما یک نمونه شبکه نشان دادیم که شامل کلاس‌های برای دستگاه‌های کوچک است. ما از دو div (ستون) استفاده کردیم و به آنها تقسیم 25% / 75% دادیم:

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

اما در دستگاه‌های متوسط، طراحی تقسیم 50% / 50% ممکن است بهتر باشد.

دستگاه‌های متوسط به عنوان عرض صفحه تعریف می‌شونداز 768 پیکسل تا 991 پیکسل.

برای دستگاه‌های متوسط، از .col-md-* کلاس‌ها:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

در دستگاه‌های کوچک، از کلاس‌های شامل استفاده کنید -sm- کلاس. در دستگاه‌های متوسط، از کلاس‌های شامل استفاده کنید -md- کلاس.

مثال زیر منجر به تقسیم 25% / 75% بر روی دستگاه‌های کوچک و 50% / 50% بر روی دستگاه‌های متوسط (و بزرگ، فوق‌العاده بزرگ و بسیار بزرگ) می‌شود. در دستگاه‌های فوق‌العاده کوچک، به صورت خودکار به هم چسبیده (100%) می‌شود:

مثال

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>بنیاد جهانی طبیعت (WWF)، که در 29 آوریل 1961 تأسیس شد، نشانگانی از یک پندارگل است ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>در سال 1980، WWF به صورت رسمی به چین آمد و با دعوت دولت چین به چین آمد تا به حفاظت از پندارگل و زیستگاه آن بپردازد ...</p>
    </div>
  </div>
</div>

به طور شخصی امتحان کنید

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

تنها از Medium استفاده می‌کنیم

در مثال زیر، ما تنها .col-md-6 کلاس (بدون .col-sm-*). این بدان معناست که دستگاه‌های متوسط، بزرگ، فوق‌العاده بزرگ و XXL 50% / 50% تقسیم خواهند شد زیرا این کلاس می‌تواند گسترش یابد. اما برای دستگاه‌های کوچک و فوق‌العاده کوچک، به صورت عمودی روی هم قرار خواهند گرفت (عرض 100%):

مثال

<div class="row">
  <div class="col-md-6">
    <p>بنیاد جهانی طبیعت (WWF)، که در 29 آوریل 1961 تأسیس شد، نشانگانی از یک پندارگل است ...</p>
  </div>
  <div class="col-md-6">
    <p>در سال 1980، WWF به صورت رسمی به چین آمد و با دعوت دولت چین به چین آمد تا به حفاظت از پندارگل و زیستگاه آن بپردازد ...</p>
  </div>
</div>

به طور شخصی امتحان کنید

طرح‌بندی خودکار ستون‌ها

در Bootstrap 5، روش ساده‌ای برای ایجاد ستون‌های یکسان برای همه دستگاه‌ها وجود دارد: تنها باید از .col-md-* اعداد را در میان بردارید و تنها از عنصر col استفاده کنید .col-md کلاس. Bootstrap تعداد ستون‌ها را تشخیص می‌دهد و هر ستون از عرض یکسانی برخوردار خواهد بود.

اگر اندازه صفحه نمایشکمتر از 768px، ستون‌ها به صورت افقی روی هم قرار می‌گیرند:

<!-- دو ستون: در دستگاه‌های متوسط و بزرگتر 50% عرض دارند -->
<div class="row">
  <div class="col-md">1 از 2</div>
  <div class="col-md">2 از 2</div>
</div>
<!-- چهار ستون: در دستگاه‌های متوسط و بزرگتر 25% عرض دارند -->
<div class="row">
  <div class="col-md">1 از 4</div>
  <div class="col-md">2 از 4</div>
  <div class="col-md">3 از 4</div>
  <div class="col-md">4 از 4</div>
</div>

به طور شخصی امتحان کنید

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