Стрельба в цель упражняет руку и причиняет верность глазу (К. Прутков).

Bootstrap – Медиа объект

3 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
22 июня 2017
Bootstrap - Медиа объект
В этой главе рассказывается об медиа-объекте. Эти абстрактные типы объектов предназначены для построения различных типов компонентов (например, комментарии в блоге, твиты и т.д.), которые показываются по левому краю или по правому краю изображения наряду с текстовым содержанием. Цель медиа-объектов, сделать код для разработки блоков информации значительно короче.

Цель медиа-объектов (световая разметка, легкая расширяемость) достигаются путем применения классов для некоторых из простых разметок. Есть две формы для медиа-объектов:

  • .media – Этот класс позволяет вставлять медиа-объект (изображения, видео и аудио) слева или справа от блока контента.
  • .media-list – Если вы хотите список, этот элемент являться частью неупорядоченного списка, используйте класс. Полезно для списков комментариев или статей.

Давайте посмотрим пример медиа-объекта по умолчанию:

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "//andreyex.ru/wp-content/uploads/cat.jpg" alt = "Медиа-объект">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Медиа-заголовок</h4>
      Это примерный текст. Это примерный текст. 
      Это примерный текст. Это примерный текст.
      Это примерный текст. Это примерный текст.
      Это примерный текст. Это примерный текст.
   </div>

</div>

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "//andreyex.ru/wp-content/uploads/cat.jpg" alt = "Медиа-объект">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Медиа-заголовок</h4>
      Это примерный текст. Это примерный текст. 
      Это примерный текст. Это примерный текст.
      Это примерный текст. Это примерный текст.
      Это примерный текст. Это примерный текст.
      
      <div class = "media">
         <a class = "pull-left" href = "#">
            <img class = "media-object" src = "//andreyex.ru/wp-content/uploads/cat.jpg" alt = "Медиа-объект">
         </a>
         
         <div class = "media-body">
            <h4 class = "media-heading">Медиа-заголовок</h4>
            Это примерный текст. Это примерный текст. 
            Это примерный текст. Это примерный текст.
            Это примерный текст. Это примерный текст.
            Это примерный текст. Это примерный текст.
         </div>

      </div>
   </div>
   
</div>

 

Давайте посмотрим пример медиа списка:

<ul class="media-list">
 <li class="media"><a class="pull-left" href="#">
<img class="media-object" src="//andreyex.ru/wp-content/uploads/cat.jpg" alt="Изображение котенка" />
</a>
<div class="media-body">
<h4 class="media-heading">Медиа-заголовок</h4>
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.

<!-- Вложенный медиа-объект -->
<div class="media"><a class="pull-left" href="#">
<img class="media-object" src="//andreyex.ru/wp-content/uploads/cat.jpg" alt="Изображение котенка" />
</a>
<div class="media-body">
<h4 class="media-heading">Заголовок вложенного медиа</h4>
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.</h4>
<!-- Nested media object -->
<div class="media"><a class="pull-left" href="#">
<img class="media-object" src="//andreyex.ru/wp-content/uploads/cat.jpg" alt="Изображение котенка" />
</a>
<div class="media-body">
<h4 class="media-heading">Заголовок вложенного медиа</h4>
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.

</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media"><a class="pull-left" href="#">
<img class="media-object" src="//andreyex.ru/wp-content/uploads/cat.jpg" alt="Изображение котенка" />
</a>
<div class="media-body">
<h4 class="media-heading">Заголовок вложенного медиа</h4>
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.

</div>
</div>
</div></li>
 <li class="media"><a class="pull-right" href="#">
<img class="media-object" src="//andreyex.ru/wp-content/uploads/cat.jpg" alt="Изображение котенка" />
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.
Это примерный текст. Это примерный текст.

</div></li>
</ul>

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 92

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close