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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
خیلی کوچک کوچک بزرگ متوسط
پیشوند کلاس .col-xs .col-sm .col-md .col-lg
عرض صفحه نمایش <768px >=768px >=992px >=1200px

فرض کنید چیدمان ساده ای با ستون داریم. می‌خواهیم ستون‌ها به صورت ۷۵٪-۲۵٪ برای دستگاه‌های کوچک تقیسم شوند.[۱]

نکته: دستگاه‌های کوچک بعنوان دستگاه‌هایی با اندازه صفحه نمایش ۷۶۸ پیکسل تا ۹۹۱ پیکسل تعریف می‌شوند.

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

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

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

اکنون بوت استرپ خواهد گفت «برای اندازه‌های کوچک، به دنبال کلاس‌هایی با -sm- بگردید و از آنها استفاده کنید».

مثال زیر منجر به تقسیم بندی ۷۵٪-۲۵٪ در دستگاه‌های کوچک (و متوسط و بزگ) می‌شود. در دستگاه‌های بسیار کوچک، بطور خودکار به حالت پشته ای تبدیل خواهد شد.


مثال

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>


مشاهدهٔ نتیجه


توجه: مطمئن شوید که همیشه مجموع حداکثر ۱۲ شود.

برای تقیسم بندی ۳۳٫۳٪ / ۶۶٫۶٪ از .col-sm-4 و .col-sm-8 استفاده می‌شود:


مثال

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>


مشاهدهٔ نتیجه


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

منابع آموزشی