Медиа-объекты Bootstrap4

Bootstrap предоставляет отличный способ управления макетом медиа-объектов (изображений или видео) и контента. Сценарии применения включают комментарии в блогах, Weibo и т. д.:

Базовые медиа-объекты

Чтобы создать медиа-объект, добавьте класс .media к элементу контейнера, затем поместите медиа-содержимое в дочерний контейнер. Дочерний контейнер должен добавить класс .media-body, а затем добавить внешние отступы, внутренние отступы и другие эффекты:

Пример

<div class="media border p-3"> <img src="mobile-icon.png" alt="Джон Доу" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>Пример</h4> <p>То, что вы изучаете, — это не просто технология, но и мечта!!!</p> </div> </div>

Попробуйте сами »

Вложенные медиа-объекты

Медиа-объекты можно вкладывать несколько раз (один медиа-объект содержит другой медиа-объект).

Чтобы вложить медиа-объекты, вы можете поместить новый.mediaконтейнер в.media-bodyконтейнер:

Пример

<div class="media border p-3"> <img src="mobile-icon.png" alt="Джон Доу" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>Пример</h4> <p>То, что вы изучаете, — это не просто технология, но и мечта!!!</p> <div class="media p-3"> <img src="mobile-icon.png" alt="Джейн Доу" class="mr-3 mt-3 rounded-circle" style="width:45px;"> <div class="media-body"> <h4>Пример</h4> <p>То, что вы изучаете, — это не просто технология, но и мечта!!!</p> </div> </div> </div> </div>

Попробуйте сами »

Изображение медиаобъекта, отображаемое справа

Если вы хотите отобразить изображение аватара справа, вы можете.media-bodyдобавить изображение после контейнера:

Пример

<div class="media border p-3"> <div class="media-body"> <h4>Пример</h4> <p>То, что вы изучаете, — это не просто технология, но и мечта!!!</p> </div> <img src="mobile-icon.png" alt="Джон Доу" class="ml-3 mt-3 rounded-circle" style="width:60px;"> </div>

Попробуйте сами »

Позиционирование изображений медиаобъектов

Мы можем использовать классы, связанные с align-self-*, чтобы задать позицию отображения изображения медиаобъектов:

Пример

<!--Сверху--> <div class="media"> <img src="/static.jyshare.com/images/mobile-icon.png" class="align-self-start mr-3" style="width:60px"> <div class="media-body"> <h4>Сверху -- Пример</h4> <p>То, что вы изучаете, — это не просто технология, но и мечта!!!</p> </div> </div> <!--По центру--> <div class="media"> <img src="/static.jyshare.com/images/mobile-icon.png" class="align-self-center mr-3" style="width:60px"> <div class="media-body"> <h4>По центру -- Пример</h4> <p>То, что вы изучаете, — это не просто технология, но и мечта!!!</p> </div> </div> <!--Снизу--> <div class="media"> <img src="/static.jyshare.com/images/mobile-icon.png" class="align-self-end mr-3" style="width:60px"> <div class="media-body"> <h4>Снизу -- Пример</h4> <p>То, что вы изучаете, — это не просто технология, но и мечта!!!</p> </div> </div>

Попробуйте сами »
Другие расширения