Подробный разбор и создание всех трех форм на фреймворке бутстрап 3

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

К каждому теоретическому материалу я прикреплю готовый пример. Ну а теперь давайте перейдем к самому интересному!

Создание опросника

Для реализации данного задания я использовал стандартный вид формы – вертикальный – и добавил три обычных текстовых поля. При этом я вставил видео, по которому будет вестись опрос.

Заметьте, что видеоклип вставлен при помощи класса Bootstrap embed- responsive. Он делает дизайн отзывчивым, поэтому трейлер будет адаптироваться под размеры экрана вместе с остальным содержимым веб-страницы.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.container {
margin:0;
width:100%;
background: #B0C4DE;
}
.col-md-offset-2{
background: #fff;
}
</style>
</head>
<body>
 
<div class="container">
<div class="row text-center">
<div class="col-md-offset-2 col-md-8 col-md-offset-2 ">
 <h2>Собираем статистику!</h2>
<h3>Посмотрите видео и ответьте на вопросы</h3>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-offset-2 ">
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kLtpcxtk4HI" ></iframe>
  </div>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-offset-2 ">
 <form>
    <div class="form-group">
      <label for="text1">Как называется шоу на видео?</label>
      <input type="text" class="form-control" id="text1" placeholder="Ответ">
    </div>
    <div class="form-group">
      <label for="text2">Кто его ведущие?</label>
      <input type="text" class="form-control" id="text2" placeholder="Ответ">
    </div>
     <div class="form-group">
      <label for="text3">Основная тематика передачи.</label>
      <input type="text" class="form-control" id="text3" placeholder="Ответ">
    </div>
    <button class="btn btn-large btn-primary" type="button">Проверить</button>
  </form>
</div>
</div>
</div>
</body>
</html>

Окно для написания комментариев

Теперь перейдем к созданию другой полезной штуки – специальной формы для написания комментариев. Она программируется очень просто, однако незаменима при написании блогов, новостных сайтов, интернет-магазинов и подобных сервисов.

Для ее реализации нужно использовать тег <textarea>, который позволяет вписывать несколько предложений, растягивать область ввода текста и главное сохранять перенос строки при отправке сообщений на сторону сервера.

А теперь перейдем к программной реализации примитивного блога.

<div class="container-fluid">
      <h3><small>Текущие публикации</small></h3>
      <hr>
      <h2>Пост первый</h2>
      <h5><span class="glyphicon glyphicon-time"></span> Автор: Алексей Попов, 1.10.16, 12:44.</h5>
      <p>Здесь расположен основной текстовый контент статьи.</p>
      <br>
      <hr>
 
      <h4>Оставьте свой комментарий:</h4>
      <form role="form">
        <div class="form-group">
          <textarea class="form-control" rows="3" required></textarea>
        </div>
        <button type="submit" class="btn btn-success">Ответить</button>
      </form>
      <br><br>
 
      <p><span class="badge">1</span> Комментарии:</p><br>      
      <div class="row">
        <div class="col-sm-2 text-center">
          <img src="http://www.volcov.na.by/media/image/ava150/1741.jpg" class="img-circle" height="65" width="65" alt="Avatar">
        </div>
        <div class="col-sm-10">
          <h4>Валентина <small>1.10.16, 19:12.</small></h4>
          <p>Отличный пост!</p>
          <br>
        </div>
    </div>
</div>

Форма обратной связи

И наконец мы подошли к реализации третьего задания. Теперь я покажу вам, как создать форму регистрации во всплывающем окне. Для этого понадобятся еще и знания плагина Modal Plugin. Если у вас нет опыта работы с этим инструментом, то для начала вы можете прочесть мои предыдущие публикации, посвященные изучению конкретно разворачивающихся окон.

А мы продолжим! Итак, создадим оболочку для нашей формы. Как вы уже знаете, реализация модального окна состоит из трех частей: триггера, блоков, определяющих сам modal, и внутреннего наполнения контентом.

<div class="container">
  <h2>Хотите зарегистироваться?</h2>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#Reg">ДА!</button>
 
  <div class="modal fade" id="Reg" role="dialog">
    <div class="modal-dialog">
 
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Регистрация</h4>
        </div>
        <div class="modal-body">
          //Здесь будет код формы
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success" data-dismiss="modal">Зарегистрироваться</button>
        </div>
      </div>
 
    </div>
  </div>
 
</div>

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

<form class="form-horizontal">
 <div class="form-group">
      <label class="control-label col-sm-2" for="Lname">Фамилия:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="Lname" placeholder="Пупкин">
      </div>
    </div>
<div class="form-group">
      <label class="control-label col-sm-2" for="Fname">Имя:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="Fname" placeholder="Алексей">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="abrakadabra@hotmail.com">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Пароль:</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="pwd" placeholder="123edfRn">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-success">Зарегистрироваться</button>
      </div>
    </div>
  </form>

Надеюсь вам понравилась текущая публикация и был интересен представленный материал. Жду ваших заявок на подписку. Буду благодарен, если поделитесь ссылкой с друзьями на понравившиеся вам статьи. До новых встреч. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 465 раз

Этот блог уже читают
читай и ты!

Оставить коментарий