سیستم شبکه‌بندی

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

سیستم شبکه‌ای بوت استرپ صفحه را به ۱۲ ستون تقسیم بندی می‌کند.[۱]

در صورتی که نخواهید همهٔ ۲۰ ستون را بطور مجزا استفاده کنید، می‌توانید چند ستون را با هم در یک دسته قرار دهید تا ستون‌های عریض تری ایجاد شود:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

سیستم شبکه ای بوت استرپ واکنش‌گرا است و ستون‌ها براساس اندازه صفحه نمایش مجدداً مرتب می‌شوند: ممکن است در صفحه نمایش بزرگ بهتر باشد محتوا در سه ستون مرتب شود اما در صفحه نمایش کوچک شاید بهتر باشد محتواها روی یکدیگر بصورت پشته ای (Stacked) قرار بگیرند

نکته: به یاد داشته باشید ستون‌های Grid حداکثر می‌توانند ۱۲ در یک ردیف ستون داشته باشند. بیشتر از این تعداد ستون‌ها فارغ از صفحه نمایش روی هم قرار می‌گیرند.

کلاس های Grid

سیستم شبکه بندی دارای چهار کلاس است:

  • xs (برای موبایل‌ها - صفحه نمایش‌هایی با عرض کوچکتر از ۷۶۸ پیکسل)
  • sm (برای تبلت‌ها - صفحه نمایش‌هایی با عرض بزرگتر از ۷۶۸ پیکسل)
  • md (برای لپ تاپ‌های کوچک - صفحه نمایش‌هایی با عرض ۹۹۲ پیکسل یا بزرگتر)
  • lg (برای لپ تاپ‌های بزرگ و رایانه‌های رومیزی - صفحه نمایش‌هایی با عرض ۱۲۰۰ پیکسل یا بزرگتر)

کلاس‌های بالا را می‌توان ترکیب کرد تا چیدمان‌های پویا تر و منعطف تری ایجاد کرد.

نکته: مقیاس هر یک این کلاس‌ها را می‌توان افزایش داد، بنابراین اگر می‌خواهید عرض‌های مشابه برای xs و sm تنظیم کنید، فقط xs مورد نیاز است.

قوانین سیستم شبکه بندی

برخی از قوانین سیستم شبکه بندی:

  • برای حاشیه و صف بندی صحیح، ردیف‌ها باید در یک .container (با عرض ثابت) یا در یک .container-fluid (با عرض ثابت) قرار بگیرند
  • از ردیف‌ها می‌توان برای ایجاد گروه‌های ستون افقی استفاده کرد
  • محتوا باید داخل ستون‌ها قرار گیرد و فقط ستون‌ها می‌توانند فرزندان بی واسطهٔ ردیف‌ها باشند
  • کلاس‌های از پیش تعریف شده مانند .row و .col-sm-4.col-sm-4 برای ایجاد سریع چیدمان Grid به کار می‌روند
  • ستون‌ها از طریق Padding (به فارسی: حاشیه)، Gutterها را ایجاد می‌کنند (فاصله‌های بین محتوای ستون‌ها). این حاشیه فاصلهٔ ردیف‌ها برای اولین و آخرین ستون از طریق حاشیه منفی در .rows است
  • ستون‌های شبکه از طریق تعیین از بین ۱۲ ستون موجود تعیین می‌شوند. برای مثال برای تعیین سه ستون موازی باید از سه تا .col-sm-4 استفاده شود
  • عرض ستون‌ها به درصد هستند، بنابراین همیشه شناور بوده و نسبت به عنصر والدشان سایزدهی می‌شوند

ساختار پایه یک شبکه بوت استرپ

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

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

بنابران برای ایجاد چیدمان مورد نظر، باید یک ظرف (Container) ایجاد شود (<div class="container">). سپس ردیفی ایجاد شود (<div class="row">). سپس تعداد مورد نیاز ستون‌ها اضافه شوند (تگ‌هایی با کلاس‌های .col-*-* مناسب). توجه کنید که تعداد در .col-*-* همیشه باید برای هر ردیف حداکثر به ۱۲ برسد.

امکانات شبکه

جدول زیر نحوهٔ عملکرد سیستم شبکه بندی بوت استرپ را در چند دستگاه نشان می‌دهد:

<768px

خیلی کوچک

>=768px

کوچک

>=992px

متوسط

>=1200px

بزرگ

پیشوند کلاس .col-xs- .col-sm- .col-md- .col-lg-
مناسب برای موبایل‌ها تبلت‌ها لپ تاپ‌های کوچک لپ تاپ‌ها و رایانه‌های رومیزی
رفتار شبکه همیشه افقی در ابتدا بصورت جمع شده (Collapsed)، بالای Breakpoint بصورت افقی در ابتدا بصورت جمع شده، بالای Breakpointها بصورت افقی در ابتدا بصورت جمع شده، بالای Breakpointها بصورت افقی
عرض Container صفر (بطور خودکار) 750px 970px 1170px
# تعداد ستون‌ها ۱۲ ۱۲ ۱۲ ۱۲
عرض ستون Auto ~62px ~81px ~97px
عرض Gutter ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون) ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون) ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون) ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون)
قابلیت تودرتو شدن بله بله بله بله
فاصله بله بله بله بله
ترتیب ستون‌ها بله بله بله بله

مثال‌ها

بخش بعدی مثال‌هایی در مورد سیستم‌های شبکه بندی درستگاه‌های مختلف ارائه می‌دهد:

منابع آموزشی