Bootstrap - Элементы сетки и как их использовать для создания макета

Александр Мальцев
140K
1
Bootstrap - Элементы сетки и как их использовать для создания макета
Содержание:
  1. Элементы сетки фреймворков Bootstrap 3 и 4
  2. Основные правила создания макета с помощью элементов сетки Bootstrap
  3. Комментарии

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

Элементы сетки фреймворков Bootstrap 3 и 4

Основными элементами сетки Bootstrap 3 и 4 являются:

  • обёрточные контейнеры - элементы с классом container или .container-fluid;
  • ряды - элемент с классом row;
  • адаптивные блоки - элементы, с одним или несколькими классами col.

Обёрточный контейнер - это первый элемент, с которого начинается создание макета страницы или некоторой его самостоятельной части. Его основное назначение - это установить ширину разрабатываемого макета. В Bootstrap 3 и 4 обёрточные контейнеры бывают 2 типов. Первый (container) предназначен для создания адаптивно-фиксированного макета, а второй (container-fluid) - для адаптивно-резинового (адаптивно-гибкого) макета.

Адаптивно-фиксированный макет характеризуется тем, что он имеет условно постоянную ширину, которая на одних диазонах viewport браузера имеет одно значение, а на дугих - другое.

Например, в Bootstrap 3 определено 4 диапазона (контрольные точки): xs (по умолчанию), sm (ширина viewport больше 768px), md (ширина viewport больше 992px), lg (ширина viewport больше 1200px).

Обёрточный контейнер (container) устанавливает макету:

  • на дипазоне xs ширину, равную ширине viewport браузера;
  • на дипазоне sm, ширину равную 750px;
  • на дипазоне md, ширину равную 970px;
  • на дипазоне lg, ширину равную 1170px.

Ширина же адаптивно-резинового макета не имеет фиксированного значения, она всегда равна ширине vieport браузера.

Обёрточный контейнер кроме установления ширины макету ещё выравнивает его по центру страницы и задаёт внутренние поля (padding) слева и справа по 15px.

Сетка Bootstrap - Обёрточный контейнер

Ряд - это тоже контейнер, но для адаптивных блоков сетки Bootstrap.

В Bootstrap 3 его основная роль - это создать отрицательные отступы (margin) слева и справа по 15px.

В Boostrap 4 он не только задаёт отрицательные отступы, но и выполняет ещё функцию flex-контейнера. Т.е. если данный элемент не установить, то адаптивные блоки вообще не будут иметь свойственного им поведения.

Принцип использования элемента "ряд" очень прост, он всегда должен выступать родителем для адаптивных блоков. Т.е. если какой-то элемент (обёрточный контейнер или адаптивный блок) необходимо разметить с помощью адаптивных блоков, то перед тем как их создать сначала установите ряд, а уже в нём эти блоки.

Сетка Bootstrap - Ряд (контейнер для адаптивных блоков)

Адаптивный блок - это элемент, который имеют адаптивную ширину. Т.е. его ширина на одном диапазоне viewport может иметь одно значение, а на другом - другое.

Установка поведения адаптивного блока осуществляется с помощью одного или нескольких классов col.

Синтаксис класса col:

col-{breakpoint}-{number_columns}

{breakpoint} - это контрольная точка, которая определяет минимальную ширину viewport, начиная с которой этот класс будет действовать.

В Bootstrap 3 для использования доступно по умолчанию четыре контрольные точки (xs, sm, md и lg), а в Bootstrap 4 - пять контрольных точек (без обозначения, sm, md, lg и xl). Контрольные точки приведены в порядке возрастания ширины viewport, начиная с которой они начинают действовать.

{number_columns} - это ширина адаптивного блока, которую он будет иметь, начиная с этой контрольной точки. Указывается ширина адаптивного блока с помощью колонок Bootstrap (целого числа) по умолчанию от 1 до 12. Данное число определяет, какую часть ширины он будет иметь относительно содержащего его блока (элемента «ряд»). Минимальная ширина адаптивного блока - это 1/12 (8.3%), а максимальная - 12/12 (100%).

Сетка Bootstrap - Адаптивный блок

Например, адаптивный блок с классом col-xs-6 col-sm-4 col-md-3 col-lg-2 будет (Bootstrap 3):

  • на устройстве xs иметь ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд»;
  • на устройстве sm иметь ширину, равную 4 колонкам Bootstrap, т.е. 33.33% (4/12*100%) относительно ширины элемента «ряд»;
  • на устройстве md иметь ширину, равную 3 колонкам Bootstrap, т.е. 25% (3/12*100%) относительно ширины элемента «ряд»;
  • на устройстве lg иметь ширину, равную 2 колонкам Bootstrap, т.е. 16.67% (2/12*100%) относительно ширины элемента «ряд».

