سیستم شبکه پیش‌فرض ارائه شده به عنوان بخشی از Bootstrap، یک شبکه ۱۲ ستونی با عرض ۹۴۰ پیکسل است .

همچنین دارای چهار تغییر پاسخگو برای دستگاه ها و رزولوشن های مختلف است: تلفن، تبلت پرتره، منظره جدول و دسکتاپ های کوچک، و دسکتاپ های بزرگ با صفحه عریض.

<div class = "ردیف" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

همانطور که در اینجا نشان داده شده است، یک طرح اولیه را می توان با دو "ستون" ایجاد کرد، که هر کدام شامل تعدادی از 12 ستون پایه است که ما به عنوان بخشی از سیستم شبکه خود تعریف کردیم.

با سیستم شبکه ایستا (غیر سیال) در Bootstrap، تودرتو آسان است. برای قرار دادن محتوای خود، کافی است یک ستون جدید .rowو مجموعه ای از .span*ستون های موجود در یک .span*ستون اضافه کنید.

مثال

ردیف‌های تودرتو باید شامل مجموعه‌ای از ستون‌ها باشد که به تعداد ستون‌های اصلی آن اضافه می‌شود. به عنوان مثال، دو .span3ستون تو در تو باید در یک قرار داده شوند .span6.

<div class = "ردیف" > 
  <div class = "span12" > 
    سطح 1 ستون
    <div class = "ردیف" > 
      <div class = "span6" > سطح 2 </div> 
      <div class = "span6" > سطح 2 </div> 
    </div>
  </div>
</div>

درصد، نه پیکسل

سیستم شبکه سیال از درصد برای عرض ستون به جای پیکسل های ثابت استفاده می کند. همچنین دارای تغییرات پاسخگوی مشابه با سیستم شبکه ثابت ما است و نسبت های مناسب را برای وضوح صفحه نمایش و دستگاه های کلیدی تضمین می کند.

ردیف های سیال

هر ردیفی را به سادگی با تغییر .rowبه سیال بسازید .row-fluid. ستون‌ها دقیقاً یکسان می‌مانند و چرخش بین طرح‌بندی ثابت و سیال را بسیار ساده می‌کنند.

نشانه گذاری

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

تودرتو با شبکه های سیال کمی متفاوت است: نیازی نیست تعداد ستون های تودرتو با والد مطابقت داشته باشد. در عوض، ستون‌های شما در هر سطح بازنشانی می‌شوند، زیرا هر ردیف 100٪ از ستون اصلی را اشغال می‌کند.

<div class = "row-fluid" > 
  <div class = "span12" > 
    سطح 1 ستون
    <div class = "row-fluid" > 
      <div class = "span6" > سطح 2 </div> 
      <div class = "span6" > سطح 2 </div> 
    </div>
  </div>
</div>

متغیرها در LESS

تعبیه شده در بوت استرپ تعداد انگشت شماری از متغیرها برای سفارشی سازی سیستم شبکه پیش فرض 940px است که در بالا مستند شده است. همه متغیرهای شبکه در متغیرهای.less ذخیره می‌شوند.

نحوه سفارشی سازی

اصلاح گرید به معنای تغییر سه @grid*متغیر و کامپایل مجدد Bootstrap است. متغیرهای گرید را در variables.less تغییر دهید و از یکی از چهار روش مستند شده برای کامپایل مجدد استفاده کنید . اگر ستون‌های بیشتری اضافه می‌کنید، حتماً CSS را برای کسانی که در grid.less هستند اضافه کنید.

پاسخگو ماندن

سفارشی‌سازی شبکه فقط در سطح پیش‌فرض، شبکه ۹۴۰ پیکسلی کار می‌کند. برای حفظ جنبه‌های پاسخ‌گوی Bootstrap، همچنین باید شبکه‌ها را در responsive.less سفارشی کنید.

چیدمان ثابت

طرح‌بندی پیش‌فرض و ساده با پهنای 940 پیکسل، تقریباً برای هر وب‌سایت یا صفحه‌ای که توسط یک صفحه ارائه می‌شود <div class="container">.

<بدن>
  <div class = "کانتینر" > 
    ...
  </div>
</body>

چیدمان سیال

<div class="container-fluid">ساختار صفحه انعطاف پذیر، حداقل و حداکثر عرض و نوار کناری سمت چپ را ارائه می دهد. برای برنامه ها و اسناد عالی است.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--محتوای نوار کناری-->
    </div>
    <div class = "span10" > 
      <!--محتوای بدنه-->
    </div>
  </div>
</div>

دستگاه های پشتیبانی شده

بوت استرپ از تعداد انگشت شماری درخواست های رسانه ای در یک فایل پشتیبانی می کند تا به شما کمک کند پروژه های شما را در دستگاه های مختلف و وضوح صفحه نمایش مناسب تر کنید. در اینجا چیزی است که شامل می شود:

به متا تگ نیاز دارد

برای اطمینان از اینکه دستگاه‌ها صفحات واکنش‌گرا را به درستی نشان می‌دهند، متا تگ Viewport را نیز اضافه کنید.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

کاری که آنها انجام می دهند

پرس‌و‌جوهای رسانه‌ای بر اساس تعدادی از شرایط (نسبت‌ها، عرض‌ها، نوع نمایشگر و غیره) امکان CSS سفارشی را فراهم می‌کنند، اما معمولاً بر روی min-widthو max-width.

• عرض ستون را در شبکه خود تغییر دهید
• عناصر را به جای شناور در هر کجا که لازم است روی هم قرار دهید
• اندازه سرفصل ها و متن را تغییر دهید تا برای دستگاه ها مناسب تر باشد

بوت استرپ به طور خودکار این پرسش‌های رسانه‌ای را شامل نمی‌شود، اما درک و افزودن آنها بسیار آسان است و به حداقل تنظیمات نیاز دارد. شما چند گزینه برای گنجاندن ویژگی های واکنش گرا Bootstrap دارید:

1. از نسخه پاسخگوی کامپایل شده، bootstrap-responsive.css استفاده کنید
2. @import "responsive.less" را اضافه کنید و Bootstrap را دوباره کامپایل کنید
3. responsive.less را به عنوان یک فایل جداگانه تغییر دهید و دوباره کامپایل کنید

چرا فقط آن را شامل نمی شود؟ حقیقت را بگویم، لازم نیست همه چیز پاسخگو باشد. به جای تشویق توسعه‌دهندگان به حذف این ویژگی، بهتر است آن را فعال کنیم.

  // تلفن های افقی و پایین
  @media ( حداکثر عرض : 480 پیکسل ) { ... }     
 
  // تلفن افقی به تبلت پرتره
  @media ( حداکثر عرض : 768 پیکسل ) { ... }     
 
  // تبلت پرتره به منظره و دسکتاپ
  @media ( حداقل عرض : 768 پیکسل ) و ( حداکثر عرض : 980 پیکسل ) { ... }        
 
  // دسکتاپ بزرگ
  @media ( حداقل عرض : 1200 پیکسل ) { .. }