Как использовать Bootstrap Grid

Bootstrap является одним из самых популярныч фреймворков на данный момент. С его помощью вы можете создавать веб-страницы используя уже готовые «элементы» (такие как меню, слайдер, кнопки и т.д.). Но, в данной статье мы поговорим о Bootstrap Grid — адаптивной сетке.

Как использовать адаптивную сетку Bootstrap

На данный момент актуальна 3-яя версия и готовится к выходу 4-ая, и, т.к. мы говорим про сетку, то — добавится поддержка устройств с еще большей шириной (напомню, в 3-ей версии, у нас была максимальная ширина контейнера 1170px и выставлялась она от 1200px минимальной ширины окна).

Вообще, сам по себе фреймворк бутстрап, довольно тяжелый — не только файл стилей, но и различные javascript`ы, которые не всегда нужны. Я предпочитаю использовать только сетку 🙂 .
Скачать адаптивную сетку вы можете на официальном сайте убрав все галочки и выбрав Grid system, или же прямо с нашего сайта — в этом файле будет normalize.css, который сделает вашу верстку более кроссбраузерной и сами стили для сетки.

Как работают медиа запросы?

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

Возьмем несколько строк из бутстрапа:

 

Итак, когда наша ширина меньше 767 пикселей (max-width: 767px — доходит до максимальной ширины, и правило не применяется), то мы скрываем все элементы с классом .hidden-xs;
Когда ширина находится в диапазоне от 768 И до 991 пикселя — элементы с классом .hidden-sm не будут видны на странице (применяется логическое И);
От 992 до 1199 пикселей — аналогично предыдущему примеру — для .hidden-md;

И от 1200 пикселей и выше — скрываем .hidden-lg

На этом примере становится понятно как же работают медиа запросы — они применяют стили, в зависимости от наших условий (в нашем случае, ширина окна браузера). И в этом вся магия — вы можете писать различные стили, будь то цвет текста, позиция, ширина, да всё что угодно и они сработают только для заданной ширины! 🙂

У этих классов есть только одно отличие — приставки xs, sm, md, lg (прям как на футболках 🙂 ). Метод дедукции подсказывает что это extra small, small, middle, large, а в 4 версии добавиться еще и xl (extra large).

Ну ладно, с медиа запросами надеюсь все понятно, а как же быть с HTML?

Базовая HTML разметка в Bootstrap Grid

HTML5 стал мейнстримом, поэтому, на примере элемента section:

 

Особенно этот принцип хорошо подойдет для лендингов (landing page), где каждый экран это отдельная секция.
В секцию (если хотите создавайте див, разницы почти нет, разве что, старые браузеры не поддерживают разметку HTML5 и элемент не будет блочным — привет ИЕ 🙂 ) мы помещаем container, который задает максимальную ширину блока, в зависимости от ширины экрана, об этом нам говорит этот код в исходниках bootstrap:

Далее, идет row , который, если посмотреть по стилям, «компенсирует» внутренние отступы контейнера, своими отрицательными внешними отступами 0_0.

Важный момент: когда у нас 1 строка, писать row > col-xs-12 не обязательно, можно обойтись просто такой записью, обернуть наш контент в еще один див (хотя, на самом деле, этот второй div можно тоже не писать):

Посмотрите через фаербаг и вы все поймете сами. row у нас создает как бы строку (вспомните таблицы и элемент tr).

Теперь, нам нужно создать колонки, в нашем примере у нас 2 колонки col-lg-6. Помните приставка lg это large? Так вот, наши колонки будут такими только на больших мониторах, если вы сейчас «ресайзните» окно браузера до ширины меньше, наши колонки вытянуться в ширину 100% каждая. Как разделить колонки в таком случае? Если мы поменяем класс на col-xs-6:

то окажется, что на всех расширениях колонки будут равны друг другу и нам не придется писать для всех случаев:
col-xs-6 col-sm-6 col-md-6 col-lg-6 — так писать не надо.
А что если у меня на мобильном нужно по 100% а на всех остальных по 50% спросите вы? Тогда пишем:

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

 

Важный момент — сумма всех колонок должна быть равна 12, но проверять вы должны по «расширениям» (по xs, sm, md и lg в каждом отдельном row). То есть — у нас 2 колонки, если первая 10, то вторая 2, если первая 7 то вторая 5 и т.д. Если у вас в строке 4 элемента, то соответственно сумма цифр в «классах для конкретных расширений» (xs, sm, md, lg) всегда равна 12.

Как сделать 5 равных колонок в bootstrap

Небольшой лайфхак на последок. 12 как вы поняли не делится на 5 🙂 .
CSS:

HTML:

Т.к. все нормальные цифры заняты, займем 20.
Ну и напоследок хотелось бы отметить, что вложенность может быть в несколько уровней, но сумма каждого уровня по прежнему должна быть равна 12:

Видите, родитель занимает 9 из 12 по ширине, но внутренние ячейки должны снова составить в сумме 12. Ну вот и все, не забывайте, что для корректной работы медиа запросов на всех устройствах необходимо прописать в тег head:

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

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года.

Предоставляю услуги по созданию проектов на CMS 1С-Битрикс - сайты, шаблоны и компоненты с нуля.

Другие виды работ:
  • Доработка функционала на уже существующих проектах
  • Вёрстка макетов (HTML, CSS, JavaScript, jQuery, JADE, SASS, Gulp)
  • Скрипты на PHP и JS (jQuery)

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.

E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

2 комментария

  1. Здравствуйте! Очень классный пост! спасибо!
    А по поводу col-md-20 — это ведь не адаптивно. Т.е. и в размере -xs- ширина 20%. Указываю так: class=»col-xs-12 col-md-20″ — и воюбом слуцчае ширина 20%.

    Как решается? Или никак?

    1. Здравствуйте, попробуйте либо записать эти стили в самом начале сетки, чтобы понизить их приоритет, либо записать их по отдельности каждый — имею ввиду без запятых
      .col-xs-20 {*стили для колонок*}
      .col-sm-20 {*стили для колонок*}
      и тд
      Скорей всего это случилось из-за того что если писать несколько селекторов через запятую возрастает их «вес», а чем больше вес селекторов, тем он приоритетнее.
      Вот приблизительно как рассчитывается вес, если у вас идет перечисление через запятую просто суммируйте
      style=»» 1,0,0,0
      #id 0,1,0,0
      .class 0,0,1,0
      [attr=value] 0,0,1,0
      li (тэг) 0,0,0,1

      в нашем случае у нас 4 класса — то есть 0 0 4 0 — надеюсь понятно объяснил 🙂

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

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