سیستم شبکه‌ای

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳


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

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

اگر نمی‌خواهید همه ۱۲ ستون را جداگانه استفاده کنید، می‌توانید ستون‌ها را با هم گروه‌بندی کرده تا ستون‌های عریض‌تری ایجاد شوند:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


سیستم شبکه ای بوت استرپ واکنش گرا استو ستون‌ها برحسب سایز صفحه نمایش هر دستگاهی مجدداً تنظیم می‌شوند.

کلاس های Grid (به فارسی: شبکه)

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

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

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

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

 1 <div class="row">
 2   <div class="col-*-*"></div>
 3   <div class="col-*-*"></div>
 4 </div>
 5 <div class="row">
 6   <div class="col-*-*"></div>
 7   <div class="col-*-*"></div>
 8   <div class="col-*-*"></div>
 9 </div>
10 <div class="row">
11   ...
12 </div>

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

در ادامه ما چند مثال ساده از چیدمان شبکهٔ بوت استرپ ذکر کرده‌ایم.

سه ستون مساوی

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال زیر نشان می‌دهد چگونه سه ستون با عرض مساوی داشته باشیم که با اندازه تبلت شروع و در نهایت تا اندازه رایانه‌های رومیزی بزرگ مقیاس می‌شود. در موبایل‌ها یا صفحه نمایش‌هایی که عرض کمتر از ۷۶۸ پیکسل دارند، ستون‌ها بطور خودکار مرتب می‌شوند:

مثال

1 <div class="row">
2   <div class="col-sm-4">.col-sm-4</div>
3   <div class="col-sm-4">.col-sm-4</div>
4   <div class="col-sm-4">.col-sm-4</div>
5 </div>

دو ستون برابر

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال زیر نشان می‌دهد چگونه دو ستون با عرض‌های متفاوت داشته باشیم که با اندازه تبلت آغاز می‌شوند و به اندازه رایانه‌های رومیزی بزرگ مقیاس می‌شوند:

مثال

1 <div class="row">
2   <div class="col-sm-4">.col-sm-4</div>
3   <div class="col-sm-8">.col-sm-8</div>
4 </div>
نکته: در مورد شبکه بندی‌های بوت استرپ در آینده در این آموزش بیشتر خواهید آموخت.


منابع آموزشی