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

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

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

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

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

مثال

<div class = "ردیف" > 
  <div class = "span12" > 
    سطح 1 ستون
    <div class = "ردیف" > 
      <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>

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

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

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

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

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

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

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

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

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