Тема урока.

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

Материал урока 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>

Результат:

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