Система сетки по умолчанию, предоставляемая как часть Bootstrap, представляет собой сетку шириной 940 пикселей с 12 столбцами .

Он также имеет четыре адаптивных варианта для различных устройств и разрешений: телефон, планшетный портрет, настольный альбом и маленькие рабочие столы, а также большие широкоэкранные рабочие столы.

<div класс = "строка" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Как показано здесь, базовый макет может быть создан с двумя «столбцами», каждый из которых охватывает несколько из 12 основных столбцов, которые мы определили как часть нашей системы сетки.

Благодаря статической (неизменяемой) сетке в Bootstrap вложение очень просто. Чтобы вложить содержимое, просто добавьте новый .rowи набор .span*столбцов в существующий .span*столбец.

Пример

<div класс = "строка" > 
  <div класс = "span12" > 
    Уровень 1 столбца
    <div класс = "строка" > 
      <div class = "span6" > Уровень 2 </div> 
      <div class = "span6" > Уровень 2 </div> 
    </div>
  </div>
</div>

Переменные в LESS

В Bootstrap встроено несколько переменных для настройки системы сетки по умолчанию 940px, описанной выше. Все переменные сетки хранятся в файле variable.less.

Как настроить

Изменение сетки означает изменение трех @grid*переменных и перекомпиляцию Bootstrap. Измените переменные сетки в variable.less и используйте один из четырех задокументированных способов перекомпиляции . Если вы добавляете больше столбцов, обязательно добавьте CSS для столбцов в grid.less.

Оставаясь отзывчивым

Настройка сетки работает только на уровне по умолчанию, сетке 940 пикселей. Чтобы сохранить отзывчивые аспекты Bootstrap, вам также придется настроить сетки в responsive.less.

Фиксированная раскладка

Стандартный и простой центрированный макет шириной 940 пикселей практически для любого веб-сайта или страницы, предоставляемый одним файлом <div class="container">.

<тело>
  <div класс = "контейнер" > 
    ...
  </div>
</тело>

Плавный макет

<div class="container-fluid">дает гибкую структуру страницы, минимальную и максимальную ширину и левую боковую панель. Это отлично подходит для приложений и документов.

<div class = "контейнер-жидкость" > 
  <div класс = "жидкость строки" > 
    <div класс = "span2" > 
      <!--Содержимое боковой панели-->
    </div>
    <div класс = "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 пикселей ) { .. }