Скеле

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

Мрежа по подразбиране 940px

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

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

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

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

Изместване на колони

4 отместване 4

3 отместване 3

8 отместване 4

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

Вложени колони

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

Пример

Ниво 1 на колоната

Ниво 2

<div class = "row" > 
  <div class = "span12" > 
    Ниво 1 на колоната
    <div class = "row" > 
      <div class = "span6" > Ниво 2 </div> 
      <div class = "span6" > Ниво 2 </div> 
    </div>
  </div>
</div>

Персонализиране на мрежата

Променлива	Стойност по подразбиране	Описание
`@gridColumns`	12	Брой колони
`@gridColumnWidth`	60px	Ширина на всяка колона
`@gridGutterWidth`	20px	Отрицателно пространство между колоните
`@siteWidth`	Изчислена сума на всички колони и улуци	Преброява броя на колоните и улуците, за да зададе ширината на `.container-fixed()`миксина

Променливи в 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 поддържа няколко медийни заявки, за да ви помогне да направите вашите проекти по-подходящи за различни устройства и разделителни способности на екрана. Ето какво е включено:

Етикет	Ширина на оформлението	Ширина на колоната	Ширина на улука
Смартфони	480px и по-долу	Течни колони, без фиксирани ширини
Таблетки за портрети	480px до 768px	Течни колони, без фиксирани ширини
Пейзажни таблети	768px до 940px	44px	20px
По подразбиране	940px и нагоре	60px	20px
Голям дисплей	1210px и нагоре	70px	30px

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

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

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

Използване на медийни заявки

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

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

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

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