Новые термины которые мы будем использовать на уроке:
Сайт—визитка (англ. business card website) — небольшой сайт, как правило, состоящий из одной (или нескольких) веб-страницы и содержащий основную информацию об организации, частном лице, компании, товарах или услугах, прайс-листы, новости и контактные данные.
Для верстки сайта мы будем использовать навыки полученные на предыдущих уроках и изучим как создавать панели и управлять цветом фона и цветом текста.
Панель (Panel): Контейнер с бордюром в котором находится различная информация.
Панели с Контекстными классами — Это панель к которым применены классы изменяющие внешний вид в зависимости от ситуации. Возможные варианты классов представлены на рисунке ниже.
Tabs and Pills — Таблетки и вкладки. — Это варианты размещения содержимого в горизонтальных и вертикальных блоках. Используется для создания горизонтального и вертикального меню.
Переключаемые динамические вкладки (Toggleable / Dinamic tabs) — Меню, в котором при выборе меню появляется дополнительная вкладка.
Описание новых классов которые мы будем использовать.
Создание простых панелей.
Для создания простой панели нам необходимо использовать контейнер панели с классом .panel и класс простая панель .panel-default. Для тела панели внутрь контейнера с панелью помещается еще один контейнер с классом .panel-body
Полный код панели.
<div class="panel panel-default"> <div class="panel-body">Простая панель</div> </div>
Так же мы можем создать панель с заголовком или футером или группу панелей. Поэксперементируйте с различными панелями используя код ниже.
<h2>Панель с заголовком</h2>
<div class="panel panel-default">
<div class="panel-heading">Заголовок панели</div>
<div class="panel-body">Содержание панели</div>
</div>
</hr>
<h2>Панель с футером</h2>
<div class="panel panel-default">
<div class="panel-body">Содержание панели</div>
<div class="panel-footer">Футер панели</div>
</div>
</hr>
<h2>Группа панелей</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">Содержание панели</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Содержание панели</div>
</div>
</div>
Попробуйте создать файл с панелями как на рисунке ниже.
Панели с контекстными классами.
Для создания контекстных панелей мы нам необходим в примере выше заменить класс panel-default
на один из перечисленных ниже.
panel-primary — основная панель. Отображается панель темно синего цвета.
panel-success — Информационная панель об успешном завершении какого-то процесса. Темно зеленый текст на бледно зеленом фоне.
panel-info — Информационная панель
panel-warning — Панель предупреждение
panel-danger — Панель сообщающая об опасности
Создайте страницу и отобразите на ней все описанные выше контекстные панели.
Меню, вкладки и таблетки.
Создание меню мы уже проходили. Повторим этот материал. Класс list-inline и active для обозначения активного пункта меню.
<h2>Меню</h2>
<ul class="list-inline">
<li><a href="#" class='active'>Главная</a></li>
<li><a href="#">Меню 1</a></li>
<li><a href="#">Меню 2</a></li>
<li><a href="#">Меню 3</a></li>
</ul>
Еще одной опцией по улучшению отображения содержимого сайта является размещение его во вкладках. Для создания вкладок мы будем использовать класс nav-tabs
<h2>Вкладки</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Повторим еще раз как создавать выпадающее меню и применим это ко вкладкам.
<h2>Вкладки с выпадающим мееню</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Главная</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Меню 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Подменю 1-1</a></li>
<li><a href="#">Подменю 1-2</a></li>
<li><a href="#">Подменю 1-3</a></li>
</ul>
</li>
<li><a href="#">Меню 2</a></li>
<li><a href="#">Меню 3</a></li>
</ul>
Теперь давайте создадим меню в виде таблеток. Оно создается с помощью класса nav-pills.
<h2>Таблетки</h2>
<ul class="nav nav-pills">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">Меню 1</a></li>
<li><a href="#">Меню 2</a></li>
<li><a href="#">Меню 3</a></li>
</ul>
Для создания вертикального меню нам необходимо использовать класс nav-stacked.
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">Меню 1</a></li>
<li><a href="#">Меню 2</a></li>
<li><a href="#">Меню 3</a></li>
</ul>
Выравнивание меню по ширине.
Для выравнивания меню вам необходимо применить класс nav-justified как показано в примере ниже.
<h2>Выравниваем таблетки по ширине</h2>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">Меню 1</a></li>
<li><a href="#">Меню 2</a></li>
<li><a href="#">Меню 3</a></li>
</ul>
Теперь наше меню занимает всю ширину контейнера.
Создание динамически переключаемых вкладок.
Важно: для использования динамически переключаемых вкладок вам нужно подключить файлы скриптов.
<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>
Как и в меню для переключения вкладок нам необходим задать контейнерам вкладок различные уникальные идентификаторы id и в ссылках меню задать атрибут data-toggle=»pill» и атрибут href=»#menu21″ который будет указывать на якорь контейнера который нужно отобразить в переключаемой вкладке.
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home1">Главная</a></li>
<li><a data-toggle="pill" href="#menu11">Меню 1</a></li>
<li><a data-toggle="pill" href="#menu21">Меню 2</a></li>
</ul>
<div class="tab-content">
<div id="home1" class="tab-pane fade in active">
<h3>Главная</h3>
<p>Содержание главной.</p>
</div>
<div id="menu11" class="tab-pane fade">
<h3>Меню 1</h3>
<p>Содержание меню 1.</p>
</div>
<div id="menu21" class="tab-pane fade">
<h3>Меню 2</h3>
<p>Содержание меню 2.</p>
</div>
Попробуйте самостоятельно создать динамически переключаемые вкладки.
Разница лишь в том что мы будем использовать классы для вкладок и установим атрибут data-toggle=»tab»
<h2>Переключаемые / Динамические вкладки</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Главная</a></li>
<li><a data-toggle="tab" href="#menu1">Меню 1</a></li>
<li><a data-toggle="tab" href="#menu2">Меню 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>Главная</h3>
<p>Содержание главной.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Меню 1</h3>
<p>Содержание меню 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Меню 2</h3>
<p>Содержание меню 2.</p>
</div>
</div>
Создайте вкладки как показано на рисунке и заполните из содержимым. Протестируйте вкладки что они переключаются.
Задание для самостоятельной работы.
- Создайте слайдер для сайта визитки.
2. Создайте 4 панели в заголовках которых разместите иконки.
3. Опишите услуги с использованием вкладок.
Дополнительное задание. Добавьте на сайт меню.
Полный код для сайта.
<!DOCTYPE html>
<html lang="ru">
<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>
</div>
</div>
<!-- /.row -->
<!-- Изображение заголовка -->
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="slider-01.jpg" alt="">
</div>
</div>
<!-- /.row -->
<!-- Сервисные панели -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Услуги</h2>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-picture-o fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Веб-дизайн</h4>
<p>Для каждого клиента мы разрабатываем индивидуальный дизайн сайта.</p>
<a href="#" class="btn btn-primary">Читать далее</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-cog fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Разработка сайта</h4>
<p>Pазработать для вас современный сайт, который передаст основные ценности и принципы компании.</p>
<a href="#" class="btn btn-primary">Читать далее</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-vk fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>SMM</h4>
<p>Эффективный инструмент для привлечения клиентов, продаж и увеличения прибыли.</p>
<a href="#" class="btn btn-primary">Читать далее</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-linux fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Графический дизайн</h4>
<p>Дизайн логотипа, фирменного стиля любой сложности в короткие сроки</p>
<a href="#" class="btn btn-primary">Читать далее</a>
</div>
</div>
</div>
</div>
<!-- Сервисные вкладки -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Коротко об услугах</h2>
</div>
<div class="col-lg-12">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active"><a href="#service-one" data-toggle="tab"><i class="fa fa-picture-o"></i>Веб-дизайн</a>
</li>
<li class=""><a href="#service-two" data-toggle="tab"><i class="fa fa-cog"></i>Разработка сайта</a>
</li>
<li class=""><a href="#service-three" data-toggle="tab"><i class="fa fa-vk"></i>SMM</a>
</li>
<li class=""><a href="#service-four" data-toggle="tab"><i class="fa fa-linux"></i>Графический дизайн</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="service-one">
<h4>Веб-дизайн</h4>
<p>Богатый практический опыт каждого сотрудника позволяет комбинировать различные стили дизайна и получать самые подходящие сочетания для клиента, подчёркивающие его индивидуальность. </p>
</div>
<div id="service-two" class="tab-pane fade">
<h4>Разработка сайта</h4>
<p>Мы не используем в работе готовых шаблонов, а создаём сайты с нуля и «под ключ». Тестируем и проверяем каждый элемент, прежде чем залить готовый сайт на хостинг.</p>
<p>Мы на 100% уверены в результате, поскольку за всё время работы ни один клиент не сообщил, что его сайт не работает или не приводит клиентов. </p>
</div>
<div class="tab-pane fade" id="service-three">
<h4>SMM</h4>
<p>SMM — один из наиболее эффективных инструментов для привлечения клиентов, продаж и увеличения прибыли.Это отличный способ рассказать нескольким миллионам пользователей о своих товарах, услугах и укрепить имидж. Важное достоинство SMM — возможность общения с конкретными представителями целевой аудитории, которых интересует предлагаемый продукт. </p>
</div>
<div class="tab-pane fade" id="service-four">
<h4>Графический дизайн</h4>
<p>СОЗДАДИМ ЛОГОТИП, КОТОРЫЙ ЗАПОМНИТСЯ ВАШИМ КЛИЕНТАМКак сделать так, чтобы клиенты о вас помнили и хотели покупать только у вас? Получите презентацию с портфолио и ценами</p>
</div>
</div>
</div>
</div>
<!-- Список услуг -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Список услуг</h2>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-tree fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Разработрка сайтов</h4>
<p>Мы не используем в работе готовых шаблонов, а создаём сайты с нуля и «под ключ».</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-car fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Разработрка сайтов</h4>
<p>Мы не используем в работе готовых шаблонов, а создаём сайты с нуля и «под ключ».</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-support fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Разработрка сайтов</h4>
<p>Мы не используем в работе готовых шаблонов, а создаём сайты с нуля и «под ключ».</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Разработрка сайтов</h4>
<p>Мы не используем в работе готовых шаблонов, а создаём сайты с нуля и «под ключ».</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-bomb fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Разработрка сайтов</h4>
<p>Мы не используем в работе готовых шаблонов, а создаём сайты с нуля и «под ключ».</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-bank fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Разработрка сайтов</h4>
<p>Мы не используем в работе готовых шаблонов, а создаём сайты с нуля и «под ключ».</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-paper-plane fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Разработрка сайтов</h4>
<p>Мы не используем в работе готовых шаблонов, а создаём сайты с нуля и «под ключ».</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-space-shuttle fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Разработрка сайтов</h4>
<p>Мы не используем в работе готовых шаблонов, а создаём сайты с нуля и «под ключ».</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-recycle fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Разработрка сайтов</h4>
<p>Мы не используем в работе готовых шаблонов, а создаём сайты с нуля и «под ключ».</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>