Bootstrap - Объект мультимедиа

: Категория: Bootstrap 3; Опубликовано: 23 сентября 2018; Просмотров: 1304

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

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

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

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

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/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 = "/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 = "/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>

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

<ul class = "media-list">
   <li class = "media">
      <a class = "pull-left" href = "#">
         <img class = "media-object" src = "/images/64.jpg" alt = "Generic placeholder image">
      </a>
     
      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
                                    
         <p>
            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.
         </p>
        
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/images/64.jpg"
                  alt = "Generic placeholder image">
            </a>
           
            <div class = "media-body">
               <h4 class = "media-heading">Nested 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.
              
               <!-- Nested media object -->
               <div class = "media">
                  <a class = "pull-left" href = "#">
                     <img class = "media-object" src = "/images/64.jpg"
                        alt = "Generic placeholder image">
                  </a>
                 
                  <div class = "media-body">
                     <h4 class = "media-heading">Nested 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>
         
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/images/64.jpg"
                  alt = "Generic placeholder image">
            </a>
           
            <div class = "media-body">
               <h4 class = "media-heading">Nested 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>
   </li>
  
   <li class = "media">
      <a class = "pull-right" href = "#">
         <img class = "media-object" src = "/images/64.jpg"
            alt = "Generic placeholder image">
      </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>
     
   </li>
</ul>

Bootstrap - Объект мультимедиа

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

Поделиться в соцсетях

Подписаться на канал

ТОП-10 статей

Свежие записи