Если же какую-то контрольную точку не указать, то действие этого класса распространится и на следующие контрольные точки. Это связано с тем, что в CSS Bootstrap медиа запросы построены с использованием минимальной ширины.

Например, адаптивный блок с классом col-xs-8 col-md-6 будет (Bootstrap 3):

  • на контрольной точке xs и sm иметь ширину, равную 8 колонкам Bootstrap, т.е. 66.7% (8/12*100%) относительно ширины элемента «ряд»;
  • на устройстве md и lg ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд».

По умолчанию адаптивные блоки имеют ширину, равную 12 колонок Bootstrap, т.е. 100%. Если у вас какой-то блок, начиная с xs должен иметь это значение, то его можно не указывать.

Например, адаптивный блок с классом col-md-6 col-lg-9 будет (Bootstrap 3):

  • на контрольной точке xs и sm иметь ширину, равную 12 колонок Bootstrap, т.е. 100% (12/12*100%) относительно ширины элемента «ряд»;
  • на устройстве md иметь ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд»;
  • на устройстве lg иметь ширину, равную 9 колонкам Bootstrap, т.е. 75% (9/12*100%) относительно ширины элемента «ряд».

Адаптивные блоки в Bootstrap располагаются линиями. В одну линию может поместиться адаптивные блоки с суммарным количеством колонок Bootstrap по умолчанию не больше 12. Блоки, которые не помещаются в первую линию, переносятся на следующую линию и т.д.

В Bootstrap 3 при создании макета имеется один очень важный момент, который связан с тем, что адаптивные блоки не всегда переносятся на следующую линию. Это поведение адаптивных блоков объясняется тем, что они в этой версии фреймворка являются плавающими (float:left).

Например, в этой разметке третий адаптивный блок располагается не на второй линии, а прилипает к первому адаптивному блоку:

Сетка Bootstrap 3 - Поведение плавающих блоков
<div class="row">
  <div class="col-xs-6" style="height: 200px;">
    #1
  </div>
  <div class="col-xs-6" style="height: 150px;">
    #2
  </div>
  <div class="col-xs-6" style="height: 150px;">
    #3
  </div>
</div>

Чтобы это исправить необходимо перед адаптивным блоком, который должен начинаться с новой линии добавить пустой элемент div с классом clearfix.

Сетка Bootstrap 3 - Исправление сетки сайта с помощью блока div c классом .clearfix Поведение плавающих блоков
<div class="row">
  <div class="col-xs-6" style="height: 200px;">
    #1
  </div>
  <div class="col-xs-6" style="height: 150px;">
    #2
  </div>
  <div class="clearfix"></div>  
  <div class="col-xs-6" style="height: 150px;">
    #3
  </div>
</div>

Основные правила создания макета с помощью элементов сетки Bootstrap

Основные этапы создания макета веб-страницы:

  1. создать основные секции (например: header, main, footer);
  2. создать внутри каждой секции обёрточный контейнер;
  3. поместить внутрь каждого обёрточного контейнера, разметку которых необходимо произвести с помощью адаптивных блоков, элемент «ряд»;
  4. создать внутри каждого ряда необходимую структуру с помощью адаптивных блоков;
  5. поместить внутрь необходимых адаптивных блоков, разметку которых необходимо произвести с помощью адаптивных блоков, элемент «ряд»;
  6. выполнить пункт 5;
  7. выполнять пункты 6 и 7 до тех пор, пока не будет достигнута необходимая структура создаваемого макета.

В качестве примера создадим нижеприведённый макет на Bootstrap 3 и 4.

Пример макета веб-страницы, который сверстаем как с помощью Bootstrap 3, так и Bootstrap 4

Верстка вышеприведённого макета на Bootstrap 3:

<header>
  <div class="container-fluid">
    HEADER
  </div>
</header>
<section class="a">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 col-lg-4 a1">A1</div>
      <div class="col-sm-6 col-lg-4 a2">A2</div>
      <div class="clearfix visible-sm-block visible-md-block"></div>
      <div class="col-sm-6 col-lg-4 a3">A3</div>
      <div class="clearfix visible-lg-block"></div>
      <div class="col-sm-6 col-lg-4 a4">A4</div>
      <div class="clearfix visible-sm-block visible-md-block"></div>
      <div class="col-sm-6 col-lg-4 a5">A5</div>
      <div class="col-sm-6 col-lg-4 a6">A6</div>
    </div>
  </div>
