English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной курс Bootstrap4

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

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

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

Основной мультимедийный объект

Чтобы создать мультимедийный объект, можно добавить класс .media к контейнерному элементу, затем поместить мультимедийный контент в подконтейнер, который требует добавления класса .media-body, а такжеouter margins, inner margins и т.д. эффекты:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Мультимедийные объекты</h2>
　　<p>Используйте классы .media и .media-body для создания мультимедийных объектов:</p>
　　<div class="media border p-3">
　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
　　　　<div class="media-body">
　　　　　　<h4>Сайт основного руководства</h4>
　　　　　　<p>Изучите основы, чтобы идти дальше!!!</p>　　　　　　
　　　　</div>
　　</div>
</div>
</body>
</html>
Тестировать, чтобы увидеть ‹/›

Эффект после выполнения:

Вложение мультимедийных объектов

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

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

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Вложение мультимедийных объектов</h2>
　　<p>Мультимедийные объекты могут быть вложены несколько раз (один мультимедийный объект содержит другой мультимедийный объект):</p><br>
　　<div class="media border p-3">
　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" 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="https://ru.oldtoolbag.com/run/images/img_avatar.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
　　　　　　　　<div class="media-body">
　　　　　　　　　　<h4>Сайт основного руководства</h4>
　　　　　　　　　　<p>Изучите основы, чтобы идти дальше!!!</p>
　　　　　　　　</div>
　　　　　　</div>　　
　　　　</div>
　　</div>
</div>
</body>
</html>
Тестировать, чтобы увидеть ‹/›

Изображения объектов的多imedia показаны справа

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

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Изображение справа</h2>
　　<p>Если вы хотите показать изображение аватара справа, вы можете добавить изображение после контейнера .media-body:</p>
　　<div class="media border p-3">
　　　　<div class="media-body">
　　　　　　<h4>Сайт основного руководства</h4>
　　　　　　<p>Изучите основы, чтобы идти дальше!!!</p>　　　　　　
　　　　</div>
　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
　　</div>
</div>
</body>
</html>
Тестировать, чтобы увидеть ‹/›

Определение местоположения мультимедийных изображений

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

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Мультимедийные объекты</h2>
　　<p>Мы можем использовать классы, связанные с align-self-* для настройки позиции изображения мультимедийных объектов:</p><br>
　　<!--　Заголовок　-->
　　<div class="media">
　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="align-self-start mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Заголовок --　Основной учебник(oldtoolbag.com)</h4>
　　　　　　<p>Научитесь основам, чтобы идти дальше！！
　　　　　　<p>Научитесь основам, чтобы идти дальше！！
　　　　　　<p>Научитесь основам, чтобы идти дальше！！
　　　　</div>
　　</div>
　　<!--　Центрирование　-->
　　<div class="media mt-3">
　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="align-self-center mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Центрировать -- Основной курс(oldtoolbag.com)</h4>
　　　　　　<p>Научитесь основам, чтобы идти дальше！！
　　　　　　<p>Научитесь основам, чтобы идти дальше！！
　　　　　　<p>Научитесь основам, чтобы идти дальше！！
　　　　</div>
　　　</div>
　　<!-- Низ -->
　　<div class="media mt-3">
　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="align-self-end mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Низ -- Основной курс(oldtoolbag.com)</h4>
　　　　　　<p>Научитесь основам, чтобы идти дальше！！
　　　　　　<p>Научитесь основам, чтобы идти дальше！！
　　　　　　<p>Научитесь основам, чтобы идти дальше！！
　　　　</div>
　　</div>
</div>
</body>
</html>
Тестировать, чтобы увидеть ‹/›
Flex-расположение Bootstrap4