<MyRusakov.ru />

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

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

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

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

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

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

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

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

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

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

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

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

Какая тема Вас интересует больше?

Верстка формы обратной связи используя Bootstrap

Верстка формы обратной связи используя Bootstrap

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

Нам не надо создавать свой файл стилей CSS, он уже создан разработчиками. Все что вам надо, это подключить к нашему файлу form.php ссылку на ../bootstrap.min.css на официальном сайте Bootstrap. Открываете Getbootstrap, копируете саму верхнюю ссылку на файл стилей в разделе Bootstrap CDN и вставляете ее на страничку с формой между тегами head. Смотрите ниже скриншот:

Верстка формы обратной связи 
используя Bootstrap

Этот фреймворк очень здорово облегчает жизнь веб-разработчика, не нужно придумывать свои CSS стили, берем уже готовые шаблоны и прописываем в нужное место подходящие нам классы. Процесс верстки формы обратной связи вместе с Bootstrap будет увлекательным и конечный результат вас обязательно порадует.

Заходим в раздел "getbootstrap.com/css/#forms" и в качестве основы берем образец базовой формы. Затем копируем код и вставляем его к себе на страницу form.php, выше нашей ранее созданной формы (ее пока оставим на месте в качестве примера), а чтобы форма не расползалась на всю ширину браузера, обертываем ее в контейнер:

 <div class="container">
   ...
 </div>

Используя класс col-md-4 с помощью Grid System (сеточной системы), разделим страницу на 3 части и поместим нашу форму в средний блок.

  <div class="row">
  <div class="col-md-4">пустой блок
  </div>
  <div class="col-md-4">наша форма здесь
  </div>
  <div class="col-md-4">пустой блок
  </div>
  </div>

Новая форма содержит поля, которых не было в нашей оригинальной форме - это file input и checkbox. Удалим их из кода.

Верстка формы обратной связи 
используя Bootstrap

Добавим еще одно поле, путем копирования div блока и все что внутри него.

<div class="form-group">...</div>

Сейчас у формы три поля, пописываем им названия как в нашей исходной форме и добавляем четвертое широкое поле для ввода сообщений textarea, поместив его в блок div.

 <div class="form-group">
   <label for="message">Сообщение</label>
   <textarea class="form-control" rows="3"></textarea>
 </div>

Верстка формы обратной связи 
используя Bootstrap

На скриншоте выше - кнопка «Отправить сообщение» выглядит слишком бледно, идем в раздел button и подберем что-нибудь повеселее. Выберем кнопку с голубым цветом, ему соответствует - class="btn btn-info".

Верстка формы обратной связи 
используя Bootstrap

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <title>Верстка формы обратной связи используя Bootstrap</title>
</head>
<body>
<div> </div>
<div class="container">
<div class="row">
<div class="col-md-4"> </div>
<div class="col-md-4">
   <h4>Форма обратной связи на Bootstrap</h4>
   <form action="./mail.php" method="post">
<div class="form-group">
   <label for="name">Ваше имя:</label>
   <input type="name" name="name" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
   <label for="email1">E-mail:</label>
   <input type="email" name="email" class="form-control" id="email1" placeholder="Email">
</div>
<div class="form-group">
   <label for="phone">Номер телефона:</label>
   <input type="phone" name="phone" class="form-control" id="phone" placeholder="Phone">
</div>
<div class="form-group">
   <label for="message">Сообщение:</label>
   <textarea class="form-control" name="message" rows="3"></textarea>
</div>
   <button type="submit" class="btn btn-info">Отправить сообщение</button>
</form>
</div>
<div class="col-md-4"> </div> </div>
</div>
</body>
</html>

Только что сверстанная форма с помощью Bootstrap рабочая, то есть может отправлять данные на почту. Смотрите код PHP обработчика - mail.php на этом уроке.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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