Учебники

Bootstrap — медиа-объект

Октябрь 25, 2018

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

Цель медиа-объектов (легкая разметка, легкая расширяемость) достигается путем применения классов к некоторой простой разметке. Существует две формы для медиа-объекта —

  • .media — Этот класс позволяет перемещать медиа-объект (изображения, видео и аудио) слева или справа от блока контента.

  • .media-list — Если вы готовите список, в котором элементы будут частью неупорядоченного списка, используйте класс. полезно для комментариев темы или списков статей.

.media — Этот класс позволяет перемещать медиа-объект (изображения, видео и аудио) слева или справа от блока контента.

.media-list — Если вы готовите список, в котором элементы будут частью неупорядоченного списка, используйте класс. полезно для комментариев темы или списков статей.

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

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
   </div>
	
</div>

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      
      <div class = "media">
         <a class = "pull-left" href = "#">
            <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
         </a>
         
         <div class = "media-body">
            <h4 class = "media-heading">Media heading</h4>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </div>
			
      </div>
   </div>
   
</div>

Давайте посмотрим пример списка СМИ —

47
Share: