По этой ссылке вы можете сразу увидеть базовые примеры: http://getbootstrap.com/getting-started/#examples, открыть их и изучить.

Бутстраповская верстальная сетка состоит из 12 колонок.

Если вы никогда не видели печатные верстальные сетки для газет, то выглядели они примерно так:

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

Из этой картинки мы видим, например, что два нижних объявления занимают по 2 колонки каждое. Верхнее объявление занимает три колонки, и т.п.

Теперь представьте себе бутстрап как такую сетку, только не на 4 колонки, а на 12 — для большего контроля. И мысленно заштрихуйте блоки, которые займут определенное количество колонок:

Каждый цвет блока соответствует цвету шрифта, становится очевидна разметка бутстрапа — col в начале означает column (колонка), цифра в конце — количество занимаемых колонок.

Теперь немного простейшей математики. Если у нас 4 дива, и мы хотим, чтобы они были равны по ширине, какие колонки нужно использовать? 12 / 4 = 3, значит, нам нужно четыре дива с классом col-md-3.

Если нужно три одинаковых дива, то получаем дивы из бутстрап-примера — col-md-4 (12 / 3 = 4).

Две одинаковые колонки на всю ширину? Два col-md-6.

8 к 4? Col-md-8 плюс col-md-4.

Элементарный принцип, не правда ли?

Теперь — что означает md в середине названия класса?

md — это middle — средний.

Откроем пример http://getbootstrap.com/examples/grid/.

Проскролльте его до заголовка Mixed: mobile and desktop.

Мы видим див с названием .col-xs-12 .col-sm-6 .col-lg-8.

Измените размер окна до размеров телефона. Что мы видим? Колонка, которая занимала половину ряда вдруг заняла всю ширину ряда, вытолкнув соседнюю на следующую строку!

Вот это и есть принцип «жидкой таблицы», как я бы это назвала. Мы имели строгую табличную верстку, состоящую из ряда row и колонок col, как вдруг одна колонка взбунтовалась и заняла целый ряд.

Итак, что за фокус. В бутстрапе каждому диву можно задать до четырех классов, которые относятся исключительно к размерам блока на разных устройствах. Если мы условились на 4 размера устройств, то вот тут мы их и используем:

xs — extra-small (экстра-маленький, телефон)

sm — small (маленький, телефон-планшет)

md — middle (средний, ноутбук, маленький десктопный монитор)

lg — large (большой, широкий монитор)

Итак, мы можем каждому диву сказать: занимай на телефоне 12 колонок, на размере от планшета до маленького десктопа — 6, на широком мониторе — 8:

<div class="col-xs-12 col-sm-6 col-lg-8">

...

</div>

По-моему, все элементарно.

Мы занимаем определенное количество колонок в ряду, при этом у нас всегда 12 колонок, и они резиновые — тянутся, как ячейки в авоське.

Сокращая макет примера мы получаем такую структуру:

<div class="container">

    <div class="row">

        <div class="col-xs-12 col-sm-6 col-lg-8">

        </div>

        <div class="col-xs-6 col-lg-4">

        </div>

    </div>

</div>

На первый взгляд это идентично:

<table>
  <tr>

    <td>
    </td>

    <td>
    </td>

  </tr>
</table>

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

Разберем подробнее

Начинаем с бОльшего и идем к меньшему, то есть — от самых больших контейнеров к более мелкому делению.

Основные контейнеры бутстрапа — это container (контейнер) и row (ряд, как мы помним из tr — table row). Внутри них — колонки (как в таблицах — ячейки), это и есть col-md или col-xs.

Ряд занимает всю ширину страницы.

Контейнер оставляет по бокам от себя поля.

Если ряд (row) имеет ширину в процентах (100%), то контейнер — в пикселях. На разных ширинах у контейнера тоже разная ширина. Например, на широком экране (от 1200 пкс и шире) ширина контейнера 1170px.

Если ширина экрана от 992 пкс до 1200, то ширина контейнера будет 970px. И так далее вплоть до мобильника.

В действии это можно увидеть по ссылке: http://getbootstrap.com/examples/grid/

Открываем инспектор:

Меняем ширину окна:

Как вы видите, контейнер сохраняет фиксированную ширину до определенной критической точки, после чего ширина резко меняется и остается таковой до следующией критической точки. Начиная с планшета и до телефона контейнер теряет фиксированную ширину и становится таким же, как ряд (row), то есть — тянется на всю ширину, как резина.

Что это за крические точки, и как бутстрап понимает, что пора сменить ширину контейнера?

Внимание, мы подошли к важнейшей части адаптивной верстки — media query — переводится, как «запрос устройства».

Главная идея в том, чтобы менять свойства объектов (ширины, высоты, размеры шрифтов, а также цвета, рамки и вообще — любые свойства css) в заисимости от устройства.

В основном мы меняем эти свойства в зависимости от ШИРИНЫ устройства, реже — в зависимости от его ВЫСОТЫ. Иногда нужен такой точный контроль, что используются другие условия, например — соотношение сторон. Полный список доступных media query представлен здесь: www.w3schools.com/cssref/css3_pr_mediaquery.asp.

