Мрежовата система по подразбиране, предоставена като част от Bootstrap, е мрежа с 12 колони с ширина 940px .

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

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

Както е показано тук, може да се създаде основно оформление с две "колони", всяка от които обхваща няколко от 12-те основни колони, които дефинирахме като част от нашата мрежова система.

Със статичната (не течна) мрежова система в Bootstrap влагането е лесно. За да вложите съдържанието си, просто добавете нова .rowи набор от .span*колони в съществуваща .span*колона.

Пример

Вложените редове трябва да включват набор от колони, които се събират до броя на колоните на неговия родител. Например две вложени .span3колони трябва да бъдат поставени в .span6.

<div class = "row" > 
  <div class = "span12" > 
    Ниво 1 на колоната
    <div class = "row" > 
      <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

В Bootstrap са вградени няколко променливи за персонализиране на мрежовата система от 940px по подразбиране, документирана по-горе. Всички променливи за мрежата се съхраняват във variables.less.

Как да персонализирате

Модифицирането на мрежата означава промяна на трите @grid*променливи и повторно компилиране на Bootstrap. Променете променливите на мрежата във variables.less и използвайте един от четирите документирани начина за повторно компилиране . Ако добавяте повече колони, не забравяйте да добавите CSS за тези в grid.less.

Да останеш отзивчив

Персонализирането на мрежата работи само на нивото по подразбиране, мрежата от 940 пиксела. За да поддържате отзивчивите аспекти на 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>

Поддържани устройства

Bootstrap поддържа няколко медийни заявки в един файл, за да ви помогне да направите вашите проекти по-подходящи за различни устройства и разделителни способности на екрана. Ето какво е включено:

Изисква мета таг

За да гарантирате, че устройствата показват правилно адаптивни страници, включете мета тага на прозореца за изглед.

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

Това, което правят

Медийните заявки позволяват персонализиран CSS въз основа на редица условия - съотношения, ширини, тип на дисплея и т.н. - но обикновено се фокусира около min-widthи max-width.

• Променете ширината на колоната в нашата мрежа
• Подреждайте елементи вместо плаващи, където е необходимо
• Преоразмерете заглавията и текста, за да бъдат по-подходящи за устройства

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

1. Използвайте компилираната адаптивна версия, bootstrap-responsive.css
2. Добавете @import "responsive.less" и прекомпилирайте Bootstrap
3. Променете и прекомпилирайте responsive.less като отделен файл

Защо просто не го включите? Честно казано, не всичко трябва да е отзивчиво. Вместо да насърчаваме разработчиците да премахнат тази функция, смятаме, че е най-добре да я активираме.

  // Пейзажни телефони и надолу
  @media ( максимална ширина : 480px ) { ... } _     
 
  // Пейзаж телефон към портретен таблет
  @media ( максимална ширина : 768px ) { ... } _     
 
  // Портрет таблет към пейзаж и работен плот
  @media (min-width: 768px) and (max-width: 980px) { ... }
 
  // Large desktop
  @media (min-width: 1200px) { .. }