Тема урока.
На сегодняшнем уроке мы будем создавать страницу с контактами и формой обратной связи для нашего сайта визитки. Также научимся создавать навигацию по сайту с использованием хлебных крошек.
Обзор новых терминов.
Форма обратной связи — это форма которая позволяет посетителю сайта отправить заявку на услугу или обратный звонок.
Обратный звонок — услуга на сайте позволяющая заказать звонок от поставщика услуг на свой телефон в удобное время. Данная услуга на сайте увеличивает количество заказов услуги с сайта. Повышает конверсии.
Конверсия в интернет-маркетинге — это отношение числа посетителей сайта, выполнивших на нём какие-либо целевые действия к общему посетителю сайта. К примеру если одни посетитель из 100 заказал услугу. То конверсия составляет 1/100 или 1%.
Хлебные крошки — (навигационная цепочка, англ. Breadcrumbs) – это элемент навигации по сайту, который представляет собой путь от главной страницы сайта, до текущей страницы, на которой в настоящий момент находится пользователь.
Пагинация (pagination) — Нумерация страниц на сайте с ссылками на каждую отдельную страницу.
Обзор новых классов Bootstrap.
breadcrumb — класс помогающий создавать хлебные крошки.
Пример использования:
<h2>Хлебные крошки и пагинация</h2> <p> .breadcrumb класс указывает местоположение текущей страницы в пределах навигационной иерархии:</p> <ol class="breadcrumb"> <li><a href="#">Главная</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Веб-дизайн</a></li> <li class="active">Дизайнер Иван Иванович Иванов</li> </ol>
pager- Класс позволяющий реализовать навигацию по сайту с кнопками вперед назад.
<h2>pager</h2>
<p> Класс .pager предоставляет простые ссылки разбивки на страницы (Предыдущий / Следующий): </p>
<ul class="pager">
<li><a href="#">Предыдущий</a></li>
<li><a href="#">Следующий</a></li>
</ul>
.previous и .next классы выравнивания каждую ссылку по сторонам:
<h2>Выравнивает .pager предыдущую кнопку слева и Выравнивает .pager кнопку следующая справа</h2>
<p>.previous и .next классы выравнивания каждую ссылку по сторонам:</p>
<ul class="pager">
<li class="previous"><a href="#">Предыдущий</a></li>
<li class="next"><a href="#">Следующий</a></li>
</ul>
<hr>
disabled
.disabled Класс указывает на некликабельную ссылку. Данный класс используется если следующей или предыдущей страницы не существует.
<h2>disabled</h2>
<p>.disabled Класс указывает на некликабельную ссылку:</p>
<ul class="pager">
<li class="previous disabled"><a href="#">Предыдущий</a></li>
<li class="next"><a href="#">Следующий</a></li>
</ul>
<hr>
Класс .pagination предоставляет ссылки разбивки по страницам
<h2>Пагинаця</h2>
<p>Класс .pagination предоставляет ссылки разбивки по страницам:</p>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
Для управления размерами пагинации используются классы pagination-sm и pagination-lg
<h2>Размеры пагинации</h2>
<p>Изображение большего класса .pagination:</p>
<ul class="pagination pagination-lg">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
<p>Стандартный класс .pagination:</p>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
<p>Меньший класс .pagination:</p>
<ul class="pagination pagination-sm">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
Для отображения активной ссылки используется класс .active
<h2>Некликабельность и активность ссылки</h2>
<p>.disabled Класс указывает на некликабельную ссылку, а .active класс указывает на текущую страницу:</p>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="disabled"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="active"><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
<hr>
Классы меток позволяют пометить тот или иной текст.
<h1>Метки</h1> <hr> <h2>Класс .label </h2> <p>Различные классы .label позволяют вставить метку внутри элемента (автоматически подогнать размер элемента):</p> <h1>Заголовок 1 <span class="label label-default">Новинка</span></h1> <h3>Заголовок 3 <span class="label label-default">Новинка</span></h3> <h5>Заголовок 5 <span class="label label-default">Новинка</span></h5> <p>Параграф <span class="label label-default">Новинка</span></p> <hr> <hr>
Для управления фонового цвета метки используйте классы label-default (обычная метка), label-primary(основная метка), label-success(успешная операция), label-info(блок с информацией), label-warning(предупреждение), label-danger(опасность или сообщение о критической ошибке).
Для отображения количества непрочитанных сообщений используется класс badge.
<h2>Знак</h2>
<p>Класс .badge указывает на новые или непрочитанные элементы (автоматически отключится, когда нет никаких новых или непрочитанные элементы, с помощью CSS-х: пустой селектор):</p>
<p><a href="#">Входящие <span class="badge">17</span></a></p>
Для создания кнопок необходимо использовать класс .btn и по аналогии с метками btn-default,btn-primary и так далее. btn-lg и btn-sm позволяет управлять размером.
Протестируйте различные виды кнопок как показано на примере ниже.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class='container'>
<h1>Кнопки</h1>
<hr>
<h2>Стандарт</h2>
<p>.btn Класс добавляет базовый стиль к кнопке:</p>
<button type="button" class="btn">Стандартная</button>
<hr>
<hr>
<!-------------------------------->
<h2>Белая кнопка</h2>
<p>.btn-Класс по умолчанию указывает на кнопку по умолчанию / стандартная:</p>
<button type="button" class="btn btn-default">По умолчанию</button>
<hr>
<!-------------------------------->
<h2>Синяя кнопка</h2>
<p>.btn-Первичный класс обеспечивает дополнительный визуальный вес и идентифицирует первичное действие в наборе кнопок:</p>
<button type="button" class="btn btn-primary">Первичная</button>
<hr>
<!-------------------------------->
<h2>Зеленая кнопка</h2>
<p>Класс .btn-success указывает на успешное или положительное действие:</p>
<button type="button" class="btn btn-success">Кннопка</button>
<hr>
<!-------------------------------->
<h2>Голубая кнопка</h2>
<p>.btn-info Класс указывает на кнопку для информационных сообщений оповещения: </p>
<button type="button" class="btn btn-info">Инфо</button>
<hr>
<!-------------------------------->
<h2>Оранжевая кнопка кнопка</h2>
<p>Класс .btn-warning указывает, следует соблюдать осторожность с этим действием:</p>
<button type="button" class="btn btn-warning">Предупреждение</button>
<hr>
<!-------------------------------->
<h2>Красная кнопка</h2>
<p>.btn-danger Класс указывает на опасные или потенциально негативное действие:</p>
<button type="button" class="btn btn-danger">Внимение!</button>
<hr>
<!-------------------------------->
<h2>Сылка кнопка</h2>
<p>Класс .btn-Link делает кнопку выглядещей как ссылка (все равно будет иметь поведение кнопки):</p>
<button type="button" class="btn btn-link">Ссылка</button>
<hr>
<!-------------------------------->
<h2>Большие кнопки</h2>
<p>.btn-lg делает большие кнопки:</p>
<button type="button" class="btn btn-default btn-lg">Large Default Button</button>
<button type="button" class="btn btn-info btn-lg">Большая кнопка Инфо</button>
<hr>
<!-------------------------------->
<h2>Небольшие кнопки</h2>
<p>Класс .btn-sm делает небольшие кнопки:</p>
<button type="button" class="btn btn-default btn-sm">Small Default Button</button>
<button type="button" class="btn btn-info btn-sm">Маленькая кнопка Инфо</button>
<hr>
<!-------------------------------->
<h2>Маленькие кнопки</h2>
<p>Класс .btn-xs делает дополнительные маленькие кнопки:</p>
<button type="button" class="btn btn-default btn-xs">Маленькая кнопка по умолчанию</button>
<button type="button" class="btn btn-info btn-xs">Extra small Info Button</button>
<hr>
<!-------------------------------->
<h2>Кнопка на всю ширину родительского элемента</h2>
<p>класс .btn-block делает кнопку на уровне блоков (охватывает всю ширину родительского элемента):</p>
<button type="button" class="btn btn-info btn-block">Кнопка на всю ширину</button>
<hr>
<!-------------------------------->
<h2>Активная кнопка</h2>
<p>Класс .active делает кнопку выглядещей как нажата:</p>
<button type="button" class="btn btn-default">Кнопка по умолчанию</button>
<button type="button" class="btn btn-default active">Активная кнопка по умолчанию</button>
<br><br>
<button type="button" class="btn btn-info">Инфо</button>
<button type="button" class="btn btn-info active">Активная кнопка Инфо</button>
<hr>
<!-------------------------------->
<h2>Отключенная кнопка</h2>
<p> .disabled атрибут делает кнопку отключенной:</p>
<button type="button" class="btn btn-default" disabled="disabled">Отключенная кнопка по умолчанию</button>
<br><br>
<p>класс .disabled делает кнопку ссылки отключенной:</p>
<a href="#" class="btn btn-info disabled" role="button">Отключенная ссылка Инфо</a>
<hr>
<!-------------------------------->
</div>
</body>
</html>
Мы уже изучали элементы для создания формы в курсе по изучению HTML5. Теперь давайте научимся создавать красивые формы с использованием Bootstrap.
Для создания базовой формы нам необходим делить элементы по группам. Для этого мы используем класс form-group. В блок с таким классом поместим метку и элемент ввода с классом form-control. Посмотрите какая отличная форма получилась.
<h2>Вертикальная (базовая) Форма</h2>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Введите email">
</div>
<div class="form-group">
<label for="pwd">Пароль:</label>
<input type="password" class="form-control" id="pwd" placeholder="Введите пароль">
</div>
<div class="checkbox">
<label><input type="checkbox">Запомнить меня</label>
</div>
<button type="submit" class="btn btn-default">Отправить</button>
</form>
Иногда бывает необходимо создать форму элементы ввода в которой расположены в одну линию. В этом нам поможет класс form-inline.
<h2>Форма в одну линию</h2>
<p>Сделайте окно просмотра больше, чем 768px шириной, чтобы увидеть, что все элементы формы, являются инлайн, выравнивание по левому краю, а метки рядом.</p>
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Введите emai">
</div>
<div class="form-group">
<label for="pwd">Пароль:</label>
<input type="password" class="form-control" id="pwd" placeholder="Введите пароль">
</div>
<div class="checkbox">
<label><input type="checkbox"> Запомнить меня</label>
</div>
<button type="submit" class="btn btn-default">Отправить</button>
</form>
Для создания горизонтальной формы используем класс form-horizontal
Горизонтальная форма отличается от базовой тем, что описание элемента и сам элемент ввода расположены в одной строке.
<h2>Горизонтальня форма</h2>
<form class="form-horizontal">
<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="Введите email">
</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="Введите пароль">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Запомнить меня</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Отправить</button>
</div>
</div>
</form>
Практическое задание
Сверстайте страницу для своего сайта визитки с использованием изученного материала.
- Создайте хлебные крошки под основным меню.
- Добавьте на сайт карту. Как добавить карту мы изучали в HTML5.
- Создайте форму обратной связи.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>сайт сервис</title>
<!-- Bootstrap Ядро CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Содердание страницы -->
<div class="container">
<!-- заголовок страницы и хлебные крошки -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Контакты
<small>Студия веб-Дизайна</small>
</h1>
<ol class="breadcrumb">
<li><a href="index.html">Главная</a>
</li>
<li class="active">Контакты</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- контент Row -->
<div class="row">
<!-- колонка под карту -->
<div class="col-md-8">
<!-- гугл карта -->
<iframe width="100%" height="400px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2574.38192642293!2d73.09968791549534!3d49.81648654072176!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x424346e15e59ab85%3A0x3253473e8c3856f!2z0LHRg9C70YzQstCw0YAg0JzQuNGA0LAgMzcsINCa0LDRgNCw0LPQsNC90LTQsCAxMDAwMDA!5e0!3m2!1sru!2skz!4v1476694644178"></iframe>
</div>
<!-- колонка контакты -->
<div class="col-md-4">
<h3>Контакты</h3>
<p>
бульвар Мира 37<br>бульвар Мира 37, Караганда 100000<br>
</p>
<p><i class="fa fa-phone"></i>
<abbr title="Phone">Т</abbr>: (777) 777-7777</p>
<p><i class="fa fa-envelope-o"></i>
<abbr title="Email">E</abbr>: <a href="mailto:name@example.com">name@example.com</a>
</p>
<p><i class="fa fa-clock-o"></i>
<abbr title="Hours">Г</abbr>: Понедельник -Пятница : 10:00 до 18:00</p>
<ul class="list-unstyled list-inline list-social-icons">
<li>
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-linkedin-square fa-2x"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter-square fa-2x"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-google-plus-square fa-2x"></i></a>
</li>
</ul>
</div>
</div>
<!-- /.row -->
<!-- Контактная форма -->
<div class="row">
<div class="col-md-8">
<h3>Отправить сообщение</h3>
<form name="sentMessage" id="contactForm" novalidate>
<div class="control-group form-group">
<div class="controls">
<label>Ваше имя:</label>
<input type="text" class="form-control" id="name" required data-validation-required-message="Пожайлуйста введите имя">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Номер телефона:</label>
<input type="tel" class="form-control" id="phone" required data-validation-required-message="Пожалуйста введите номер телефона">
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Email:</label>
<input type="email" class="form-control" id="email" required data-validation-required-message="Пожалуйста введите адресс.">
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Сообщение:</label>
<textarea rows="10" cols="100" class="form-control" id="message" required data-validation-required-message="Пожалуйста введите ваш вопрос" maxlength="999" style="resize:none"></textarea>
</div>
</div>
<div id="success"></div>
<!-- For success/fail messages -->
<button type="submit" class="btn btn-primary">Отправить сообщение</button>
</form>
</div>
</div>
<!-- /.row -->
<hr>
</body>
</html>
Создайте сайт по образцу.