</section>
<section class="b">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 col-lg-3 b1">B1</div>
      <div class="col-sm-6 col-lg-3 b2">B2</div>
      <div class="clearfix visible-sm-block visible-md-block"></div>
      <div class="col-sm-6 col-lg-3 b3">B3</div>
      <div class="col-sm-6 col-lg-3 b4">B4</div>
    </div>
  </div>
</section>
<footer>
  <div class="container-fluid">
    FOOTER
  </div>
</footer>

Верстка вышепредставленного макета на Bootstrap 4:

<header>
  <div class="container-fluid">
    HEADER
  </div>
</header>
<section class="a">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-xl-4 a1">A1</div>
      <div class="col-md-6 col-xl-4 a2">A2</div>
      <div class="col-md-6 col-xl-4 a3">A3</div>
      <div class="col-md-6 col-xl-4 a4">A4</div>
      <div class="col-md-6 col-xl-4 a5">A5</div>
      <div class="col-md-6 col-xl-4 a6">A6</div>
    </div>
  </div>
</section>
<section class="b">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-xl-3 b1">B1</div>
      <div class="col-md-6 col-xl-3 b2">B2</div>
      <div class="col-md-6 col-xl-3 b3">B3</div>
      <div class="col-md-6 col-xl-3 b4">B4</div>
    </div>
  </div>
</section>
<footer>
  <div class="container-fluid">
    FOOTER
  </div>
