شبکه‌های Bootstrap 5: دستگاه‌های کوچک

مثال شبکه دستگاه بسیار کوچک

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

فرض کنید ما یک چیدمان ساده با دو ستون داریم. ما می‌خواهیم ستون‌هاهمهتقسیم دستگاه 25% / 75%.

ما این دسته‌ها را به دو ستون اضافه می‌کنیم:

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

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

مثال

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

به طور مستقیم امتحان کنید

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

برای تقسیم 33.3/66.6 استفاده کنید .col-4 و .col-8(برای تقسیم 50/50، باید از .col-6 و .col-6):

مثال

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

به طور مستقیم امتحان کنید

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

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

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

به طور مستقیم امتحان کنید

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