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

مجوز تحصیلی:

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

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

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

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

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

برای دستگاه‌های بزرگ، از .col-lg-* کلاس‌ها:

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

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

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

مثال

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

آزمایش کنید

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

Large

در مثال زیر، ما فقط .col-lg-6 طبقه‌بندی‌ها (بدون .col-md-* و/یا .col-sm-*). این بدان معناست که دستگاه‌های large، xlarge و xxlarge به 50/50% تقسیم می‌شوند. اما برای دستگاه‌های medium، small و extra small به صورت عمودی قرار می‌گیرند (عرض 100%):

مثال

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

آزمایش کنید

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

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

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

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

آزمایش کنید