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>

Читайте также

Как использовать Bootstrap с WordPress для создания своей темы?

3 года назад

Как пользоваться bootstrap Glyphicons

8 лет назад

Быть веб-разработчиком в 2020 — Часть 1: CSS или Bootstrap?

5 лет назад

0 0 голоса

Рейтинг статьи

Подписаться

авторизуйтесь

Уведомить о

новых последующих комментарияхновых ответах на мои комментарии

Я разрешаю использовать свой email и отправлять уведомления о новых комментариях и ответах (вы cможете отказаться от подписки в любое время).

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

0 комментариев

Старые

Новые Популярные

Межтекстовые Отзывы

Посмотреть все комментарии