Силой хамства можно валить деревья (Авессалом Подводный).

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

2 мин для чтения

Главное меню » Учебное пособие по framework Bootstrap » Bootstrap — Медиа объект

(2 оценок, среднее: 5,00 из 5)

Загрузка...

22.06.2017

В этой главе рассказывается об медиа-объекте. Эти абстрактные типы объектов предназначены для построения различных типов компонентов (например, комментарии в блоге, твиты и т.д.), которые показываются по левому краю или по правому краю изображения наряду с текстовым содержанием. Цель медиа-объектов, сделать код для разработки блоков информации значительно короче.

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

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