<MyRusakov.ru />

Своя Web-студия за 55 дней

Своя Web-студия за 55 дней

Система "Своя Web-студия за 55 дней" поможет Вам открыть свою собственную успешную Web-студию всего за 55 дней. Обучение построено на теории, плюс практике, то есть я прямо на Ваших глазах буду абсолютно с нуля открывать свою Web-студию, нанимать специалистов, принимать и выполнять заказы. Это настоящее реалити-шоу. Плюс весь курс разбит по дням, в каждый из которых Вам необходимо будет посмотреть небольшое количество видеоуроков, выполнить задания по этим урокам и проставить галочки о выполнении. Каждый из дней у Вас будет отнимать не более 1-го часа в день.

Таким образом, выполняя ежедневно маленькие шажки, Вы через 55 дней станете владельцем уже прибыльной Web-студии, заработав при этом первые 100 000 рублей.

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

Подписавшись по 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):

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