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

نمونه شبکه دستگاه‌های بزرگ‌تر

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

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

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

اما در دستگاه‌های xlarge، طراحی تقسیم 20/80 ممکن است بهتر باشد.

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

برای دستگاه‌های xlarge، ما از .col-xl-* دسته:

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

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

مثال

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

آزمایش کنید

توجه:مطمئن شوید که مجموع همیشه 12 باشد.

تنها از XLarge استفاده کنید

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

مثال

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

آزمایش کنید

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

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

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

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

آزمایش کنید