Верстка отзывчивого макета на базе сетки Bootstrap

Александр Мальцев
Александр Мальцев
28K
7
Верстка отзывчивого макета на базе сетки Bootstrap
Содержание:
  1. Принцип разработки адаптивно-резинового макета на Bootstrap
  2. Процесс разработки адаптивно-резинового макета
  3. Комментарии

В этом статье рассмотрим процесс разработки адаптивно-резинового макета сайта на фреймворках Bootstrap 3 и 4.

Принцип разработки адаптивно-резинового макета на Bootstrap

Принцип разработки адаптивно-резинового макета на Bootstrap 3 и 4 практически ничем не отличается от адаптивно-фиксированного.

Единственное отличие между ними кроется только в типе используемого обёрточного контейнера. Если в качестве класса обёрточного контейнера использовать container, то на выходе получится адаптивно-фиксированный макет. Если же использовать класс container-fluid, то получится - адаптивно-резиновый или адаптивно-гибкий макет.

Обёрточный контейнер с классом container-fluid на всех контрольных устанавливает макету ширину, равную 100% относительно ширины viewport.

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

Структура адаптивно-резинового макета:

Bootstrap - Структура адаптивно-резинового макета

Вёрстка макета на Bootstrap 3:

<!-- HEADER -->
<header class="header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-lg-2 logo">LOGO</div>
      <nav class="col-xs-7 col-sm-5 col-lg-7 top-nav">TOP-NAV</nav>
      <div class="col-xs-5 col-sm-4 col-lg-3 social">SOCIAL</div>
    </div>
  </div>
</header>
<!-- MAIN -->
<main class="main">
  <div class="container-fluid">
    <div class="row main-hero">
      <div class="col-lg-6 hero">HERO</div>
      <div class="col-lg-3 action">ACTION</div>
      <div class="col-lg-3 visible-lg-block ad">AD</div>
    </div>
    <div class="row main-article">
      <aside class="col-sm-9 col-lg-3 left">LEFT</aside>
      <div class="col-sm-3 hidden-lg ad">AD</div>  
      <div class="clearfix hidden-lg"></div>
      <article class="col-lg-6 article">ARTICLE</article>
      <aside class="col-lg-3 right">RIGHT</aside>        
    </div>
  </div>
</main>
<!-- FOOTER -->
<footer class="footer">
  <div class="container-fluid">
    FOOTER
  </div>
</footer>

Вёрстка макета на Bootstrap 4:

<!-- HEADER -->
<header class="header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-xl-2 logo">LOGO</div>
      <nav class="col-7 col-md-5 col-xl-7 top-nav">TOP-NAV</nav>
      <div class="col-5 col-md-4 col-xl-3 social">SOCIAL</div>
    </div>
  </div>
</header>
<!-- MAIN -->
<main class="main">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xl-6 order-xl-1 hero">HERO</div>
      <div class="col-xl-3 order-xl-2 action">ACTION</div>
      <aside class="col-md-9 col-xl-3 order-xl-4 left">LEFT</aside>
      <div class="col-md-3 order-xl-3 ad">AD</div>
      <article class="col-xl-6 order-xl-5 article">ARTICLE</article>
      <aside class="col-xl-3 order-xl-6 right">RIGHT</aside>
    </div>
  </div>
</main>
<!-- FOOTER -->
<footer class="footer">
  <div class="container-fluid">
    FOOTER
  </div>
</footer>

Комментарии: 7

  1. Sergey Ionov
    Sergey Ionov
    2018-06-12 13:09:35
    К сожалению, у меня по какой-то причине не отображается код. Я использую браузер Chrome (Версия 67.0.3396.79). Пробовал также открывать в IE — та же картина:

    itchief.ru/assets/uploadify/f/5/c/f5c212975f3270396cc2dd093ca45a9d.jpg

    Подскажите пожалуйста, в чём причина такого отображения?
  1. Александр Мальцев
    Александр Мальцев
    2018-06-12 13:41:14
    Откорректировал этот момент.
  • Sergey Ionov
    Sergey Ionov
    2018-06-12 13:46:54
    Спасибо за оперативность! )))
  • seventh
    seventh
    2016-09-13 19:56:50
    Подскажите, пожалуйста, как сделать отступы слева/справа от края экрана только для больших экранов. То есть на больших надо большие отступы, а на мобильных совсем без отступов по краям.
    Сейчас выглядит так:
    .container-fluid {
      padding-left: 4%;
      padding-right: 4%;
    }
    На компе то, что надо, а на телефоне получаются огромные вертикальные полосы по краям.
    1. Александр Мальцев
      Александр Мальцев
      2016-09-13 22:27:03
      Это делается с помощью медиа-запросов.
      /* ширина больше 1200px */
      @media (min-width: 1200px) {
        .container-fluid {
          padding-left: 4%;
          padding-right: 4%;
        }
      }
      Вот ещё варианты создания правил (может быть пригодятся):
      /* для диапазона (ширина >= 992px и <=1199px) */
      @media (min-width:992px) and (max-width:1199px) {
        .container-fluid { 
          padding-left: 2%;
          padding-right: 2%;
        }
      }
      /* ширина <= 767px */
      @media (max-width:767px) {
        .container-fluid { 
          padding-left: 1%;
          padding-right: 1%;
        }
      }
      Ширина устройств (по умолчанию):
      xs ( <768px )
      sm ( >=768px и <992px )
      md ( >=992px и <1200px )
      lg ( >=1200px )
    2. seventh
      seventh
      2016-09-14 06:50:01
      Идеально! Благодарю :)
  • Евгений
    Евгений
    2015-07-28 18:50:16
    Отличный урок!