</footer>

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

  1. Сергей
    23 февраля 2021, 17:32
    Добрый день, подскажите пожалуйста. Нужно сделать вот такую картинку на html/css/bootstrap 4 itchief.ru/assets/uploadify/b/c/4/bc4ffd6718972aacf54385e87f3cd769.png
    1. Станислав
      11 сентября 2019, 07:33
      Здравствуйте. В браузере мозила(лиса) почему то выбрасывает сайтбар за основной блок
      <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-9">
      </div>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-3"></div>
      В других браузерах нормально
      1. Александр Мальцев
        11 сентября 2019, 07:53
        Адаптивные блоки должны быть размещение в row:
        <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-9"></div>
          <div class="col-sm-12 col-md-12 col-lg-3"></div>
        </div>
        
        1. Станислав
          11 сентября 2019, 08:00
          Так они так и размещены, это кусок исходного кода страницы в браузере мозила. Почему то блок оказывается за пределами
          . В опере и хроме нормально
          1. Александр Мальцев
            11 сентября 2019, 08:11
            Тогда нужно смотреть какие другие стили (свои) накладываются на эти блоки. Инспектор элементов в браузере может в этом помочь. А также проверьте свою разметку с помощью валидатора, может какой-то тег открыли и забыли его закрыть.
      2. Александр
        04 сентября 2019, 08:51
        Добрый день. У меня вопрос вот какого плана.
        На bootstrap 4 сделал первый экран (как на скрине), но вот беда он не вписывается почему-то в размер экрана. Делал через img-fluid
        Подскажите, что необходимо еще прописать чтобы всё работало идеально.
        Вот код блока на сайте codepen.io/Novikusher/pen/yLBPJbw
        itchief.ru/assets/uploadify/4/3/a/43aba30ad4461ff557cc9745c702cb52.png
        1. Александр Мальцев
          04 сентября 2019, 14:09
          Добрый день!
          Насколько понял, вам нужно просто убрать внутренние поля padding. Для этого нужно добавить pl-0 и pr-0 к col-lg-6.
          <header class="header" id="header">
            <div class="container-fluid">
              <div class="row">
                <div class="col-lg-6 head__block pl-0 pr-0">
                  ...
                </div>
                <div class="col-lg-6 head__block pl-0 pr-0">
                  ...              
                </div>
              </div>
              ...
          
          1. Александр
            04 сентября 2019, 14:55
            UPD: всё равно не помогло. itchief.ru/assets/uploadify/3/d/0/3d005743bd3448a60aa24dc6c7eee5eb.png
            может быть какое-нибудь свойство перекрывает их?
            1. Александр Мальцев
              04 сентября 2019, 15:30
              Ааа, вам нужно по вертикали. Ну тогда с помощью CSS функции calc() или JavaScript.
              Например:
              <style>
                .header {
                  height: 100vh;
                }
              
                .header__menu {
                  height: 100px;
                }
              
                .header__top,
                .header__bottom {
                  height: calc(50% - 50px);
                }
              </style>
              
              <header class="header container-fluid" id="header">
                <div class="row header__top">
                  <div class="col-lg-6 pl-0 pr-0">
                    ...
                  </div>
                  <div class="col-lg-6 pl-0 pr-0">
                    ...
                  </div>
                </div>
                <div class="row header__menu">
                  ...
                </div>
                <div class="row header__bottom">
                  <div class="col-lg-6 pl-0 pr-0">
                    ...
                  </div>
                  <div class="col-lg-6 pl-0 pr-0">
                    ...
                  </div>
                </div>
              </header>
              
              1. Александр
                05 сентября 2019, 09:05
                Не поверите, ничего не меняется)
                Такое чувство, что картинки не отзывчивы. Когда поигрался с размерами картинок физически, то тогда дело сдвинулось. Но это же чушь)
                1. Александр Мальцев
                  05 сентября 2019, 09:19
                  Картинки в вашей задаче используются только для оформления, такие изображения желательно установливать как фон.
                  1. Александр
                    05 сентября 2019, 09:22
                    Кстати да, они же у меня идут просто в блоке. Нужно сделать их фоновыми и всё должно быть отлично. Спасибо за хорошую мысль)
            2. Александр
              04 сентября 2019, 14:42
              Спасибо огромное, буду пробовать.
          2. Эрик
            22 апреля 2019, 11:23
            Здравствуйте. Не подскажите возможно ли bootstrap-стили подключить для определенного div'a? Чтобы не сбивались стили для проекта в целом. Спасибо.
            1. Александр Мальцев
              22 апреля 2019, 14:43
              Здравствуйте. Нет, так сделать нельзя.
              Вставить какой-то другой фрагмент на страницу можно через iframe. Т.е. создаете страницу, к которой подключаете Bootstrap. Размещаете там нужный контент. А потом выводите эту страницу на нужной через iframe.
              1. Эрик
                22 апреля 2019, 15:20
                Спасибо за ответ.
            2. Леша
              27 января 2018, 23:24
              Александр, здравствуйте!
              Увидел огромное количество Ваших ответов на вопросы новичков и очень надеюсь быть в числе тех кому вы помогли :)
              Подскажите, необходимо создать шаблон который будет состоять из одинаковых по размеру блоков (в блоке будет картинка и описание), количество в одном ряду зависит от ширины экрана, т.е. если просмотр осуществляется на широкоформатном дисплее у нас отображается 5 блоков в ряду, если на маленьком мониторе — 3 блока, а остальные переносятся в нижний ряд.
              Использовал такую конструкцию:
              div class=«container»
              div class=«row»
              div class=«card»
              Далее идет заполнение card-блока.
              И еще несколько блоков Подскажите правильно ли я выбрал такую конструкцию для построения блочного сайта?
              И еще объясните, пожалуйста, где настроить размеры блока и отступы?
              1. Александр Мальцев
                28 января 2018, 15:33
                Классы, с помощью которых блокам можно установить одинаковую ширину, подробно описаны в статье «Сетка фрейворка Bootstrap 4» в разделе «Адаптивные блоки без колонок».
                Например, так:
                <div class="container">
                    <div class="row">
                        <div class="col"></div>
                        <div class="col"></div>
                        <div class="col"></div>
                        <div class="d-block d-md-none w-100"></div>
                        <div class="col"></div>
                        <div class="col"></div>
                        <div class="d-none d-md-block w-100"></div>
                        <div class="col"></div>
                        <div class="d-block d-md-none w-100"></div>
                        <div class="col"></div>
                        <div class="col"></div>
                        <div class="col"></div>
                        <div class="d-block d-md-none w-100"></div>
                        <div class="col"></div>
                        <div class="d-none d-md-block w-100"></div>
                        ...
                    </div>
                </div>
                
                Для управления отступами Bootstrap 4 можно использовать классы. Список классов подробно описан в этой теме.
                1. Леша
                  29 января 2018, 18:58
                  Помогло, благодарю! Даже боковые отступы между блоками появились :)
                  Подскажите еще один нюанс: Если 5 блоков размещаются на дисплее в 2 ряда: в первом ряду помещается 3 блока, а остальные 2 переходят на новую строку. Но при этом во второй строке 1 блок расположен четко под 1 блоком 1 строки, а вот второй (он же последний) блок во 2 строке располагается между 2 и 3 блоком 1 строки. Т.е произошло центрирование последнего блока. Как это убрать, чтобы 5 блок стоял четко под 2 блоком 1 строки?
                  Заранее благодарен! Удачи вам!
                  1. Александр Мальцев
                    01 февраля 2018, 15:31
                    Для этого необходимо либо добавлять дополнительный пустой блок (в данном случае шестой) для маленьких экранов, либо использовать какой-то другой способ.
                    Например, так:
                    <div class="container">
                        <div class="row">
                            <div class="col-4 col-md"></div>
                            <div class="col-4 col-md"></div>
                            <div class="d-block d-md-none w-100"></div>
                            <div class="col-4 col-md"></div>
                            <div class="col-4 col-md"></div>
                        </div>
                    </div>
                    
                2. Александр Мальцев
                  28 января 2018, 07:28
                  Здравствуйте, вопрос касается 4 версии или 3.
                  1. Леша
                    28 января 2018, 09:44
                    bootstrap 4
                3. Alex
                  03 апреля 2017, 10:14
                  У вас тут напутано: «Жидкий „текучий“ контейнер (элементы div с классом ».fluid-container"). ". Класса «fluid-container» в BS нет, есть container-fluid :)
                  1. Александр Мальцев
                    03 апреля 2017, 15:46
                    Спасибо, исправил.
                  2. Антон
                    23 декабря 2016, 20:24
                    Здравствуйте, только начинаю осваивать bootstrap и прошу помочь с парой вопросов.
                    1. Есть макет, где шапка шириной 1920px и подвал тоже шириной 1920px. В подвале и шапке изображения. Сама рабочая область сайта 1000px. Как правильно сделать макет, чтобы изображения в шапке и подвале адаптировались.
                    2. Нужно ли кастомизировать сетку под 1000px на сайте Bootstrap или можно использовать стандартную сетку (поставить слева и справа блоки шириной col-*-1, а для рабочей области использовать col-*-10)
                    itchief.ru/assets/uploadify/b/3/9/b3909068e371160c94d8e94da3dc4ae7s.jpg
                    1. Александр Мальцев
                      24 декабря 2016, 00:51
                      Да, можно использовать стандартную сетку Bootstrap. Но, её необходимо ограничить по ширине. Это можно сделать так:
                      1. Создать 3 блока:
                      <body>
                      <div id="header" class="container-fluid">...</div>
                      <div id="main" class="container-fluid">...</div>
                      <div id="footer" class="container-fluid">...</div>
                      
                      2. Ограничить их ширину с помощью CSS-свойства max-width:
                      #header {
                        max-width: 1920px;
                      }
                      #main {
                        max-width: 1000px;
                      }
                      #footer {
                        max-width: 1920px;
                      } 
                      
                      3. К изображениям можно добавить класс img-responsive, а также при необходимости использовать медиа-запросы. Либо использовать их в качестве фона и установить свойству background-size значение, равное cover.
                      1. Антон
                        25 декабря 2016, 09:37
                        Спасибо за оперативный ответ. Скажите, а можно как-нибудь адаптировать три блока с фонами, при том, что и блок в котором они лежат тоже с фоном.
                        Код...
                        <div class="container-fluid menuBlock">
                          <div class="menuBlockFoneLeft pull-left"></div>
                          <div class="menuBlockFoneCenter text-center"></div>
                          <div class="menuBlockFoneRigh pull-right"></div>
                          <div class="clearfix"></div>
                        </div>
                        /* СSS */
                        .menuBlock {
                          margin:0 auto;
                          max-width:960px;
                          height:235px;
                          background:url(images/....png) 50% 100% no-repeat;
                        }
                        .menuBlockFoneLeft, 
                        .menuBlockFoneCenter,
                        .menuBlockFoneRight {
                          float:left;
                          height:235px;
                        }
                        .menuBlockFoneLeft {
                          width:13px;
                          background:url(images/....png) no-repeat;
                        }
                        .menuBlockFoneCenter {
                          width:945px;
                          background:url(images/....png) repeat-x;
                        }
                        .menuBlockFoneRight {
                          width:22px;
                          background:url(images/....png) no-repeat;
                        }
                        

                        Ситуация часто встречается, но никак не получается адаптировать все содержимое блока, включая фоны.
                        1. Александр Мальцев
                          26 декабря 2016, 11:39
                          Если вы хотите наложить одно содержимое на другое, то можно воспользоваться абсолютным позиционированием.
                          HTML-разметка...
                          <div class="container-fluid menuBlock" style="position: relative;">
                            <div style="position: absolute; top:0; left:0; right:0; bottom: 0;">
                              <div class="menuBlockFoneLeft pull-left"></div>
                              <div class="menuBlockFoneCenter text-center"></div>
                              <div class="menuBlockFoneRigh pull-right"></div>
                              <div class="clearfix"></div>
                            </div>
                          </div>
                          
                    2. safbek
                      15 ноября 2016, 11:36
                      Помогло. Спасибо за такой оперативный ответ и за Ваши труды)
                      1. safbek
                        15 ноября 2016, 08:55
                        Здравствуйте! Спасибо за отличный ресурс! У меня возник такой вопрос. У меня макет по сетке бустрап, и почти все блоки 12-колоночные, но один блок выходит за 12-колоночную сетку. Как грамотно заверстать это? Сделать все в сетке, а затем выйти маргинами или же изначально не заключать этот блок в бутстрап дивы и приводить в порядок флоатами? Вот такой у меня макет. Блок видео.:

                        uploads.ru/XfCgH.png
                        1. Александр Мальцев
                          15 ноября 2016, 10:26
                          Здравствуйте.
                          Создать свой контейнер и расположить в нём блоки так, как вам это необходимо.
                          <!-- Бутстраповский контейнер -->
                          <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. Женя
                          25 июля 2016, 18:56
                          Добрый вечер.
                          Не могу понять почему у меня на сайте происходит вот такая белеберда prntscr.com/bxe5oc почему то контейне становится все равно в 1000 px и не становится нормальным. В чем может быть проблема? Бутстрапом занимаюсь недавно, но принцип работы понимаю. Скорее мой косяк в верстке, но почему не съезжают в один столбик все элементы на телефонах? мой сайт angel-loves.com/
                          1. Александр Мальцев
                            26 июля 2016, 11:38
                            Не знаю, с отображением сайта у Вас всё нормально.
                            Изображение: layout-angel-loves.jpg.
                            Но стоит обратить внимание на ошибки, которые у Вас сыплятся при работе JavaScript скриптов.
                          2. Александр
                            23 июня 2016, 09:26
                            Здраствуйте. Скажите пожалуйста как зафиксировать div class=row чтобы он не скролился, я добавляю клас affix но тогда внутриние блоки ведут себя не правильно.
                            Что былучше понять суть проблемы — (добавляю картинку itchief.ru/assets/uploadify/4/7/7/4773edaed65834537ef70c3c5866c5b4.png)мне нужно чтобы кнопка добавления канала (кнопка с плюсиком) и блок с видеоне скролился, а список видео с каналами скролились и уходили (при прокрутки ) под низ.
                            1. Александр Мальцев
                              23 июня 2016, 12:50
                              Если Вы хотите чтобы верхняя часть страницы была не подвижной, то можно сделать так:
                              <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. Александр
                              22 июня 2016, 11:22
                              Здравствуйте. Скажи как поиграться с изменением блоков? На том же примере бутстрапа с навбаром. Там есть форма поиска, но она не входит по размеру, вроде на «md» и строка падает под меню (с новой строки). Есть варианты или где почитать о таких коллизиях? Хотелось бы поиск заменять на пункт меню, в то же время, чтобы сохранилась структура для телефонов.
                              1. Александр Мальцев
                                23 июня 2016, 12:56
                                Здравствуйте. Для этого необходимо использовать классы для скрытия и отображения элементов Bootstrap: hidden-* и .visible-*-block (где * — тип устройства:xs,sm, md или lg).
                                Т.е. форму поиска можно скрыть на одних устройствах, а на других показать.
                                1. Александр
                                  23 июня 2016, 15:57
                                  ТО есть для каждого размера экрана надо прописывать когда показывать, а когда нет? Излишний код, вот что меня смущает. Так то понял чуть позже. Просто форму поиска можно оставить в мобильном варианте, но при 991 пикс она съехала. Я ее скрыл, и она так же пропала для телефонов (под иконкой с полосками)
                                  Еще все эти коллапсы, столько кода, голова закипает пока учишь синтаксис.
                                  1. Александр Мальцев
                                    25 июня 2016, 13:44
                                    Если необходимо создать адаптивную вёрстку, то придётся потрудится, т.к. необходимо будет настраивать её для различных разрешений.
                                    Если не хотите лишнего кода, то только на сервере.
                              2. Westus
                                28 марта 2016, 06:49
                                Между левым и основным блоком ширина в 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. Александр Мальцев
                                  28 марта 2016, 07:56
                                  Так и должно быть…
                                  Но, если очень хочется уменьшить, то можно сделать так.
                                  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
                                    28 марта 2016, 08:22
                                    Я тоже об этом подумал, но при смещении блоков в столбик получится, что они вылазят за приделы. Вот для наглядности:
                                    Было drive.google.com/open?id=0B2ZFceqvHKC_SWNxS21ULU1IZjQ
                                    Исправили drive.google.com/open?id=0B2ZFceqvHKC_cU1aZUJJdy01cW8
                                    Стало drive.google.com/open?id=0B2ZFceqvHKC_Y0Fnb3VWUkFKejA
                                    1. Александр Мальцев
                                      28 марта 2016, 10:30
                                      Это CSS правило необходимо установить только для экранов >=sm.
                                      Т.е. будет так:
                                      @media (min-width:768px) {
                                        #left {
                                          padding-right: 7.5px;
                                        }
                                        #right {
                                          padding-left: 7.5px;
                                        }
                                      }
                                      
                                      1. Westus
                                        28 марта 2016, 10:45
                                        Спасибо, получилось. Вот так сделал:
                                        /* Medium Devices, Desktops */
                                        @media only screen and (min-width : 992px) {
                                        	.content-text {
                                        	margin-right: -15px;
                                        }
                                        }
                                2. Sergey
                                  17 марта 2016, 11:04
                                  +1 Однозначно респект!
                                  Краткое понятное изложение основных моментов.
                                  Спасибо за статью.
                                  1. Владислав
                                    14 февраля 2016, 00:33
                                    не ну Автор красавчик! респект!
                                    1. Виктор
                                      29 января 2016, 23:02
                                      при верстке сайта лучше сразу сделать его адаптивным или посте создания основной платформы?
                                      1. Александр Мальцев
                                        30 января 2016, 09:07
                                        Конечно, сразу.
                                        1. Виктор
                                          30 января 2016, 12:55
                                          ок. спасибо!
                                      2. Виктор
                                        28 января 2016, 19:24
                                        Здравствуйте, можно ли без системы бутстрап сверстать адаптивный сайт под все устройства? если да, то сложно ли, для новичка? или лучше не заморачиваться и вкл бутстрап? я решил вообще отказаться от бутстрап, или всё таки вы мне еще какие либо варианты предложите? мне кажется что с бутстрап сайт получится по весу тяжелее, так как я всё что там есть я точно не буду использовать, и сайт грузится будет дольше, хотя я новичок в этом, что посоветуете?
                                        1. Александр Мальцев
                                          30 января 2016, 09:05
                                          Здравствуйте, Виктор.
                                          Адаптивный сайт можно сверстать, конечно, и без Bootstrap, с помощью только HTML и CSS.
                                          Задача конечно посложнее будет, да и времени уйдёт даже не в разы, а в десятки раз больше. После этого ещё и тестировать придётся на различных устройствах. Выбор конечно Ваш. И не факт что Ваш CSS файл будет иметь размер меньше чем у Bootstrap.
                                          А как сайт с Bootstrap может быть тяжёлым.
                                          Переходите на страницу
                                          _http://getbootstrap.com/customize/
                                          и делаете свою сборку Bootstrap, т.е. оставляете только то что надо. Нажимаете compile и получаете свою сборку.
                                          Например, сборка Bootstrap, состоящая только из сетки и адаптивных утилит занимает только 15 Кбайт.
                                          1. Виктор
                                            30 января 2016, 12:49
                                            галочки отметил, скачал, скачались 3 файла, css, js, config.json. в папке css есть просто бутстрап и бутстрап мин, они мне оба нужны? так же в js. а для чего 3 й фаил config.json? мне его куда положить?
                                            1. Александр Мальцев
                                              30 января 2016, 14:36
                                              Если у Вас есть js файлы значит Вы не убрали галочки из раздела, содержащего jQuery плагины. Нужен только файл bootstrap.min.css. Файл bootstrap.min.css — это сжатая версия файла bootstrap.css. Минимизация файла происходит с помощью специальных утилит, которые удаляют из исходного файла пробелы и многое другое. Файл bootstrap.css больше подходит для изучения, в нём можно посмотреть как всё организовано.
                                              Файл config.json содержит настройки Вашей сборки. Т.е. если выйдет новая версия Bootstrap, в которой что-то улучшено, то Вы можете опять перейти на страницу Customize Bootstrap и загрузить эти настройки компилятору. После этого нажав Compile и Download Вы получите новую версию Вашей сборки.
                                              1. Виктор
                                                31 января 2016, 09:37
                                                ок. большое спасибо за помощь
                                            2. Виктор
                                              30 января 2016, 10:37
                                              А чем будет отличаться адаптация сайта сделанный профелем в ручную, от сайта сделанным новичком типа меня с помощью бутстрап, какие будут плюсы и минусы? Спасибо за информацию, всё сидел ждал вашего ответа ☺, не знал как начинать верстать с бутстрап или без. Вроде как хочется по быстрее сверстать для дела сайт, а с другой стороны хочется научиться вертать как профели.
                                              1. Александр Мальцев
                                                30 января 2016, 14:18
                                                Если Вы сделаете сайт на Bootstrap, то он будет корректно работать на всех устройствах и браузерах. Наверно это самый главный плюс. Вы ведь не знаете тонкости работы различных браузеров на различных устройствах. В одном браузере может выглядеть так, в другом совсем иначе, а в третьем это не работать. Во вторых изучая CSS Bootstrap Вы узнаете как правильно необходимо создавать свой собственный CSS, но и многое другое, такое как Less и Sass. Это пригодится понять как необходимо правильно создавать свои стили, чтобы их потом можно было легко модифицировать. Кроме этого и на Bootstrap можно создать очень интересный и необычный дизайн.
                                          2. Mixail
                                            13 января 2016, 21:54
                                            Александр, Добрый вечер. Вопрос мой касается visible — для каких целей необходимо, если можно задать видимость универсальную для всех устройств?
                                            1. Александр Мальцев
                                              14 января 2016, 13:16
                                              Здравствуйте.
                                              Класс 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
                                                16 января 2016, 00:45
                                                Я, понял спасибо за разъяснение, перефразирую вопрос, какой смысл вообще делать видимость на одних устройствах, а на других скрывать?
                                                1. Александр Мальцев
                                                  17 января 2016, 10:47
                                                  Например, на сайте getbootstrap.com есть главное меню (верхнее), контент и меню справа.
                                                  Так вот на больших экранах отображаются 3 блока, а на маленьких только 2 (меню справа отсутствует).
                                                  Подобное можно наблюдать и на сайте api.jquery.com, но только там на маленьких экранах отсутствует меню слева.
                                            2. Олег Афанасьев
                                              13 октября 2015, 16:21
                                              Добрый день, Александр.

                                              Спасибо за статьи, читаю по порядку.
                                              Есть пожелание: выделить как-то справа в «Навигация» текущий линк с названием статьи, чтобы было удобнее и быстрее переходить к следующей.
                                              1. Александр Мальцев
                                                14 октября 2015, 12:41
                                                Добрый день, Олег.
                                                Спасибо за пожелание, в ближайшее время сделаю.
                                              2. Лука
                                                06 октября 2015, 05:21
                                                Доброго времени!
                                                класс hidden-xs работает отлично, но вот visible-xs-block заставить работать не могу!
                                                Ни чего понять не могу, почему блок не хочет отображаться только в мобильном виде, а отображается на всех разрешениях?
                                                1. Александр Мальцев
                                                  06 октября 2015, 11:41
                                                  Лука, проверьте какую версию 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. Сергей
                                                  16 июля 2015, 14:15
                                                  Здравствуйте.
                                                  Подскажите, где следует применять class=«clearfix visible-*-block», "..-inline" и "...-inline-block"
                                                  Спасибо
                                                  1. Александр Мальцев
                                                    16 июля 2015, 15:57
                                                    Привет, Сергей.
                                                    В 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. Сергей
                                                      16 июля 2015, 19:18
                                                      Вопрос касался именно третьего элемента в конструкции visible-*-*. Т.е. -block, -inline, -inline-block. Про остальные составляющие у вас все хорошо описано ранее. Буду стараться формулировать вопросы точнее. Спасибо.
                                                  2. Дамир
                                                    29 мая 2015, 09:09
                                                    Привет, по последнему коду,
                                                    имхо каждый блок веб-страницы (шапку, садбар, контент, футер) лучше разместить в отдельную строку:
                                                    .container
                                                    	.row
                                                    		.head
                                                    
                                                    	.row
                                                    		.sidebar
                                                    	
                                                    	.row
                                                    		.content
                                                    
                                                    	.row
                                                    		.footer
                                                    
                                                    1. Александр Мальцев
                                                      29 мая 2015, 13:18
                                                      Привет, с шапкой и подвалом согласен. Твой вариант более логичен. Хотя ни кто не запрещает Вам макет создавать как в статье, он будет валидный с точки зрения 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. Дамир
                                                        29 мая 2015, 14:43
                                                        да действительно тут упустил момент, так будет лучше:
                                                        .row .main
                                                        	.col content
                                                        	.col sidebar
                                                        1. Henkz
                                                          23 октября 2015, 13:28
                                                          А не могли бы Вы подробней объяснить этот момент по этому куску кода?
                                                    Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.