Стандардниот мрежен систем обезбеден како дел од Bootstrap е мрежа со 12 колони широка 940 пиксели .

Исто така, има четири одговорни варијации за различни уреди и резолуции: телефон, портрет на таблет, пејзаж на маса и мали десктоп компјутери и големи десктоп компјутери со широк екран.

<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

Вградени во Bootstrap се неколку променливи за прилагодување на стандардниот мрежен систем од 940 пиксели, документирани погоре. Сите променливи за мрежата се складираат во променливи.помалку.

Како да прилагодите

Измената на мрежата значи промена на трите @grid*променливи и прекомпајлирање на Bootstrap. Променете ги променливите на мрежата во променливите.less и користете еден од четирите документирани начини за повторно компајлирање . Ако додавате повеќе колони, задолжително додадете CSS за оние во grid.less.

Останувајќи одговорен

Приспособувањето на мрежата работи само на стандардното ниво, мрежата од 940 пиксели. За да ги одржите одговорните аспекти на Bootstrap, исто така ќе треба да ги приспособите мрежите во responsive.less.

Фиксен распоред

Стандардниот и едноставен распоред со ширина од 940 пиксели, центриран за речиси секоја веб-локација или страница обезбедена од еден <div class="container">.

<тело>
  <div class = „контејнер“ > 
    ...
  </div>
</body>

Распоред на течност

<div class="container-fluid">дава флексибилна структура на страници, минимум и максимални ширини и странична лента од левата страна. Одлично е за апликации и документи.

<div class = „контејнер-флуид“ > 
  <div class = „ред-флуид“ > 
    <div class = "span2" > 
      <!--Содржина на страничната лента-->
    </div>
    <div class = "span10" > 
      <!--Содржина на телото-->
    </div>
  </div>
</div>

Поддржани уреди

Bootstrap поддржува неколку медиумски барања за да ви помогне да ги направите вашите проекти посоодветни на различни уреди и резолуции на екранот. Еве што е вклучено:

Она што го прават

Пребарувањата за медиумите дозволуваат прилагодено CSS врз основа на голем број услови - сооднос, ширина, тип на приказ итн. - но обично се фокусира околу min-widthи max-width.

• Изменете ја ширината на колоната во нашата мрежа
• Ставете ги елементите наместо да лебдат каде и да е потребно
• Променете ја големината на насловите и текстот за да бидат посоодветни за уредите

Bootstrap не ги вклучува автоматски овие медиумски барања, но нивното разбирање и додавање е многу лесно и бара минимално поставување. Имате неколку опции за вклучување на одговорните карактеристики на Bootstrap:

1. Користете ја компајлираната одговорна верзија, bootstrap-responsive.css
2. Додајте @import „responsive.less“ и прекомпајлирај го Bootstrap
3. Изменете и прекомпајлирајте го Responsive.less како посебно

Зошто само да не го вклучите? За волја на вистината, не треба сè да реагира. Наместо да ги охрабруваме програмерите да ја отстранат оваа функција, сметаме дека најдобро е да ја овозможиме.

  // Пејзажни телефони и надолу
  @media ( макс - широчина : 480 пиксели ) { ... }     
 
  // Пејзажен телефон до таблет со портрет
  @media ( макс - широчина : 768 пиксели ) { ... }     
 
  // Портрет таблет на пејзаж и десктоп
  @media ( мин . ширина : 768 пиксели ) и ( макс . ширина : 940 пиксели ) { ... }        
 
  // Голема работна површина
  @media ( мин . ширина : 1200 пиксели ) { .. }