Тема урока

На последних двух уроках по Bootstrap мы разберем полный цикл создания сайта. Мы будем создавать информационный портал о героях комиксов.

Полный цикл создания сайта включает в себя:

• Предпроектные исследования
• Составление проекта сайта
• Реализация проекта
• Отладка и тестирование
• Завершение и защита проекта

Давайте разберем, что же включает в себя каждый этап цикла создания сайта.

Предпроектные исследования.

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

• Какие фирмы конкурируют в данной области? (Кто кроме Марвел создает комиксы?) Сделайте обзор используя Гугл. Введя в поисковой строке запрос вы увидите что существуют два крупных игрока на рынке создающем комиксы — DC и Марвел. Сделайте обзор героев используя материалы из поисковых систем.
  
  Задание 1. Разделитесь на две команды
• Какую информацию желательно иметь на сайте.
  Задание 2. Составить список супергероев, комиксов и фильмов с их участием. 
• Каковы цели и задачи, стоящие перед сайтом. Обсудить с классом цели сайта.
  Цели сайта
  1. Создать портал с полезной информацией про миры Марвел и их героев.
  2. Собрать на сайте фанатов комиксов и дать им возможность делиться полезной информацией с сайта в социальных сетях на своих страничках.

После того, как мы выполнили предпроектные исследования. Мы составляем отчет, который ложится в основу следующего этапа — составления проекта сайта.

 

Составление проекта сайта

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

Проект содержит разделы:

• Цели создания сайта. (Были разработаны в предпроектном исследовании)
• Концепция сайта. (Были разработаны в предпроектном исследовании)
• Характеристики аудитории сайта. (Были разработаны в предпроектном исследовании)
• Структура сайта
• Описание титульной страницы и второстепенных страниц.
• Требования к дизайну и навигации

После создания проекта он подлежит обсуждению и корректировке совместно с заказчиком, после чего проект превращается в техническое задание.

Задание 3. Разработать структуру сайта описание основных страниц. Создать описание титульной страницы и требования к навигации.

Пример:

Структура сайта и описание основных страниц.

1. Титульная страница будет содержать анонсы всех страниц сайта. (Новости, Фильмы, Герои, Блог)
2. Новостная лента будет содержать последние новости о новых комиксах и фильмах и событиях Марвел.
3. Раздел «Фильмы» будет содержать информацию о ваших любимых фильмах по сюжетам комиксов.
4. Раздел «Герои» будет содержать в себе описание популярных и известных героев Марвел.
5. В разделе блог мы заложим верстку блога который запрограммируем позже когда будем изучать язык PHP.

Требования к дизайну и навигации.

1. Основные цвета сайта красный белый и черный.
2. Навигация сайта содержит в себе основные страницы и выпадающие меню которые содержат самые популярные фильмы, новости и популярных героев.
3. Главная страница содержит:
   меню и баннер под ним
   
   Анонсы второстепенных страниц сайта
   
   Ссылки на страницы самых популярных героев.
   
   Последний анонс фильма
   

Реализация проекта

В базовом варианте разработкой сайта занимаются от трех до семи человек, среди которых менеджер проекта, дизайнеры, программисты, верстальщики, контент-менеджеры и др. В процессе разработки сайта в общем случае необходимо:

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

Приступим к реализации проекта. 

Код главного меню и баннера.

Результат:

Код анонсов страниц:

Результат:

Код секции герои и персонажи:

Результат:

Код анонс фильма и футер:

 

Результат:

Созданием второстепенных страниц мы займемся на следующем занятии.

Тема урока.

На сегодняшнем уроке мы будем изучать новые стили для оформления фотографий и ленты сообщений.  Эти элементы применяются почти в любых типах сайтов для отображения дерева комментариев.

Материал урока 6urok

Обзор новых терминов.

Лента сообщений(комментариев) — список сообщений упорядоченных по дате. Лента сообщений используется для вывода обсуждений информации размещенной на сайте.

Древовидные комментарии — Комментарии или сообщения сгруппированные в виде дерева на сайте по категориям  для удобного просмотра.

Аватар. С популяризацией Интернета и социальных сетей стало очень распространенным понятие аватара. Что же это такое? Ава, юзерпик – это графическое изображение пользователя или его игрового персонажа. Он используется в социальных сетях, чатах, блогах, порталах и может быть двухмерной картинкой (иконкой) или быть трёхмерной моделью. Последний вариант чаще всего встречается в многопользовательских онлайновых играх.

Медиа объекты — объекты содержащие изображения, видео или аудио информацию называются медийными.

Медиа-компонент — это абстрактный элемент, который является основой для построения на сайте сложных блоков, состоящих из комментариев, сообщений и т.п. Один комментарий или одно сообщение в этом сложном блоке — это один медиа-компонент. Следовательно, один сложный блок может состоять из большого количества повторяющихся медиа-компонентов.

Медиа-компонент состоит из медиа-объекта (изображения, видео или аудио) и блока с текстовым содержимым.

Термины для повторения:

Адаптивный веб-дизайн (англ. Adaptive Web Design) — дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету и автоматически подстраивающийся под заданные размеры окна браузера.

Обзор новых классов Bootstrap.

