شبکه Bootstrap ۵: XXL

مثال شبکه دستگاه XXL

کم‌تر از عادی کوچک متوسط بزرگ بزرگ‌تر از عادی XXL
پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
پهنای صفحه نمایش <۵۷۶px ≥۵۷۶px ≥۷۶۸px ≥۹۹۲px ≥۱۲۰۰px ≥۱۴۰۰px

دستگاه XXL تعریف شده به عنوان ۱۴۰۰ پیکسل و بالاترپهنای صفحه نمایش.

در مثال زیر، ۵۰/۵۰ تقسیم خواهد شد در دستگاه‌های متوسط، بزرگ و فوق‌العاده بزرگ، و ۲۵/۷۵ تقسیم خواهد شد در دستگاه XXL. در دستگاه‌های کوچک و فوق‌العاده کوچک، به صورت خودکار بر روی هم قرار می‌گیرد (۱۰۰%):

مثال

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

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

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

XXL

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

مثال

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

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

رابط‌کلی اتوماتیک ستون‌ها

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

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

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

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