Мы не будем слишком углубляться в дебри, рассмотрим самый используемый способ — зависимость от ширины устройства.

Пока вы инспектировали пример бутстраповского макета (см. выше), то заметили, что ширина контейнера прописана внутри таких вот блоков:

@media (min-width: 992px){
  сontainer {
    width: 970px;
  }
}

Вот этот кусок:

@media (min-width: 992px){

}

это и есть медиа квери.

Он указывает: при минимальной ширине 992 пикселя: такие-то условия.

Медиа квери задает дополнительные фигурные скобки, то есть внутрь блока:

@media (min-width: 992px){

}

мы вставляем блок с непосредственно стилями:

сontainer {
 width: 970px;
 }

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

Итак, что за критические точки?

Так как вьюпортов около сотни, нам нужно прийти к какому-то общему соглашению — давайте делать верстку для трёх-четырёх более или менее общих размеров: десктоп, ноутбук, планшет и телефон. Хотя телефоны сильно разняться по размерам экрана, всё же есть примерный разброс. Бутстрап выбрал максимальную ширину телефона в вертикальном положении 468px. Просто эмпирическим путём тестирования на сотнях устройств.

Далее мы (разработчики) «договариваемся», что основное количество телефонов в горизонтальном положении (режим landscape) не будет превышать 768px. Конечно же, есть телефоны, которые выпадают за пределы этих ширин! Но мы «договорились», что к таким большим телефонам будут применяться правила верстки для планшетов.

Итак, следующими критическими точками являются размеры для вертикальных и горизонтальных планшетов. Мы ограничиваемся 992px и 1024px. Если планшет больше, он подчиняется десктопной или ноутбуковской верстке.

Эти критические точки называются брейкпоинтами — от слова break (брейк) — ломаться. В этих точках макет «ломается» — дивы меняют свое пложение, падают друг под друга, меню становится свернутым, шрифты уменьшаются или увеличиваются — в зависмости от требований дизайна.

Все это гораздо проще увидеть и почувствовать, чем я тут объясняю. Достаточно потягать страничку с примером туда-сюда, и увидеть, как контейнер меняет свои размеры в зависимости от брейкпоинтов.

Еще немного зауми: бутстрап подчиняется правилу mobile first — это направление верстки, когда макет делают в первую очередь для мобильников, а потом идут на расширение до десктопа. Таким образом, мобильники получают самую облегченную версию css, все остальное, что находится внутри медиа квери — не читается и не интерпретируется за ненадобностью.

Это самый лчуший метод, но он не очень удобный для обычных верстальщиков, вроде нас. Нам удобнее верстать для десктопа, а уже потом подгонять всё для планшетов и мобил. В этом нет ничего страшного. Тяжелый бутстрап-файл тянется как надо — мобила не качает его весь. А наши стили обычно общие для всех устройств, кроме каких-то мелких адаптаций.

К чему я это все. Когда мы создаем свои медиа-квери, если мы идем от десктопа до мобилки, то мы ставим ограничения не на минимум, а на максимум. Например, вот бутстраповский квери — для всех ширин до МИНИМАЛЬНОЙ 992 пкс:

@media (min-width: 992px){
 сontainer {
   width: 970px;
 }
}

Если же нам нужно дать контейнеру, например, рамку — от самого мелкого экрана (телефона) ДО 992 пкс (до ноутбука, планшет включительно), то мы пишем наоборот, для всех ширин до МАКСИМАЛЬНОЙ 991 пкс:

@media (max-width: 991px){
 сontainer {
   border: 2px solid red;
 }
}

В итоге обычный кастомный лист стилей с медиа-квери выглядит примерно так:

@media (max-width: 1280px) {
 стили для ноутбука
 }
@media (max-width: 992px) {
 стили для планшета

}
@media (max-width: 767px) {
 стили для горизонтального телефона

}

@media (max-width: 468px) {
 стили для телефона

}

Выделяйте все медиа-квери в отдельный блок и ставьте в конец своего цсс-файла для быстрого поиска нужного устройства.

Это очень условное, возможно уже устаревшее деление, так как устройства постоянно растут и меняются. Всегда можно свериться с последней версией бутстрапа, только помните о правиле — заменить минимальные ширины на максимальные, если вы верстаете сначала на десктоп, а потом на устройства.

И еще — если вы ставите стили для @media (max-width: 767px) , то они будут распростряняться и на @media (max-width: 468px), если только внутри @media (max-width: 468px) не указано другое. (Потому что мы пишем: для ВСЕХ ширин от нуля ДО МАКСИМАЛЬНОЙ).

Задание:

Попробуйте собрать наши таблички на бутстрапе:

Это самое грубое разделение, берем только 2 разрешения — col-xs и col-md. Это значит, что на телефонах и планшетах колонки будут занимать 100% экрана (col-xs-12 — 12 колонок из 12), а начиная со средних мониторов и на больших — половину экрана (col-md-6, 6 колонок из 12). Внутри правой боковой мы делаем два ряда один под другим. Вы должны привязать свой собственный лист стилей и задать колонкам цвета фонов и высоты, иначе табличка «схлопнется».

Если все получилось, пересоберем все остальные таблички в бутстрап-сетки: