<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Пример адаптивной верстки на Bootstrap

Пример адаптивной верстки на Bootstrap

На этом уроке мы сверстаем одну секцию реального макета одностраничного сайта, используя только сетку из фреймворка Bootstrap. Это комбинированная верстка, когда для построения HTML структуры, используются готовые классы. А для стилизации элементов и задания отступов, пишутся свои классы.

Пример секции макета

На скриншоте изображена одна секция с направляющими. Мы видим, что фоновое изображение растягивается на всю ширину браузера, а ширина контентной части ограничивается двумя крайними направляющими и равняется 960 пикселям.

Пример адаптивной верстки на Bootstrap.

Сетка Bootstrap 4 построена на технологии флексбоксов и состоит из 12 гибких колонок, ширина которых уменьшается в зависимости от размеров экрана. Верстальщику нужно правильно распределить эти колонки между элементами, учитывая разные размеры экранов.

Наша секция мысленно делится на левую текcтовую часть и правую графическую часть. На больших и средних экранах левая половинка занимает 8 колонок (col-md-8), а правая - 4 колонки (col-md-4). Префикс md начинает работать в точке 768 пикселей и выше.

Создадим общий контейнер с фоновым изображением, растягивающимся от края до края.

<section class="app">
    ...
</section>


.app {
    background-image: url(/assets/img/app_bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Внутри секции поместим бутстраповские классы (базовую разметку). Все названия классов начинающиеся с app - пользовательские. Сначала всегда идет общий контейнер container со строками row, строка является контейнером для колонок col. В данном макете - одна строка и соответственно 2 колонки.

<section class="app">
  <div class="container">
   <div class="app__content">
    <div class="row">
     <div class="col-md-8">
      левая часть
     </div> <!-- /.col-8 -->
     <div class="col-md-4">
      правая часть
     </div><!-- /.col-4 -->
    </div><!-- /.row -->
   </div><!-- /.app__content -->
  </div><!-- /.container -->
</section><!-- /.app -->

Зачем в базовую разметку мы добавили класс app__content? Только для того, чтобы на больших мониторах ограничить контентную часть по ширине (максимум 960 пикселей) и выровнять её по центру.

.app__content {
    max-width: 960px;
    margin: 0 auto;
}

Заполняем контентом левую колонку.

<div class="col-md-8">
  <h2 class="app__title">
    Хотите получить бесплатную<br> юридическую консультацию?
  </h2>
  <ol class="app__list">
    <li>
      <span class="app__list__red">1.</span>
      Скачайте наше <a class="app__list__link" href="#">приложение Reworld</a>
      для iOS или Android
    </li>
    <li>
      <span class="app__list__red">2.</span>
      Посмотрите один из 150 познавательных видеороликов
    </li>
    <li>
      <span class="app__list__red">3.</span>
      Введите Ваш номер телефона и с Вами свяжется юрист для консультации
    </li>
  </ol>
</div> <!-- /.col-8 -->

и правую колонку

<div class="col-md-4">
  <div class="app__icon--android">
    <a href="#"><a href="#">
    <img src="assets/img/android-app-store.png" alt="android"><a href="#">
    </a>
  </div>
  <div class="app__icon--iOS">
    <a href="#">
    <img src="assets/img/iOS-app-store.png" alt="apple">
   </a>
  </div>
</div> <!-- /.col-4 -->

Однако это ещё не всё, нужно позаботиться о планшетах и смартфонах. В текущем положении, элементы слишком сильно прижаты по горизонтали.

При уменьшении экрана, блоки должны автоматически перестроится друг под друга и оба занимать по 12 колонок на всех дисплеях меньше 768 пикселей. Добавим col-sm-12 для устройств не меньше 576 пикселей и col-12. Класс col без префикса работает на экране, меньше 576 пикселей.

<div class="col-12 col-sm-12 col-md-8">..</div>
<div class="col-12 col-sm-12 col-md-4">..</div>

Пример адаптивной верстки на Bootstrap.

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

@media (max-width: 768px) {
  .app__title {
    padding-top: 50px;
    padding-bottom: 30px;
  }
  .app__list {
    padding-bottom: 20px;
  }
  .app__icon--android {
    padding-top: 40px;
    }

  .app__icon--iOS {
    padding-bottom: 60px;
  }
}


@media (max-width: 576px) {
  .app__list {
    padding-bottom: 50px;
  }
  .app__icon--android {
    padding-top: 0;
  }
}

Результат адаптивной верстки под мобильные устройства.

Пример адаптивной верстки на Bootstrap.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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