Закругленные углы в Картинках.

.img-rounded класс добавляет закругленные углы к изображению (не доступен в IE8):

Пример кода. Попробуйте отобразить несколько картинок с закругленными краями.

<h1>Картинки</h1>
    
    <h2>Закругленные углы</h2>
    <p> .img-rounded класс добавляет закругленные углы к изображению (не доступен в IE8):</p>
    <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
    
    <hr>

Круглые картинки. Используются для отображения аватарок в социальных сетях и профилях пользователей.

 .img-circle класс формирует изображение в круг (не доступен в IE8):

<h2>Круглые</h2>
      <p>.img-circle класс формирует изображение в круг (не доступен в IE8):</p>
      <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
      
      <hr>

.img-thumbnail класс создает эскиз изображения. При использовании данного класса изображение помещается в рамочку:

<h2>Эскиз</h2>
      <p>.img-thumbnail класс создает эскиз изображения:</p>
      <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
      
      <hr>

 .img-responsive класс делает масштабирует изображение внутрь родительского элемента (изменить размер окна браузера, чтобы увидеть эффект):

<h2>Картинка</h2>
    <p>.img-responsive класс делает масштабирует изображение внутрь родительского элемента (изменить размер окна браузера, чтобы увидеть эффект):</p>
    <img class="img-responsive" src="cinqueterre.jpg" alt="Chania" width="460" height="345">
    
    <hr>

Медиа объекты

Bootsrap предлагает простые решения для выравнивания медиа объектов таких как изображения или видео.

Настраивать расположение медиа-объекта относительно блока с текстовым содержимым можно в двух направлениях: горизонтальном и вертикальном.

Рассмотрим варианты применения медиа объектов.

Обзор новых классов.

media — Контейнер для размещения медиа объектов.

media-left — класс служит для для выравнивания влево мультимедийного объекта. Текст, который должен появиться рядом с изображением, помещается внутри контейнера с классом class=»media-body«.

media-right — класс служит для для выравнивания вправо мультимедийного объекта

В горизонтальном направлении медиа-объект (изображение, видео или аудио) относительно контента можно расположить слева (.media-left) или справа (.media-right).

Например, создать медиа-компонент, в котором меди-объект (изображение) располагается относительно блока с содержимым слева:

Пример кода.

<div class="media">
      <div class="media-left">
        <img src="img_avatar1.png" class="media-object" style="width:60px">
      </div>
      <div class="media-body">
        <h4 class="media-heading">Выравнивание слева</h4>
        <p>Здесь текст, отзыв или комментарий</p>
      </div>
    </div>

Задание. По образцу создайте медиа объект с правым выравниванием.

В вертикальном направлении медиа-объект (изображение, видео или аудио) можно выровнять:

• по верхнему краю (.media-top — по умолчанию) блока, содержащего контент.
• по середине (.media-middle) блока, содержащего контент.
• по нижнему краю (.middle-bottom) блока, содержащего контент.

Например, в медиа-компоненте расположить медиа-объект (изображение) в вертикальном направлении по верхнему краю блока с текстовым содержимым:

<div class="media">
        <div class="media-left media-top">
          <img src="img_avatar1.png" class="media-object" style="width:80px">
        </div>
        <div class="media-body">
          <h4 class="media-heading">Media Top</h4>
          <p>Здесь текст, отзыв или комментарий</p>
          <p>Здесь текст, отзыв или комментарий</p>
          <p>Здесь текст, отзыв или комментарий</p>
        </div>
      </div>

Задание: создайте остальные варианты верстки с использованием «media-middle» или «media-bottom«.

Протестируйте результат.

Древовидные медиа объекты.

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

Попробуйте вложить один медиа объект в другой. Посмотрите что получится.

Важно. Ставьте  комментарии разделяющие уровни вложенности контента.

<div class="media">
      <div class="media-left">
        <img src="img_avatar1.png" class="media-object" style="width:45px">
      </div>
      <div class="media-body">
        <h4 class="media-heading">Имя пользователя1 <small><i>Запись от Октябрь 20, 2016</i></small></h4>
        <p>Здесь текст, отзыв или комментарий</p>
    
        <!-- Первый уровень вложенности-->
        <div class="media">
          <div class="media-left">
            <img src="img_avatar2.png" class="media-object" style="width:45px">
          </div>
          <div class="media-body">
            <h4 class="media-heading">Имя пользователя 2 <small><i>Запись от Октябрь 20, 2016</i></small></h4>
            <p>Ответил пользователю 1, Здесь текст, отзыв или комментарий</p>

            <!-- Второй уровень вложенности -->
            <div class="media">
              <div class="media-left">
                <img src="img_avatar3.png" class="media-object" style="width:45px">
              </div>
              <div class="media-body">
                <h4 class="media-heading">Имя пользователя 3 <small><i>Запись от Октябрь 20, 2016</i></small></h4>
                <p>Ответил пользователю 2, Здесь текст, отзыв или комментарий</p>
              </div>
            </div>
        
          </div>
        </div>
    
      </div>
    </div>

Протестируйте полученный вариант.

Задание: Сделайте вложенные комментарии как на примере ниже.

Самостоятельная работа.

С использованием изученного материала создайте профиль социальной сети.

