Bootstrap 3 - Основные элементы для создания сетки

На этом уроке мы рассмотрим основные элементы Twitter Bootstrap (контейнеры; ряды; блоки, состоящие из колонок Bootstrap) необходимые для создания сетки веб-страниц сайта. Этот процесс является одним из основных этапов создания сайта, именно с разработки сетки мы начинаем строить интерфейс веб-страницы после его проектирования.

Основными элементами платформы Twitter Bootstrap 3 для создания сетки сайта являются:

  • Контейнеры (элементы div с классом ".container" или ".container-fluid");
  • Ряды (элемент div с классом ".row");
  • Блоки div, состоящие из колонок Bootstrap (элемент div с одним ".col-#-$" или несколькими классами ".col-#-$").

Контейнер является "фундаментом", с которого начинают создавать сетку веб-страницы сайта. На платформе Twitter Bootstrap контейнеры бывают 2 видов:

  • Фиксированный контейнер (элемент div с классом ".container"). Он имеет строго определённую ширину для определённого типа устройств. Т.е. для одного устройства контейнер имеет одну ширину, для другого устройства - другое значение ширины. Всего в Bootstrap 3 определено 4 типа устройств: xs (смартфоны - ширина контейнера равна ширине рабочей области окна браузера), sm (планшеты - 750px), md (ноутбуки - 970px), lg (персональные компьютеры - 1170px). Позиционируется фиксированный контейнер в горизонтальном направлении по центру, это достигается за счёт CSS свойства "margin: 0 auto".
  • Жидкий "текучий" контейнер (элементы div с классом ".fluid-container"). Он имеет ширину, равную ширину рабочей области окна браузера. Т.е. ширина жидкого "текучего" контейнера не является фиксированной, а изменяется при любом изменении ширины рабочей области окна браузера. Сетку сайта, которую проектируют на основе жидкого "текучего" контейнера называют ещё "резиновой".

Таким образом, контейнер предназначен для установления ширины сетки. Кроме этого, он задаёт внутренние положительные отступы от своей левой и правой границы до содержимого, которое будет в него помещено. Значение отступов устанавливается равным 15px и достигается это за счёт CSS свойств "padding-left:15px" и "padding-right:15px".

Назначение контейнера (.container) в платформе Twitter Bootstrap 3 при создании сетки сайта

Ряды при создании сетки применяют только для того, чтобы в них размещать блоки div, состоящих из колонок Bootstrap (<div class="col-#-$">...</div>). Другого предназначения ряды не имеют, следовательно, их не следует размещать в тех местах, где Вам кажется, что они должны быть. Этот момент при размещении рядов необходимо запомнить, потому что большинство веб-разработчиков, которые создают интерфейс сайта на основе платформы Bootstrap, сталкиваются именно с проблемами правильного размещения рядов.

А теперь рассмотрим, в каких элементах сетки можно размещать ряды. Ряды можно размещать в контейнере и в блоках div, состоящих из колонок Bootstrap.

Почему именно так? Это всё связано с тем, что блоки div, состоящие из колонок Bootstrap, имеют положительные внутренние отступы. И если их не компенсировать там, где нужно, то у Вас получится неправильный макет, т.е. в некоторых местах от границ сетки до содержимого будет 30px, в других местах может получиться 45px, и т.д. Чтобы этого не допустить следует использовать ряды.

Что будет, если не использовать ряды

Ряды - это блоки div, которые имеют отрицательные внешние отступы слева и справа равные 15px (margin-left: -15px и margin-right: -15px). Следовательно, если ряд расположить в некотором блоке, то он выйдет за допустимые пределы этого блока слева и справа на 15px.

В итоге, ряд, размещенный в контейнере или блоке div, состоящем из колонок Bootstrap, будет компенсировать положительные внутренние отступы этих элементов Bootstrap слева и справа(padding-left: 15px и padding-right: 15px) своими отрицательными внешними отступами.

<div class="container">
  <div class="row">

  </div>
</div>

Назначение рядов (.row) в платформе Bootstrap при создании сетки сайта

Блоки div, состоящие из колонок Bootstrap, предназначены для создания ячеек в сетке. При этом любую ячейку в данной сетке можно разбить ещё на ячейки. Поясним данный момент на небольшом примере более подробно.

