Загрузочные объекты мультимедиа
Мультимедийные объекты
Bootstrap обеспечивает простой способ выравнивания мультимедийных объектов (например, изображений или видео) слева или справа от некоторого содержимого. Это может быть использовано для отображения блога комментарии, Tweets и так далее:
![Demo Avatar Html Css](img_avatar3.png)
Html Css Posted on February 19, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Demo Avatar Html Css](img_avatar4.png)
Html Css Posted on February 20, 2019
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Alicia Keyes Posted on February 25, 2020
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla vel metus scelerisque ante sollicitudin commodo.
![Demo Avatar Alicia Keyes](img_avatar6.png)
Базовый объект мультимедиа
![Demo Avatar Html Css Blank](img_avatar1.png)
Html Css
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Html Css
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Demo Avatar Html Css Blank](img_avatar1.png)
Пример
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Html Css</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">Html Css</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
Пример объяснено
Используйте элемент <div> с классом .media
для создания контейнера для
мультимедийных объектов.
Используйте класс, чтобы .media-left
выровнять объект мультимедиа (изображение) влево или .media-right
класс, чтобы выровнять его вправо.
Текст, который должен появиться рядом с изображением, помещается внутри контейнера с классом = "media-body
".
Кроме того, можно использовать .media-heading
для заголовков.
Выравнивание по верхнему, среднему или нижнему краю
Объект мультимедиа также может быть выровнен по верхнему, среднему или нижнему media-top
краю media-middle
или по классу media-bottom
:
![Demo Avatar Html Css Blank](img_avatar1.png)
Медиа Топ
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Demo Avatar Html Css Blank](img_avatar1.png)
Средний медиа
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Demo Avatar Html Css Blank](img_avatar1.png)
Media Нижней
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Пример
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Вложение мультимедийных объектов
Объекты мультимедиа также могут быть вложенными (объект мультимедиа внутри объекта мультимедиа):
Пример
![Demo Avatar Html Css Blank](img_avatar1.png)
Html Css Posted on February 19, 2019
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Demo Avatar Html Css Green](img_avatar2.png)
Html Css Posted on February 20, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Demo Avatar Html Css Blue](img_avatar3.png)
Html Css Posted on February 21, 2025
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Еще один пример вложения
Пример
![Demo Avatar Html Css Blank](img_avatar1.png)
Html Css Posted on February 19, 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Demo Avatar Html Css Green](img_avatar2.png)
Html Css Posted on February 20, 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Demo Avatar Html Css Blue](img_avatar3.png)
Html Css Posted on February 21, 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Demo Avatar Html Css Green](img_avatar4.png)
Html Css Posted on February 20, 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Demo Avatar Html Css Red](img_avatar5.png)
Html Css Posted on February 19, 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.