Bootstrap сетка

Bootstrap имеет свою сеточную систему, которая позволяет упростить верстку адаптивных макетов.

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

Сеточная система Bootstrap состоит из 12-ти колонок и имеет четыре размера:

  • Большие устройства ≥1200px
  • Средние устройства  ≥992px
  • Малые устройства  (планшеты) ≥768px
  • Очень маленькие устройство (телефоны) <768px

 

Вся сетка должна располагается в контейнере, класс container или container-fluid.  Отличие классов, в том что в  первом случает максимальная ширина будет 1170px, т.е. ширина сайта не будет больше этого значения.

Внутри этого контейнера должен быть еще один элемент с классом row, строка сетки.  В строке должны располагаться колонки.   Для каждого размера колонки существует свой класс, так же класс существует и для каждого размера экрана:

  • Большие устройства, класс .col-lg-
  • Средние устройства  .col-md-
  • Малые устройства  (планшеты) .col-sm-
  • Очень маленькие устройство (телефоны) .col-xs-

В конце указывается количество занимаемых колонок от 1 до 12. Т.е. для большого устройства размер на 12 колонок  будет col-lg-12, размер в 1 колонку —  col-lg-1,  по аналогии и для других размеров.

Давайте рассмотрим пример:

<div class = "container">
 <div class = "row">
  <div class = "col-md-3 col-sm-6 col-sm-12">Первый</div>
  <div class = "col-md-9 col-sm-6 col-sm-12">Второй</div>
 </div>
</div>

В самом начале мы создали контейнер, потом определили строку. Создали две колонки. Первая колонка на больших и средних устройствах будет занимать 3 колонки (25% ширины экрана), для  планшета 6 колонок (50% ширины экрана) и для телефона 12 колонок (100% ширины экрана), вторая колонка будет  занимать на компьютере 9 колонок (75%), для планшета 6 колонок (50%) и для телефона 12 колонок (100%).

Посмотреть, как будут работать колонки в браузере очень легко,  нужно сужать размеры окна браузера и вы увидите, как будут изменяться размеры колонок.

Размеры окна в браузере Chrome удобней задавать с помощью специального расширения Window Resizer, установить   его можно по ссылке https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?utm_source=chrome-app-launcher-info-dialog.