<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также к курсу идёт Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Адаптивная верстка макета (Bootstrap 4)

Адаптивная верстка макета (Bootstrap 4)

На этом уроке мы сверстаем одну из самых типовых секций на бизнес-сайтах - "Услуги". Сделаем HTML разметку по сетке Bootstrap. С тех пор как технология флексбокс стала популярной у браузеров, я больше не являюсь ярым сторонником данного фреймворка (в контексте верстки по сетке). Однако все ещё приходится сталкиваться с Bootstrap во время работы с чужими проектами.

Макет секции "Услуги"

На скриншоте изображена часть макета в формате PSD. Начинающему верстальщику на первый взгляд кажется, что макет простой и сверстать его на Bootstrap не составит особого труда. Только с опытом придёт понимание, что эту секцию проще сверстать на флексах. Все дело во вложенности. Иконка с текстом должны обязательно находиться во флекс-контейнере, иначе их не поставить в строку. Получается, что в каждую их девяти колонок нужно вкладывать новый контейнер с 12-ти колоночной сеткой. Это жутко неудобно. Но давайте обо всем по порядку.

Адаптивная верстка макета (Bootstrap 4).

HTML разметка по сетке Bootstrap

У данной секции 3 столбца и три ряда. В каждом столбце поместится по 4 бутстраповских колонки на десктопных мониторах и 12 колонок на планшетах и смартфонах. Ряды row состоят из колонок, колонки находятся внутри контейнера container и все это обернуто в общий пользовательский класс services.


Схематичная разметка 1-го уровня


<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">
      колонка 1
    </div>
    <div class="col-12 col-md-4">
      колонка 2
    </div>
    <div class="col-12 col-md-4">
      колонка 3
    </div>
  </div> <!-- /.row 1 -->
  <div class="row">
      ...
  </div> <!-- /.row 2 -->
  <div class="row">
      ...
  </div> <!-- /.row 3 -->
</div><!-- /.container -->

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

container -> row -> col-12 col-md-6
Адаптивная верстка макета (Bootstrap 4).

Нетрудно подсчитать, что в сумме мы получим 10 контейнеров со всей полагающейся структурой внутри только на одну секцию. Какой здесь есть выход? Я предлагаю отказаться от бутстраповских вложенных контейнеров и заменить их на обычные флексбокс контейнеры.


HTML код


<section class="services">
<div class="container">
  <div class="row justify-content-center sb">
   <div class="col-12 col-md-4">
    <div class="services__item"> <!-- flex-контейнер -->
    <div class="services__icon">
    <img src="/assets/img/professor-consultation.png" alt="icon">
    </div>
    <div class="services__subtitle">
     Устные<br>консультации
    </div>
    </div>
   </div> <!-- /.col-md-4 -->

   <div class="col-12 col-md-4">
    <div class="services__item"> <!-- flex-контейнер -->
    <div class="services__icon">
     <img src="/assets/img/phone-call.png" alt="icon">
    </div>
    <div class="services__subtitle">
     Звонок<br>юриста
    </div>
    </div>
   </div> <!-- /.col-md-4 -->

   <div class="col-12 col-md-4">
    <div class="services__item"> <!-- flex-контейнер -->
    <div class="services__icon">
     <img src="/assets/img/file.png" alt="icon">
    </div>
    <div class="services__subtitle">
     Модели<br>договора
    </div>
    </div>
   </div> <!-- /.col-md-4 -->
  </div><!-- /.row -->
</div><!-- /.container --> </section>

CSS код

Все блоки с указанным свойством display: flex у классов, являются флекс-контейнерами.

.services__item {
    display: flex; <!-- flex-контейнер -->
}

.services__icon {
    margin-right: 20px;
}

.services__subtitle {
    font-family: ProximaNova-Light, sans-serif;
    font-size: 1.14rem;
    color: $black;
    text-align: left;
}

@media (max-width: 768px) {
    .services {
        padding: 60px 10px;
    }

    .services__title {
    margin-bottom: 50px;
    font-size: 1.5rem;

    }
    .sb {
        margin-bottom: 0;
    }
    .services__item {
        margin-bottom: 50px;
        flex-direction: column;
        justify-content: center;
    }

    .services__subtitle {
        text-align: center;
    }

}

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.