گرید برای دستگاه‌های کوچک

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

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

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

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

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

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

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

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

مثال

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

با خودتان امتحان کنید

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

برای تقسیم 33.3% / 66.6%，باید از .col-sm-4 و .col-sm-8برای تقسیم 50% / 50%，باید از .col-sm-6 و .col-sm-6):

مثال

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

با خودتان امتحان کنید

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

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

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

<!-- دو ستون: 50% عرض در تمامی صفحات، به استثنای دستگاه‌های بسیار کوچک (عرض 100%) -->
<div class="row">
  <div class="col-sm">1 از 2</div>
  <div class="col-sm">2 از 2</div>
</div>
<!-- چهار ستون: 25% عرض در تمامی صفحات، به استثنای دستگاه‌های بسیار کوچک (عرض 100%) -->
<div class="row">
  <div class="col-sm">1 از 4</div>
  <div class="col-sm">2 از 4</div>
  <div class="col-sm">3 از 4</div>
  <div class="col-sm">4 از 4</div>
</div>

با خودتان امتحان کنید

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