Этапы создания ячеек сетки:

  1. На первом этапе создаём контейнер. В этом момент сетка состоит из одной ячейки;
  2. На втором этапе разбиваем эту ячейку на необходимое количество ячеек (например: шапка, левый блок, правый блок, основной контент и подвал страницы);
  3. На третьем этапе, например, мы можем дополнительно разбить ячейку "Подвал страницы" ещё на несколько ячеек. Подобным образом при необходимости мы можем разбить любую ячейку сетки.

Кроме этого необходимо помнить, что разбивая ячейку на несколько ячеек, их необходимо поместить в ряд (блок div с классом ".row"). Это требования является обязательным, т.к. блоки состоящие из колонок Bootstrap имеют внутренние положительные отступы слева и справа по 15 px, которые необходимо компенсировать. Если это требование не выполнить, то у Вас нарушится структура сетки.

Также при размещении блоков div, состоящих из колонок Bootstrap, в ряд необходимо знать то, что в одну строку ряда помещается ровно 12 колонок Bootstrap. Т.е. блоки, которые не помещаются в первую строку, располагаются в следующей строке и т.д. Но тут есть один очень важный момент, который связан с тем, что эти блоки не всегда переносятся на следующую строку ряда. Это связано с тем , что блоки div, состоящие из колонок Bootstrap являются плавающими (свойство CSS "float:left").

Рассмотрим этот важный момент на примере:

<div class="container">
  <div class="row">
    <div class="col-xs-6">Блок №1</div>
    <div class="col-xs-6">Блок №2</div>
    <div class="col-xs-4">Блок №3</div>
  </div>
</div>

Расположение блоков, состоящих из колонок Bootstrap

На изображении, представленном выше видно, что 1 строка ряда содержит 2 блока (Блок №1 и Блок №2), сумма колонок, которых составляет 12. В нашем макете "Блок №3" должен располагаться во 2 строчке, но в реальной ситуации это не происходит. И чтобы исправить эту сетку, на платформе Twitter Bootstrap 3 имеется специальный класс "clearfix", который необходимо добавить к пустому блоку div. Далее блок div с классом "clearfix" необходимо разместить до блока, который должен начинаться с новой строки в ряду.

<div class="container">
  <div class="row">
    <div class="col-xs-6">Блок №1</div>
    <div class="col-xs-6">Блок №2</div>
    <!-- Запрещает блокам, которые расположены после него, обтекать его. -->
    <div class="clearfix"></div>    
    <div class="col-xs-4">Блок №3</div>
  </div>
</div>

Исправление сетки сайта с помощью блока div c классом .clearfix

Чтобы создать блок div, состоящий из колонок Bootstrap, к нему необходимо добавить класс ".col-#-$", где:

  • # - тип устройства: xs (Смартфоны), sm (Планшеты), md (Ноутбук), lg (Персональный компьютер). Платформа Twitter Bootstrap 3 определяет тип текущего устройства на основании ширины окна браузера. Например: если у Вас текущая ширина окна браузера равна 1000px, то этому значению соответствует устройство md (Ноутбук);
  • $ - количество колонок Bootstrap, из которых будет состоять блок для указанного типа устройства. Значение $может принимать значение от 1 до 12.

Например:
Блок <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">...</div> будет иметь:

  • на устройстве xs ширину, равную 6 колонкам Bootstrap, т.е. 50% от ширины родительского элемента;
  • на устройстве sm ширину, равную 4 колонкам Bootstrap, т.е. 33.33% от ширины родительского элемента;
  • на устройстве md ширину, равную 3 колонкам Bootstrap, т.е. 25% от ширины родительского элемента;
  • на устройстве lg ширину, равную 2 колонкам Bootstrap, т.е. 16.67% от ширины родительского элемента;

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

Пример создания сетки веб-страницы

<div class="container">
  <div class="row">
    <div class="col-sm-12">Шапка сайта</div>
    <div class="col-sm-4">Левый блок</div>
    <div class="col-sm-8">Основной блок</div>
    <div class="clearfix"></div>    
    <div class="col-sm-12">Подвал сайта</div>
  </div>
</div>


   Bootstrap 0    31148 +1