Код профиля:

<div class="col-sm-3 well">
    <div class="well">
      <p><a href="#">Мой профиль</a></p>
      <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
    </div>
    <div class="well">
      <p><a href="#">Интересы</a></p>
      <p>
        <span class="label label-default">Новости</span>
        <span class="label label-success">Метки</span>
        <span class="label label-info">Футбол</span>
        <span class="label label-warning">Игры</span>
        <span class="label label-danger">Друзья</span>
      </p>
    </div>
    <div class="alert alert-success fade in">
      <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
      <p><strong>Ey!</strong></p>
      Люди смотрят на свой профиль. Узнайте, кто.
    </div>
    <p><a href="#">Ссылка</a></p>
    <p><a href="#">Ссылка</a></p>
    <p><a href="#">Ссылка</a></p>
  </div>

Результат.

Дополнительное задание.

1. Создайте контейнер и три колонки (col-sm) 3-7-2
2. Добавьте левую колонку с профилем которую сделали выше.
3. Создайте центральную колонку.

<div class="col-sm-7">
    
        <div class="row">
          <div class="col-sm-12">
            <div class="panel panel-default text-left">
              <div class="panel-body">
                <p contenteditable="true">Статус: Онлайн</p>
                <button type="button" class="btn btn-default btn-sm">
                  <span class="glyphicon glyphicon-thumbs-up"></span> Нравится
                </button>
              </div>
            </div>
          </div>
        </div>
      
        <div class="row">
          <div class="col-sm-3">
            <div class="well">
              <p>Имя</p>
              <img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
            </div>
          </div>
          <div class="col-sm-9">
            <div class="well">
              <p>Здесь текст, отзыв или комментарий</p>
            </div>
          </div>
        </div>
      
        <div class="row">
          <div class="col-sm-3">
            <div class="well">
              <p>Имя</p>
              <img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
            </div>
          </div>
          <div class="col-sm-9">
            <div class="well">
              <p>Здесь текст, отзыв или комментарий</p>
            </div>
          </div>
        </div>
     
        <div class="row">
          <div class="col-sm-3">
            <div class="well">
              <p>Имя</p>
              <img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
            </div>
          </div>
          <div class="col-sm-9">
            <div class="well">
              <p>Здесь текст, отзыв или комментарий</p>
            </div>
          </div>
        </div>
      
        <div class="row">
          <div class="col-sm-3">
            <div class="well">
              <p>Имя</p>
              <img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
            </div>
          </div>
          <div class="col-sm-9">
            <div class="well">
              <p>Здесь текст, отзыв или комментарий</p>
            </div>
          </div>
        </div>
      </div>

Результат:

4. Создайте третью колонку.

<div class="col-sm-2 well">
  <div class="thumbnail">
    <p>Предстоящие События:</p>
    <img src="paris.jpg" alt="Paris" width="400" height="300">
    <p><strong>Париж</strong></p>
    <p>Четверг 20 Октября 2016</p>
    <button class="btn btn-primary">Подробнее</button>
  </div>
  <div class="well">
    <p>ADS</p>
  </div>
  <div class="well">
    <p>ADS</p>
  </div>
</div>

Результат:

Протестируйте полный сайт.

Тема урока.

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

Обзор новых терминов.

Форма обратной связи — это форма которая позволяет посетителю сайта отправить заявку на услугу или обратный звонок.

Обратный звонок — услуга на сайте позволяющая заказать звонок от поставщика услуг на свой телефон в удобное время. Данная услуга на сайте увеличивает количество заказов услуги с сайта. Повышает конверсии.

Конверсия  в интернет-маркетинге — это отношение числа посетителей сайта, выполнивших на нём какие-либо целевые действия к общему посетителю сайта. К примеру если одни посетитель из 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>

Практическое задание

Сверстайте страницу для своего сайта визитки с использованием изученного материала.

1. Создайте хлебные крошки под основным меню.
2. Добавьте на сайт карту. Как добавить карту мы изучали в HTML5.
3. Создайте форму обратной связи.

<!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>

Создайте сайт по образцу.

 

 

 

Новые термины которые мы будем использовать на уроке:

