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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

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

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

در بخش قبلی، مثالی از شبکه بندی با کلاس‌هایی برای دستگاه‌های کوچک و متوسط ارائه کردیم. از دو div (ستون) استفاده کرده و یه آنها تقسیم بندی ۲۵٪-۷۵٪ در دستگاه‌های کوچک و تقسیم بندی ۵۰٪-۵۰٪ در دستگاه‌های متوسط دادیم.[۱]

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

اما در دستگاه‌های متوسط ممکن است طراحی با تقسیم بندی ۳۳٪-۶۶٪ بهتر باشد.

نکته: دستگاه‌های متوسط بعنوان دستگاه‌های دارای ۱۲۰۰ پیکسل و بیشتر تعریف می‌شوند.

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

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

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

حال بوت استرپ خواهد گفت «برای سایزهای کوچک به دنبال کلاس‌هایی با عبارت -sm- بگردید و از آنها استفاده کنید. در دستگاه‌های متوسط، کلاس‌های دارای عبارت -md- را جستجو کرده و از آنها استفاده کنید. برای دستگاه‌های بزرگ، کلاس‌هایی دارای کلمه -lg- را جستجو کرده و از آنها استفاده کنید».

مثال زیر منجر به تقسیم بندی ۷۵٪-۲۵٪ در دستگاه‌های کوچک، تقسیم بندی ۵۰٪-۵۰% در دستگاه‌های متوسط و تقسیم بندی ۶۶٪-۳۳٪ در دستگاه‌های بزرگ می‌شود:

مثال

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


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


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

فقط استفاده از بزرگ

در مثال پایین، فقط کلاس .col-lg-6 را به کار برده‌ایم (بدون استفاده از .col-md-* و .col-sm-*). این یعنی دستگاه‌های بزرگ تقسیم بندی ۵۰٪-۵۰٪ دارند. با این حال، برای دستگاه‌های متوسط و بزرگ، یه حالت پشته ای عمودی تبدیل می‌شود (عرض ۱۰۰٪).

مثال

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


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



منابع آموزشی