Комментарии (43)

  1. Дамир # 0
    Привет, по последнему коду,
    имхо каждый блок веб-страницы (шапку, садбар, контент, футер) лучше разместить в отдельную строку:
    .container
    	.row
    		.head
    
    	.row
    		.sidebar
    	
    	.row
    		.content
    
    	.row
    		.footer
    
    1. Александр Мальцев # 0
      Привет, с шапкой и подвалом согласен. Твой вариант более логичен. Хотя ни кто не запрещает Вам макет создавать как в статье, он будет валидный с точки зрения Bootstrap, стандартов и структуры. Кстати везде есть свои плюсы и минусы, как говорил Эйнштейн всё относительно. Можно даже найти преимущества, например блоков (элементов) будет меньше, что особенно важно для людей, стремящихся к минимализму :)

      Но с контентом и сайдбаром категорически не согласен. Во-первых это физически невозможно, а во вторых они логически связаны.

      Некоторые очень любят следующую структуру:
      <header></header>
      <main>
        <div class="container">
          <div class="row">
            <div class="col-sm-4">Левый блок</div>
            <div class="col-sm-8">Основной блок</div>
          </div>
        </div>
      </main>
      <footer></footer>
      
      Что скажете?
      1. Дамир # 0
        да действительно тут упустил момент, так будет лучше:
        .row .main
        	.col content
        	.col sidebar
        1. Henkz # 0
          А не могли бы Вы подробней объяснить этот момент по этому куску кода?
    2. Сергей # 0
      Здравствуйте.
      Подскажите, где следует применять class=«clearfix visible-*-block», "..-inline" и "...-inline-block"
      Спасибо
      1. Александр Мальцев # 0
        Привет, Сергей.
        В Twitter Bootstrap 3 есть 2 группы классов для отображения и скрытия элементов:
        1 Группа — классы hidden-xs, hidden-sm, hidden-md, hidden-lg.
        Каждый из них предназначен для того чтобы скрыть отображение элемента на определённом устройстве.
        Например, следующий код скрывает отображение элемента div на устройствах xs и sm (на устройствах md и lg элемент div будет отображаться):
        <div class="hidden-xs hidden-sm"></div> 
        
        2 Группа — классы visible-xs-*, visible-sm-*, visible-md-*, visible-lg-*.
        Каждый из них предназначен для отображения элемента на определённом устройстве, а на остальных скрывает.
        Например, следующий код отображает элемент div только на устройствах xs, на остальных скрывает (sm, md и lg):
        <div class="visible-xs-block"></div>
        
        3 слово в названии класса (block, inline или inline-block) определяет, как элемент будет отображаться: как блочный (block), как строчный (inline) или как строчно-блочный (inline-block).

        Думаю с применением этих классов понятно. Т.е. они применяются для отображения или скрытия элементов.

        Класс .clearfix применяется при создании сетки с помощью адаптивных блоков (col-*-*). Т.к. адаптивные блоки являются плавающими, то иногда необходимо это обтекание отменять, чтобы Ваша разметка не «поплыла».
        1. Сергей # 0
          Вопрос касался именно третьего элемента в конструкции visible-*-*. Т.е. -block, -inline, -inline-block. Про остальные составляющие у вас все хорошо описано ранее. Буду стараться формулировать вопросы точнее. Спасибо.
      2. Лука # 0
        Доброго времени!
        класс hidden-xs работает отлично, но вот visible-xs-block заставить работать не могу!
        Ни чего понять не могу, почему блок не хочет отображаться только в мобильном виде, а отображается на всех разрешениях?
        1. Александр Мальцев # 0
          Лука, проверьте какую версию Bootstrap 3.x.x Вы используете. Текущая версия 3.3.5.
          В версиях Bootstrap до 3.2.0 этих классов не было, там использовались классы: visible-xs, .visible-sm, .visible-md, and .visible-lg. После 3.2.0 эти классы были убраны и появились новые классы: .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block и т.д.
          Если Вы будете переходить с предыдущей версии (< 3.2.0) до 3.3.5 то классы visible-xs, .visible-sm, .visible-md, и .visible-lg необходимо соответственно заменить на .visible-xs-block, .visible-sm-block, .visible-md-block, и .visible-lg-block.
        2. Олег Афанасьев # 0
          Добрый день, Александр.

          Спасибо за статьи, читаю по порядку.
          Есть пожелание: выделить как-то справа в «Навигация» текущий линк с названием статьи, чтобы было удобнее и быстрее переходить к следующей.
          1. Александр Мальцев # 0
            Добрый день, Олег.
            Спасибо за пожелание, в ближайшее время сделаю.
          2. Mixail # 0
            Александр, Добрый вечер. Вопрос мой касается visible — для каких целей необходимо, если можно задать видимость универсальную для всех устройств?
            1. Александр Мальцев # 0
              Здравствуйте.
              Класс visible предназначен для того чтобы сделать блок видимым на одном устройстве, а на остальных нет.
              Например, нижеприведённый блок div будет виден только на устройствах sm, а на остальных нет. Кроме этого он будет отображаться как блок (dispaly: block).
              <div class="visible-sm-block">...</div>
              
              Также в Bootstrap есть ещё другие классы visible, которые делают элемент видимым только при печати, а на экране в браузере нет.
              Например, следующий блок div будет виден только при печати, а на странице отображаться не будет. Кроме этого он будет отображаться как блок (dispaly: block).
              <div class="visible-print-block">...</div>
              
              Если к элементу не задавать классы из данной группы, то он будет виден на всех устройствах.
              Например, следующий элемент будет отображаться на всех устройствах.
              <div>...</div>
              
              1. Mixail # 0
                Я, понял спасибо за разъяснение, перефразирую вопрос, какой смысл вообще делать видимость на одних устройствах, а на других скрывать?
                1. Александр Мальцев # 0
                  Например, на сайте getbootstrap.com есть главное меню (верхнее), контент и меню справа.
                  Так вот на больших экранах отображаются 3 блока, а на маленьких только 2 (меню справа отсутствует).
                  Подобное можно наблюдать и на сайте api.jquery.com, но только там на маленьких экранах отсутствует меню слева.
            2. Виктор # 0
              Здравствуйте, можно ли без системы бутстрап сверстать адаптивный сайт под все устройства? если да, то сложно ли, для новичка? или лучше не заморачиваться и вкл бутстрап? я решил вообще отказаться от бутстрап, или всё таки вы мне еще какие либо варианты предложите? мне кажется что с бутстрап сайт получится по весу тяжелее, так как я всё что там есть я точно не буду использовать, и сайт грузится будет дольше, хотя я новичок в этом, что посоветуете?
              1. Александр Мальцев # 0
                Здравствуйте, Виктор.
                Адаптивный сайт можно сверстать, конечно, и без Bootstrap, с помощью только HTML и CSS.
                Задача конечно посложнее будет, да и времени уйдёт даже не в разы, а в десятки раз больше. После этого ещё и тестировать придётся на различных устройствах. Выбор конечно Ваш. И не факт что Ваш CSS файл будет иметь размер меньше чем у Bootstrap.
                А как сайт с Bootstrap может быть тяжёлым.
                Переходите на страницу
                _http://getbootstrap.com/customize/
                и делаете свою сборку Bootstrap, т.е. оставляете только то что надо. Нажимаете compile и получаете свою сборку.
                Например, сборка Bootstrap, состоящая только из сетки и адаптивных утилит занимает только 15 Кбайт.
                1. Виктор # 0
                  А чем будет отличаться адаптация сайта сделанный профелем в ручную, от сайта сделанным новичком типа меня с помощью бутстрап, какие будут плюсы и минусы? Спасибо за информацию, всё сидел ждал вашего ответа ☺, не знал как начинать верстать с бутстрап или без. Вроде как хочется по быстрее сверстать для дела сайт, а с другой стороны хочется научиться вертать как профели.
                  1. Александр Мальцев # 0
                    Если Вы сделаете сайт на Bootstrap, то он будет корректно работать на всех устройствах и браузерах. Наверно это самый главный плюс. Вы ведь не знаете тонкости работы различных браузеров на различных устройствах. В одном браузере может выглядеть так, в другом совсем иначе, а в третьем это не работать. Во вторых изучая CSS Bootstrap Вы узнаете как правильно необходимо создавать свой собственный CSS, но и многое другое, такое как Less и Sass. Это пригодится понять как необходимо правильно создавать свои стили, чтобы их потом можно было легко модифицировать. Кроме этого и на Bootstrap можно создать очень интересный и необычный дизайн.
                  2. Виктор # 0
                    галочки отметил, скачал, скачались 3 файла, css, js, config.json. в папке css есть просто бутстрап и бутстрап мин, они мне оба нужны? так же в js. а для чего 3 й фаил config.json? мне его куда положить?
                    1. Александр Мальцев # 0
                      Если у Вас есть js файлы значит Вы не убрали галочки из раздела, содержащего jQuery плагины. Нужен только файл bootstrap.min.css. Файл bootstrap.min.css — это сжатая версия файла bootstrap.css. Минимизация файла происходит с помощью специальных утилит, которые удаляют из исходного файла пробелы и многое другое. Файл bootstrap.css больше подходит для изучения, в нём можно посмотреть как всё организовано.
                      Файл config.json содержит настройки Вашей сборки. Т.е. если выйдет новая версия Bootstrap, в которой что-то улучшено, то Вы можете опять перейти на страницу Customize Bootstrap и загрузить эти настройки компилятору. После этого нажав Compile и Download Вы получите новую версию Вашей сборки.
                      1. Виктор # 0
                        ок. большое спасибо за помощь
                2. Виктор # 0
                  при верстке сайта лучше сразу сделать его адаптивным или посте создания основной платформы?
                  1. Александр Мальцев # 0
                    Конечно, сразу.
                    1. Виктор # 0
                      ок. спасибо!
                  2. Владислав # 0
                    не ну Автор красавчик! респект!
                    1. Sergey # 0
                      +1 Однозначно респект!
                      Краткое понятное изложение основных моментов.
                      Спасибо за статью.
                      1. Westus # 0
                        Между левым и основным блоком ширина в 30px, как ее сократить до 15px?
                        <div class="container">
                          <div class="row">
                            <div class="col-sm-12">Шапка сайта</div>
                            <div class="col-sm-4">Левый блок</div>
                            <div class="col-sm-8">Основной блок</div>
                            <div class="clearfix"></div>    
                            <div class="col-sm-12">Подвал сайта</div>
                          </div>
                        </div>
                        1. Александр Мальцев # 0
                          Так и должно быть…
                          Но, если очень хочется уменьшить, то можно сделать так.
                          CSS:
                          #left {
                            padding-right: 7.5px;
                          }
                          #right {
                            padding-left: 7.5px;
                          }
                          
                          HTML:
                          <div class="container">
                            <div class="row">
                              <div class="col-sm-12">Шапка сайта</div>
                              <div id="left" class="col-sm-4">Левый блок</div>
                              <div id="right" class="col-sm-8">Основной блок</div>
                              <div class="clearfix"></div>    
                              <div class="col-sm-12">Подвал сайта</div>
                            </div>
                          </div>
                          
                          1. Westus # 0
                            Я тоже об этом подумал, но при смещении блоков в столбик получится, что они вылазят за приделы. Вот для наглядности:
                            Было drive.google.com/open?id=0B2ZFceqvHKC_SWNxS21ULU1IZjQ
                            Исправили drive.google.com/open?id=0B2ZFceqvHKC_cU1aZUJJdy01cW8
                            Стало drive.google.com/open?id=0B2ZFceqvHKC_Y0Fnb3VWUkFKejA
                            1. Александр Мальцев # 0
                              Это CSS правило необходимо установить только для экранов >=sm.
                              Т.е. будет так:
                              @media (min-width:768px) {
                                #left {
                                  padding-right: 7.5px;
                                }
                                #right {
                                  padding-left: 7.5px;
                                }
                              }
                              
                              1. Westus # 0
                                Спасибо, получилось. Вот так сделал:
                                /* Medium Devices, Desktops */
                                @media only screen and (min-width : 992px) {
                                	.content-text {
                                	margin-right: -15px;
                                }
                                }
                        2. Александр # 0
                          Здравствуйте. Скажи как поиграться с изменением блоков? На том же примере бутстрапа с навбаром. Там есть форма поиска, но она не входит по размеру, вроде на «md» и строка падает под меню (с новой строки). Есть варианты или где почитать о таких коллизиях? Хотелось бы поиск заменять на пункт меню, в то же время, чтобы сохранилась структура для телефонов.
                          1. Александр Мальцев # 0
                            Здравствуйте. Для этого необходимо использовать классы для скрытия и отображения элементов Bootstrap: hidden-* и .visible-*-block (где * — тип устройства:xs,sm, md или lg).
                            Т.е. форму поиска можно скрыть на одних устройствах, а на других показать.
                            1. Александр # 0
                              ТО есть для каждого размера экрана надо прописывать когда показывать, а когда нет? Излишний код, вот что меня смущает. Так то понял чуть позже. Просто форму поиска можно оставить в мобильном варианте, но при 991 пикс она съехала. Я ее скрыл, и она так же пропала для телефонов (под иконкой с полосками)
                              Еще все эти коллапсы, столько кода, голова закипает пока учишь синтаксис.
                              1. Александр Мальцев # 0
                                Если необходимо создать адаптивную вёрстку, то придётся потрудится, т.к. необходимо будет настраивать её для различных разрешений.
                                Если не хотите лишнего кода, то только на сервере.
                          2. Александр # 0
                            Здраствуйте. Скажите пожалуйста как зафиксировать div class=row чтобы он не скролился, я добавляю клас affix но тогда внутриние блоки ведут себя не правильно.
                            Что былучше понять суть проблемы — (добавляю картинку itchief.ru/assets/uploadify/4/7/7/4773edaed65834537ef70c3c5866c5b4.png)мне нужно чтобы кнопка добавления канала (кнопка с плюсиком) и блок с видеоне скролился, а список видео с каналами скролились и уходили (при прокрутки ) под низ.
                            1. Александр Мальцев # 0
                              Если Вы хотите чтобы верхняя часть страницы была не подвижной, то можно сделать так:
                              <body style="padding-top: 350px;">
                                <div style="height: 300px; position: fixed; right: 0; left: 0; top: 0; z-index: 1030;">
                                  <!-- Не подвижная (фиксированная область) -->
                                </div>
                                <div class="container">
                                  <!-- Область, которая должна прокручиваться -->
                                </div>
                              </body>
                              
                            2. Женя # 0
                              Добрый вечер.
                              Не могу понять почему у меня на сайте происходит вот такая белеберда prntscr.com/bxe5oc почему то контейне становится все равно в 1000 px и не становится нормальным. В чем может быть проблема? Бутстрапом занимаюсь недавно, но принцип работы понимаю. Скорее мой косяк в верстке, но почему не съезжают в один столбик все элементы на телефонах? мой сайт angel-loves.com/
                              1. Александр Мальцев # 0
                                Не знаю, с отображением сайта у Вас всё нормально.
                                Изображение: layout-angel-loves.jpg.
                                Но стоит обратить внимание на ошибки, которые у Вас сыплятся при работе JavaScript скриптов.
                              2. safbek # 0
                                Здравствуйте! Спасибо за отличный ресурс! У меня возник такой вопрос. У меня макет по сетке бустрап, и почти все блоки 12-колоночные, но один блок выходит за 12-колоночную сетку. Как грамотно заверстать это? Сделать все в сетке, а затем выйти маргинами или же изначально не заключать этот блок в бутстрап дивы и приводить в порядок флоатами? Вот такой у меня макет. Блок видео.:

                                uploads.ru/XfCgH.png
                                1. Александр Мальцев # 0
                                  Здравствуйте.
                                  Создать свой контейнер и расположить в нём блоки так, как вам это необходимо.
                                  <!-- Бутстраповский контейнер -->
                                  <div class="container">
                                    <div class="row">
                                      <div class="col-lg-4">...</div>
                                      <div class="col-lg-4">...</div>
                                      <div class="col-lg-4">...</div>
                                    </div>
                                  </div>
                                  <!-- Свой контейнер -->
                                  <div class="video-container">
                                    <div style="float: left; width: 50%;">...</div>
                                    <div style="float: left; width: 50%;">...</div>  
                                  </div>
                                  
                                2. safbek # 0
                                  Помогло. Спасибо за такой оперативный ответ и за Ваши труды)

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