Изучаем сеточную систему Bootstrap

Bootstrap идет в комплекте с 12 колоночной сеточной системой. В первую очередь она рассчитана на маленькие экраны, а уже потом на большие.

Сейчас в сетке есть 4 размера. Более подробно о размерах и таблицы можно почитать тут (на англ. языке). Давайте с вами лучше рассмотрим опции сетки.

Сетка Bootstrap

  1. Очень маленькая сетка, разработнная для мобильных устройств. Если ваш экран меньше 768 пикселей, то это будет маленькая сетка и она будет всегда горизонтальная
  2. Если сетка больше или равна 768 пикселей, то это маленькая сетка
  3. Если сетка больше или равна 992 пикселей, то это средняя сетка
  4. Если сетка больше или равна 1200 пикселей, то это большая сетка

768, 992, 1200 — это точки, по которым сетка проходит вертикально по странице. И если сетка становится уже, указанных цифр, то маленькая, большая и средняя сетка будет складываться вертикально (друг поверх друга)

Я очень соневаюсь, что большинство из вас поняло то, о чем я рассказывал раньше, поэтому предлагаю посмотреть наглядно демо. Пример лучше смотреть при начальном разрешении больше 1200px. И постепенно уменьшайте размер окна браузера и смотрите за поведением сетки.

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

Визуально сетку мы посмотрели, давайте теперь рассмотрим немного исходный код

В 44-47 строке мы видим, что у нас показываются разный контент в зависимости от типа сетки. Это же мы видим на следующем рисунке, правда тут еще мы задаем все 4 класса, которые будут применяться в зависимости от типа сетки.

Мы это с вами еще рассмотрим более детально в дальнейших уроках.

Скачать исходник

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll Up
Adblock detector