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

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
شبکه‌بندی
۱سیستم شبکه‌بندی
۲stacked/افقی
۳شبکه‌بندی خیلی‌کوچک
۴شبکه‌بندی کوچک
۵شبکه‌بندی متوسط
۶شبکه‌بندی بزرگ
۷شبکه‌بندی خیلی‌بزرگ
۸مثال‌های شبکه‌بندی
Theme
مرجع

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

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

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

کلاس های شبکه

سیستم شبکه بندی بوت استرپ ۴، پنج کلاس دارد:

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

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

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

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

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

  • ردیف‌ها باید داخل یک .container (با عرض ثابت) یا .container-fluid (با عرض کامل) باشند تا alignment و padding مناسب ایجاد شود
  • از ردیف‌ها برای ایجاد گروه‌های ستون‌ها استفاده می‌شود
  • محتوا باید داخل ستون‌ها قرار بگیرند و فقط ستون‌ها باید فرزندان بی واسطهٔ ردیف‌ها باشند
  • کلاس‌های از پیش تعریف شده ..row و .col-sm-4 برای ایجاد سریع استایل موجود هستند
  • ستون‌ها gutterها (فاصله بین محتوای ستون) را از طریق padding ایجاد می‌کنند. این padding (حاشیه درونی) فاصلهٔ بین ردیف‌ها برای اولین و آخرین ستون از طریق حاشیه منفی در .rows است
  • ستون‌های شبکه از طریق انتخاب از بین ۱۲ ستون موجود ایجاد می‌شوند. برای مثال برای تعیین سه ستون موازی باید از سه تا .col-sm-4 استفاده شود
  • عرض ستون‌ها به درصد هستند، بنابراین همیشه شناور بوده و نسبت به عنصر والدشان سایزدهی می‌شوند
  • بزرگترین تفاوت بین بوت استرپ ۳ و ۴ این است که بوت استرپ ۴ از flexboxها بجای floatها استفاده می‌کند. یکی از مزایای مهم بوت استرپ ۴ این است که ستون‌های شبکه بدون عرض مشخص، بطور خودکار بعنوان «ستون‌های دارای عرض برابر» (و ارتفاع برابر) چیده می‌شوند. مثال: سه عنصر با .col-sm هرکدام بطور اتوماتیک دارای ۳۳٫۳۳٪ عرض breakpoint کوچک به بالا می‌شوند. <translate> نکته</translate>  نکته: اگر می‌خواهید درمورد Flexbox بیشتر بیاموزید می‌توانید به آموزش CSS Flexbox مراجعه کنید.

دقت کنید که Flexbox در IE9 و نسخه‌های قدیمی‌تر پشتیبانی نمی‌شود.

اگر نیازمند پشتیبانی IE8-9 هستید از بوت استرپ ۳ استفاده کنید. زیرا پایدارترین نسخه بوت استرپ است و توسط تیم برای bugfixهای بحرانی و تغییرات مستندسازی پشتیبانی می‌شود. با این حال هیچ ویژگی جدیدی به آن اضافه نمی‌شود.

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

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

 1 <!-- Control the column width, and how they should appear on different devices -->
 2 <div class="row">
 3   <div class="col-*-*"></div>
 4   <div class="col-*-*"></div>
 5   <div class="col-*-*"></div>
 6 </div>
 7 
 8 <!-- Or let Bootstrap automatically handle the layout -->
 9 <div class="row">
10   <div class="col"></div>
11   <div class="col"></div>
12   <div class="col"></div>
13   <div class="col"></div>
14 </div>


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


اولین مثال: یک ردیف ایجاد کنید (<div class="row">). سپس، تعداد مورد نظر ستون‌ها را اضافه کنید (تگ‌هایی با کلاس‌های .col-*-*). ستاره (*) اول واکنش‌گرایی (به انگلیسی: Responsiveness) را نشان می‌دهد: sm, md, lg یا xl، در حالیکه ستاره (*) دوم نشان دهندهٔ تعداد است که مجموع آن به ازاء هر ردیف باید حداکثر ۱۲ تا باشد.

مثال دوم: بجای اضافه کردن عدد به هر col، بهتر است بوت استرپ برای ایجاد ستون‌های برابر چیدمان را مدیریت کند: دو عنصر "col" با عرض ۵۰٪ برای هر col باشد. سه عنصر col با عرض ۳/۳۳ برای هر کدام. چهار عنصر col با عرض ۲۵٪ برای هر کدام و غیره. می‌توان از .col-sm|md|lg|xl برای ایجاد ستون‌های واکنش گرا استفاده کرد.

امکانات شبکه

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

خیلی کوچک

(<۵۷۶ پیکسل)

کوچک

(=< ۵۷۶ پیکسل)

متوسط

(=<۷۶۸ پیکسل)

بزرگ

(=<۹۹۲ پیکسل)

خیلی بزرگ

(>= ۱۲۰۰ پیکسل)

پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl-
رفتار شبکه همیشه افقی در ابتدا بصورت جمع شده (به انگلیسی: Collapsed)، بالای Breakpoint بصورت افقی در ابتدا بصورت جمع شده (به انگلیسی: Collapsed)، بالای Breakpoint بصورت افقی در ابتدا بصورت جمع شده (به انگلیسی: Collapsed)، بالای Breakpoint بصورت افقی در ابتدا بصورت جمع شده (به انگلیسی: Collapsed)، بالای Breakpoint بصورت افقی
عرض ظرف هیچ (خودکار) 540px 720px 960px 1140px
مناسب برای موبایل‌های عمودی موبایل‌های افقی تبلت‌ها لپ تاپ‌ها لپ تاپ‌ها و رایانه‌های رومیزی
# تعداد ستون‌ها ۱۲ ۱۲ ۱۲ ۱۲ ۱۲
عرض Gutter ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون) ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون) ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون) ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون) ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون)
قابلیت تودرتو شدن بله بله بله بله بله
فاصله‌ها بله بله بله بله بله
ترتیب ستون‌ها بله بله بله بله بله

مثال‌ها

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


منابع آموزشی