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

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

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

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

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

Пример

Вложенные строки должны включать набор столбцов, которые в сумме равны количеству столбцов его родителя. Например, два вложенных .span3столбца должны быть размещены в файле .span6.

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

Проценты, а не пиксели

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

Жидкие ряды

Сделайте любую строку плавной, просто изменив .rowее на .row-fluid. Столбцы остаются прежними, что упрощает переключение между фиксированным и плавным макетами.

Разметка

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

Вложение с плавающими сетками немного отличается: количество вложенных столбцов не обязательно должно совпадать с родительским. Вместо этого ваши столбцы сбрасываются на каждом уровне, потому что каждая строка занимает 100% родительского столбца.

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

Требуется метатег

Чтобы обеспечить правильное отображение адаптивных страниц на устройствах, включите метатег области просмотра.

<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 ( максимальная ширина : 480 пикселей ) { ... }     
 
  // Телефон с альбомной ориентацией на планшет с портретной ориентацией
  @media ( максимальная ширина : 768 пикселей ) { ... }     
 
  // Планшет с вертикальной ориентации на альбомную и рабочий стол
  @media ( минимальная ширина : 768 пикселей ) и ( максимальная ширина : 980 пикселей ) { ... }        
 
  // Большой рабочий стол
  @media ( минимальная ширина : 1200 пикселей ) { .. }