Сайт—визитка (англ. 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>

Создайте вкладки как показано на рисунке и заполните из содержимым. Протестируйте вкладки что они переключаются.

Задание для самостоятельной работы.

1. Создайте слайдер для сайта визитки.

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>

 

 

Теоретическая часть. Новые термины.

Давайте разберем термины которые мы будем использовать на уроке.

• Слайдер картинок (Image slider). В мире веб дизайна слайдер картинок используется для организации слайд шоу или прокрутки картинок на вашей странице. Для создания слайдера используются плагины или подключаемые модули.
• Параллакс скроллинг (parallax scrolling) — это тренд в разработке сайтов где фоновые рисунки и содержание сайта движутся с различной скоростью.
• Модуль сайта. Модулем сайта называется один экран с полезной информацией. При прокручивании мы будем прокручивать модули. Посадочная страница обычно состоит из  4-8 модулей.
• Jumbotron (Джумботрон). Немножко истории изначально этот термин обозначал огромные телевизоры которые размещались в городах для привлечения внимания и размещения различной полезной информации. Эти телевизоры были разработаны в компании Sony. В Bootstrap это означает большой модуль для привлечения внимания.
  Как вы видите на рисунке, Jumbotron это класс который создает блок с крупным текстом с серым фоном. Особенностью Jumbotron класса является его способность масштабировать размеры шрифта при изменении устройства. Для мобильных устройств размер шрифта будет куда меньше чем для компьютеров.
• В Bootstrap классы которые мы создаем для расширения функционала называются helper — помощник.Классы помощники нужны для создания решений которые не существуют в стандартном функционале фреймоврка. Поэксперементируйте с применением jumbotron класса. Его можно размещать как внутри контейнера так и снаружи.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=«utf-8»>
  5. <meta name=«viewport» content=«width=device-width, initial-scale=1»>
  6. <link href=«css/bootstrap.min.css» rel=«stylesheet»>
  7. <script src=«js/jquery.min.js»></script>
  8. <script src=«js/bootstrap.min.js»></script>
  9. </head>
  11. <body>
  12. <div class=«container»>
  13. <div class=«jumbotron»>
  14. <h1>Модуль привлекающий внимание</h1>
  15. <p>текст текст текст текст текст текст текст текст текст текст текст текст текст .</p>
  16. </div>
  17. <p>This is some text.</p>
  18. <p>This is another text.</p>
  19. </div>
  21. <div class=«jumbotron»>
  22. <h1>Модуль привлекающий внимание</h1>
  23. <p>текст текст текст текст текст текст текст текст текст текст текст текст текст .</p>
  24. </div>
  25. <div class=«container»>
  26. <p>текст текст текст текст текст текст текст текст текст текст текст текст текст .</p>
  27. <p>текст текст текст текст текст текст текст текст текст текст текст текст текст .</p>
  28. </div>
  29. </body>
  30. </html>

   

• Стандартные классы для выравнивания текста. В Bootstrap используются классы для выравнивания текста
  1. text-left — выравнивание слева
  1. text-center — выравнивание по центру
  1. text-right — выравнивание по правому краю
  1. text-justify — выравнивание по ширине
  1. text-nowrap — этот класс отменяет перенос строк.

  Поэксперементируйте с применением данных классов как показано в примере ниже .

  1. <body>
  2. <HR>
  3. <p class=«text-left»>Текст с левым выравниванием.</p>
  4. <HR>
  5. <p class=«text-center»>Выравнивание по центру.</p>
  6. <HR>
  7. <p class=«text-right»>Выравнивание по правой стороне.</p>
  8. <HR>
  9. <p class=«text-justify»>Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. </p>
  10. <HR>
  11. <p class=«text-nowrap»>Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. </p>
  12. <HR>
  13. </body>
• Классы для управления регистром букв.
  1. text-lowercase — все буквы в нижний регистр
  1. text-uppercase — все буквы в верхний регистр
  1. text-capitalize — первые буквы слов в верхних регистр

  Поэксперементируйте с управлением регистром букв.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=«utf-8»>
  5. <meta name=«viewport» content=«width=device-width, initial-scale=1»>
  6. <link href=«css/bootstrap.min.css» rel=«stylesheet»>
  7. <script src=«js/jquery.min.js»></script>
  8. <script src=«js/bootstrap.min.js»></script>
  9. </head>
  11. <body>
  13. <h1>text-lowercase Indicates lowercased text: lowercased text</h1>
  14. <div class=«text-lowercase»>
  15. text-lowercase Indicates lowercased text: lowercased text
  16. </div>
  17. <hr>
  18. <h1>text-uppercase Indicates uppercased text: UPPERCASED TEXT</h1>
  19. <div class=«text-uppercase»>
  20. text-uppercase Indicates uppercased text: UPPERCASED TEXT
  21. </div>
  22. </hr>
  23. <h1>text-capitalize Indicates capitalized text: Capitalized Text</h1>
  24. <div class=«text-capitalize»>
  25. text-capitalize Indicates capitalized text: Capitalized Text
  26. </div>
  27. </body>
  28. </html>
•  Вспомним форматирование текста в HTML5  с использованием тегов.
  1. <h1>Повторим теги разметки текста на странице с использованием HTML5</h1>
  2. <p>Для подсветки текста вы можете использовать mark тег. <mark>Подсветка</mark> текста.</p>
  3. <p><del>Эта строка будет означать что текст удален из документа.</del></p>
  4. <p><s>Эта строка будет означать что текст является не точным.</s></p>
  5. <p><ins>Этот текст только что добавили в документ.</ins></p>
  6. <p><u>Подчеркнутый текст</u></p>
  7. <p><strong>Жирный текст.</strong></p>
  8. <p><em>Курсивный текст.</em></p>

  Посмотрите как отобразится этот текст.

• Создание слайдера Bootstrap.
  Важно: слайдер не поддерживается в IE9 так как он использует CSS 3 
  Слайдер состоит из трех элементов:
  — Блок с картинками помещается в контейнер с классами carousel-inner и задается атрибут role=’listbox’ для того чтобы плагин могу управлять прокруткой картинок. Сами картинки помещаются в контейнеры с классом item. Активный элемент помещается классом active.
  1. <!— Контейнер обертка для слайдов Wrapper—>
  2. <div class=«carousel-inner» role=«listbox»>
  3. <div class=«item active»>
  4. <img src=«img/1.jpg» alt=«Миньоны»>
  5. </div>
  6. <div class=«item»>
  7. <img src=«img/2.jpg» alt=«Миньоны»>
  8. </div>
  9. <div class=«item»>
  10. <img src=«img/3.jpg» alt=«Миньоны»>
  11. </div>
  12. </div>

  — Элементы управления слайдером.  Для размещения индикаторов управления слайдером мы применим список ol. К списку ol применяется carousel-indicators и для каждого элемента <li> задается атрибут data-slide-to со значением номера слайда который надо отобразить при нажатии. Обратите внимание что атрибут  data-target имеет значение #myCarousel. Это id нашего контейнера с изображениями. Таким образом осуществляется связь индикаторов и блока с картинками.

  1. <!— Индикаторы — точки снизу карусели создаются списком—>
  2. <ol class=«carousel-indicators» style=‘background:rgba(0,0,0,0.5)’>
  3. <li data-target=«#myCarousel» data-slide-to=«0» class=«active»></li>
  4. <li data-target=«#myCarousel» data-slide-to=«1»></li>
  5. <li data-target=«#myCarousel» data-slide-to=«2»></li>
  6. </ol>

  — Стрелки влево и вправо. Создадим две ссылки  с классами right/left carousel-control
  зададим атрибуты href=»#myCarousel» role=»button» data-slide=»prev» которые осуществят связь с плагином.

  1. <!— Стрелки вперед назад расположенные слева и справа карусели —>
  2. <a class=«left carousel-control» href=«#myCarousel» role=«button» data-slide=«prev»>
  3. <span class=«glyphicon glyphicon-chevron-left» aria-hidden=«true»></span>
  4. <span class=«sr-only»>Следующий</span>
  5. </a>
  6. <a class=«right carousel-control» href=«#myCarousel» role=«button» data-slide=«next»>
  7. <span class=«glyphicon glyphicon-chevron-right» aria-hidden=«true»></span>
  8. <span class=«sr-only»>Предыдущий</span>
  9. </a>

  Полный код слайдера:

  Внешний вид слайдера:

  1. Слайдер. 2. Индикаторы снизу. 3. Стрелки вперед назад.

  <div class='container'>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Индикаторы - точки снизу карусели создаются списком-->
          <ol class="carousel-indicators" style='background:rgba(0,0,0,0.5)'>
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>
          <!-- Контейнер обертка для слайдов Wrapper-->
          <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="img/1.jpg" alt="Миньоны">
          </div>
          <div class="item">
            <img src="img/2.jpg" alt="Миньоны">
          </div>
          <div class="item">
            <img src="img/3.jpg" alt="Миньоны">
          </div>
          
          </div>
          <!-- Стрелки вперед назад расположенные слева и справа карусели -->
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Следующий</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Предыдущий</span>
          </a>
        </div>
      </div>

   

Лендинг пейдж (landing page — посадочная страница) — это современный одностраничный сайт, который позволяет показать посетителю в выгодном свете товары или услуги, описание компании, сертификаты, дипломы, награды, отзывы клиентов, контакты и подтолкнуть его к покупке, не “бродя” по многостраничному сайту.

Лендинги отлично подходят для проведения рекламной кампании на конкретный товар или услугу с привлечением на сайт целевой аудитории из контекстной рекламы (Яндекс.Директ, Google AdWords), социальных сетей или E-mail рассылок.

Какие стили нужно использовать для создания меню с использованием  Bootstrap?

Как же создать самое простое меню в Bootstrap?

Алгоритм создания меню.

1. Использовать тег <NAV> для объявления меню.
2. Разместить в нем тег <DIV> к которому применить класс conatainer для отображения меню внутри контейнера. Это позволит корректно отображать меню.
3. Разместить в контейнере заголовок сайта с текстовым описанием или логотипом. Использовать класс navbar-header.
4. Использовать список <UL> и элементы списка <LI> для отображения пунктов меню.

Меню необходимо разместить в теге <nav> К которому применены стили navbar navbar-default. Эти классы зададут

<nav class=»navbar navbar-default»>

Давайте разберемся зачем нужны эти классы.

Класс navbar-default задает серый фоновый цвет и бордюр который немного темнее фона.

Класс navbar управляет отступами и задает позиционирование меню на экране. Так же минимальную высоту.

Дальнейшее содержание меню помещается в class conatainer который мы изучали на прошлом уроке.

Разместим заголовок сайта справа от меню

 

Класс navbar-header  разрешает обтекание что позволяет размещать пункты меню справа от названия сайта.

Класс navbar-brand задает цвет шрифта высоту линии и отступы.

Теперь приступим к размещению пунктов меню.

Обратите внимание для подсветки активного пункта меню используется класс active.

Полный код созданного меню.

Результат отображения меню в

Протестируйте ваше меню на мобильных устройствах. Меню при уменьшении ширины экрана сворачивается в один столбец и выглядит вполне удобным на мобильных устройствах.

Отлично. Мы научились создавать простое меню для нашего сайта.

Инвертированная цветовая схема для меню.

Если вашему сайту необходимо использовать темные цвета. То вы можете заменить класс

navbar-default

класс на

.navbar-inverse:

В результате ваше меню станет намного темнее. Теперь нам доступны две цветовые схемы для создания меню.

Фиксация меню.

Для фиксации меню в верхней части экрана существует класс .navbar-fixed-top.

По аналогии вы можете применить navbar-fixed-bottom для фиксации меню в нижней части экрана.

Применив один из этих стилей к тегу Nav мы зафиксируем меню в выбранной части экрана.

<nav class=»navbar navbar-inverse navbar-fixed-top»>

или

<nav class=»navbar navbar-inverse navbar-fixed-bottom»>

Давайте протестируем наше меню с классом navbar-fixed-bottom.

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

Создание выпадающего меню.

Давайте научимся создавать выпадающие меню.

Алгоритм создания выпадающего меню.

1. Применяем к пункту меню содержащему подпункты класс dropdown.
2. Помечаем пункт меню стрелочкой вниз чтобы дать понять пользователю, что он содержит подпункты.
3. Внутри тега <LI> выбранного пункта меню размещаем список <ul> с  подпунктами.
4. Применяем к списку подменю класс  dropdown-menu.

Итоговый код:

Обратите внимание, что мы добавили новый атрибут

Нестандартные атрибуты используются плагинами. Соответственно нам нужно подключить скрипт который содержит плагины Bootstrap. Для подключения плагина нам нужно два файла jquery.min.js и bootstrap.min.js. Вы уже знаете что min файлы это минифицированные файлы из которых убрали все лишние символы.

Алгоритм подключения плагина к сайту.

1. Создайте папку js внутри папки в которой вы работаете.
2. Откройте в коне браузера ссылку https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
3. Создайте в папке js текстовый файл jquery.min.js
4. Скопируйте содержимое браузера в этот файл и сохраните его.
5. Откройте в браузере ссылку https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
6. Создайте в папке js текстовый файл bootstrap.min.js  и создайте скопируйте в него содержимое браузера.
7. Сохраните файл.

Мы только что использовали CDN — coontent delivery network для копирования плагинов на свой сайт.

Подключение плагинов осуществляется в любом месте внутри тега <head>

Вот код для подключения плагина.

<script src=»js/jquery.min.js»></script>
<script src=»js/bootstrap.min.js»></script>

Плагины написаны с использованием javascript и jquery которые мы будем изучать позже.

Давайте проверим работает ли выпадающее меню.

Отлично у нас получилось выпадающее меню.

Протестируйте как будет отображаться меню в мобильной версии.

Меню отлично работает и в мобильной версии.

Размещаем пункты меню с правой стороны.

Обычно на сайтах с правой стороны размещаются пункты меню которые позволяют войти пользователю в личный кабинет или зарегистрироваться. Так же там может располагаться пункт меню «о нас» который содержит  контактные данные.

Давайте приступим к созданию пункта меню в правой части экрана.

Для этого нам понадобится создать отдельное меню с классом navbar-right, как показано на примере ниже.

Как вы обратили внимание мы использовали новые классы внутри тега <span>

Тек <span>с классом glyphicon позволяет добавлять стандартные иконки на наш сайт интегрированные в Bootstrap.

Для просмотра стандартных иконок вы может воспользоваться ссылкой

http://getbootstrap.com/components/

Для корректного отображения иконок, нам необходимо скачать все файлы пройдя по ссылке и

http://getbootstrap.com/getting-started/#download

Из скаченного архива вам необходимо скопировать папку fonts в ту папку где хранится ваш сайт.

Давайте проверим получилось ли у нас меню?

Отлично правое меню у нас на сайте.

Мобильная версия меню.

Последний штрих при разработке меню это добавление эффекта сворачивания в мобильной версии. По английски collapse menu.

Давайте разберем элементы которые нам необходимы для создания мобильной версии меню.

Кнопка которая будет отображаться только в мобильной версии

Эта кнопка состоит из трех полосок и для их создания мы используем

Для того чтобы управлять меню нам необходимо подключить плагин.

Navbar на компьютерах

Так выглядит navbar на компьютерах все элементы присутствуют

Navbar на мобильных устройствах

Так выглядит navbar на мобильных устройствах все элементы прячутся и появляются по нажатию на кнопку

Navbar может быть:

• Зафиксирован сверху — при прокрутке navbar всегда будет сверху
• Зафиксирован снизу — при прокрутке navbar всегда будет снизу

С теорией ознакомились теперь нам предстоит разобрать не простой код. Navbar в Bootstrap заключается в тег nav. Следующий код я буду разбивать на части и постараюсь объяснить для чего нужен тот или иной фрагмент кода.

<nav class="navbar navbar-default navbar-fixed-top"><!--navbar-inverse-->
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span> 
     </button>
    <div class="navbar-brand"><a href="index.html">Logo</a></div>
  </div>
  <div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="">menu</a></li>
    <li><a href="">menu</a></li>
    <li><a href="">menu</a></li>
    <li><a href="">menu</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="">menu<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
      </ul>
    </li>
  </ul>
   <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Регистрация</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Войти</a></li>
  </ul>
  </div>
</div>
 </nav>

 

Резиновостью navbar можно управлять меняя значение класса.

Можно вместо container-fluid поставить просто container, тогда navbar не будет растягиваться на всю ширину экрана,а примет ширину container по-умолчанию. Максимальная ширина container составляет 1170px

Следующая часть кода отвечает за название организации(фирмы) и кнопку, которая появляется на мобильных устройствах

Следующий код хранит в себе элементы navbar.

В мобильных устройствах все эти элементы мы будем видеть по нажатию на кнопку

Для того чтобы в мобильных версиях по нажатию кнопоки отображались элементы нужно чтобы совпадали следующие id

В примере для разбора navbar есть простые элементы такие как ссылка, но есть и сложные элементы это форма, выпадающий список. Для создания меню на основе navbar нужно использовать список ul

Классы nav navbar-nav нужны для того чтобы элементы списка ul располагались горизонтально. Для создания простой ссылки в меню можно использовать следующий код

Для выделения активного пункта меню нужно использовать класс active

Для того чтобы вывести выпадающее меню нужно родительскому li добавить класс dropdown и внутри элемента разместить каретку по нажатию на которую будет выпадать меню. Во вложенный список ul нужно добавить класс dropdown-menu

Фиксация navbar сверху
Для того чтобы зафиксировать navbar сверху нужно добавить класс navbar-fixed-top

Фиксация navbar снизу
Для того чтобы зафиксировать navbar снизу нужно добавить класс navbar-fixed-bottom

Что такое Framework?

Фреймворк это набор всевозможных библиотек и классов для быстрой разработки сайтов. Главная цель фреймворка, предоставить разработчику удобную среду для разработки веб сайта с большим стандартным функционалом.

Сам фреймворк состоит из встроенных классов для: работы с базой данных, создания дизайна, анимации создания слайдеров и многое другое. Все эти функции вы можете легко использовать во всех проектах, при этом их подключение и использование будет максимально простым!
Еще один из плюсов — структурирование архитектуры вашего приложения. Фреймворк содержит в себе перечень стандартных папок в которых предполагается что вы будете размещать необходимые части вашего приложения. Это действительно плюс, потому что позволяет вам поддерживать все файлы в порядке на нужных местах!
На наших уроках мы будем изучать Framework под названием Bootstrap. Это один из самых популярных фреймворков на сегодняшний день.
Официальный сайт Bootstrap находится по адресу
http://getbootstrap.com/
Скачать bootstrap вы можете на странице
http://getbootstrap.com/getting-started/
Нажав на кнопку Download.
Так же вы можете подключить Bootstrap к своему сайту используя CDN.

Что такое CDN?

Согласно определению Википедии, CDN -Сеть доставки (и дистрибуции) контента (англ. Content Delivery Network или Content Distribution Network, CDN) — географически распределённая сетевая инфраструктура, позволяющая оптимизировать доставку и дистрибуцию контента конечным пользователям в сети Интернет. Использование контент-провайдерами CDN способствует увеличению скорости загрузки интернет-пользователями аудио-, видео-, программного, игрового и других видов цифрового контента в точках присутствия сети CDN.
Простыми словами CDN – это сеть доставки нужных файлов пользователям. Эти файлы будут храниться не на вашем компьютере, а на специальных серверах. Это позволит сэкономить место на вашем диске.

Пример подключения bootstrap стилей с использованием CDN

<linkrel=«stylesheet»href=«https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»integrity=«sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u»crossorigin=«anonymous»>

Мы для простоты будем подключать файл со стилями Bootstrap, который скачем с сайта.

<link rel=»stylesheet» href=» css/bootstrap.min.css»>

Важно: Файлы стилей которые заканчиваются на min.css называются сжатыми. В них отсутствуют переносы на новые строки и убраны лишние пробелы. Данный файл неудобен для редактирования но он весит меньше и быстрее загружается.

Что такое сетка фреймворка?

Модульная сетка позволяет размещать содержимое сайта в колонках. Обычно максимальное количество колонок 12. Ширина колонки задается в процентах от ширины строки. Одна колонка занимает 1/12 ширину строки и в строке помещается 12 колонок. 2 колонки занимают 2/12 или одну 6 и их помещается шесть по ширине. И так далее. Проще понять систему модульных сеток можно по картинке.

Главное правило совместимости колонок это сумма колонок в строке равна 12. Вы можете использовать различные комбинации колонок по ширине.

Что такое адаптивный дизайн?

Адаптивный веб-дизайн (англ. Adaptive Web Design) — дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера или устройства в котором открывается браузер.

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

Зачем нужна адаптивная верстка?

Адаптивная верстка позволяет менять количество колонок для различных устройств. Это позволяет удобно располагать содержимое сайта в зависимости от ширины устройства. В адаптивном дизайне нужно сохранять структуру макета и аккуратность подачи информации для всех разрешений, поэтому макеты следует делать для всех контрольных точек. Контрольными точками мы будем называть различные разрешения экранов устройств. При этом колонки сетки остаются статичными и добавляются по мере увеличения ширины экрана, а элементы меняют свое положение, подчиняясь колоночному ритму и точкам перехода. За типовые точки перехода или разрешения устройств можно принять 640, 768, 960, 1024, 1280 и 1440. И для каждого разрешения экрана соответственно будет разное количество колонок.

 

Логика размещения контента на странице Bootstrap.

1. Все содержимое страницы помещается в блок с классом container.
2. Чтобы создать строку используем класс row. Строки размещаются внутри контейнера.
3. Внутри строки размещаются колонки.

 

 

Класс контейнер .container

Класс контейнер (.container) позволяет осуществить простое центрирование контента страницы. Контейнер установлен в фиксированные значения ширины width на различных контрольных точках медиа запросов для соответствия с системой разметки bootstrap.

Для превращения любой фиксированной ширины сетки макета в полную ширину макета, мы можем изменив класс .container на .container-fluid.

Класс строки .row

Для размещения содержимого в строках. Применяйте класс .row

 

Стандартные классы сеток.

В таблице ниже представлены стандартные префиксы таблиц для сеток.

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

 

	Extra small<544px	Small ≥544px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
ШиринаКонтейнера	None (auto)	576px	720px	940px	1140px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-	.col-xl-

 

Class Prefix – префикс класса в этой таблице это текст который необходимо добавить перед номером колонки. К примеру вы хотите применить размещение в три колонки для небольших устройств. В этом случае вам нужно использовать класс  .col-md-4.

Практическая работа 1.

1. Создадим папку BOOTSTRAP на рабочем столе, если она не создана
2. Создадим в ней папку со своим именем.
3. Войдем в свою папку и создадим там текстовый файл «lab1.html».
4. Создадим папку CSS. И загрузим в нее стандартный файл со стилями bootstrap.
5. Откроем текстовый файл с помощью редактора notepd++.
6. Создадим в нем стандартный заголовок HTML документа с подключением bootstrap.min.css.
7. В теле HTML документа используем создадим блок div и присвоим ему класс container.
8. Внутри созданного контейнера создадим
9. В блоке c классом контейнер создадим две строки.
10. В каждой строке разместим по 4и контейнера с классом col-md-3 .
11. В каждом блоке с классом col-md-3 разместим праздничные открытки 1.png — 8.png.
12. Зададим ширину каждой картинки 100%.

 

В результате должен получиться вот такой сайт.

Что у нас получилось?

две строки по 4-и колонки. Теперь начните плавно сужать окно браузера и посмотрите на результат. После определенного момента (контрольная точка) сайт автоматически свернулся в одну колонку. Это позволит просматривать наш сайт в удобном виде на мобильных смартфонах. Но как же быть с планшетами? Они обладают промежуточным разрешением между мониторами стационарных компьютеров и телефонов. На них было бы удобно просматривать контент в две колонки. Как этого достичь? Давайте добавим класс .col-sm-6. Это как раз добавит возможность отображения в две колонки на устройствах с небольшим разрешением экрана.

Проверим как отображается наш сайт после добавления .col-sm-6

Ура!!! У нас получилось три варианта отображения сайта, для смартфонов мы получили удобное отображение в одну колонку, для планшетов в две, и для стационарных компьютеров и ноутбуков получили отображение в 4-и колонки.

Но давайте посмотрим ниже. Что то пошло не по плану.

В нижней части экрана верстка сбилась и картинки отображаются хаотично.

С чем это связано? При отображении в две колонки у нас появилось больше строк. Но в верстке всего две строки. Чтобы правильно упорядочить содержимое сайта нам необходимо добавить две дополнительные колонки именно для col-sm-6.

Как это сделать?

Для этого нам понадобится два класса.

Для начала класс который запретит обтекание float и тем самым создаст новую строку — clearfix.

Но не все так просто.  Если мы применим clearfix и запретим обтекание то теперь сайт станет двух колоночным и для устройств с большим разрешением экрана. Помочь решить эту проблему нам поможет класс visible-sm-block — это позволит сделать видимым только для устройств с sm разрешениями.

Давайте добавим последний штрих используем класс clearfix и visible-sm-block.

В строке между двумя картинками вставим «распорку» как показано скриншоте ниже.

Ну вот. Теперь проблема с неверным отображением двух колонок решена.

Полный код страницы.

В завершение теоретической части давайте изучим еще один класс:

.img-responsive — помогает масштабировать фотографию по размеру контейнера в котором она находится.

 

 

 

Наш первый сайт. Фотогалерея .

Теперь давайте закрепим пройденный материал и создадим первую веб страничку с использованием Bootstrap.

 

Какие шаги нам нужно выполнить для того чтобы создать сайт?

1. Скачать файлы стилей Бутстрап.
2. Создать текстовый документ и переименовать его в index.html
3. По дизайну галереи размещенному ниже подходящие модули сетки и сверстать сайт.
4. Скачать фотографии из интернет используя сервисы Гугл картинки или Яндекс Картинки. Возможно скачать свои личные фотографии из телефона или профиля в социальной сети. Или использовать стандартные заготовки для урока.
5. Изменить размеры фотографий с помощью редактора Paint если фотографии разных размеров.
6. Сверстать сайт и разместить на нем фотографии.

Дизайн сайта

По окончанию урока разместите свой сайт на бесплатном хостинге в интернет.