Bootstrap4 Tutorial Básico

Bootstrap4 Objeto multimídia

Se você deseja criar uma disposição que contenha objetos multimídia (por exemplo, imagens ou vídeos) alinhados à esquerda ou à direita, além de conteúdo de texto (por exemplo, comentários de blogs, Tweets e outros), você pode fazer isso facilmente com o novo componente de mídia Bootstrap.

Bootstrap oferece uma maneira excelente de lidar com a disposição de objetos multimídia (imagens ou vídeos) e conteúdo. Aplicações incluem comentários de blogs, Weibo e outros:

Objeto multimídia básico

Para criar um objeto multimídia, você pode adicionar a classe .media ao elemento contenedor e, em seguida, colocar o conteúdo multimídia no subcontenedor, que precisa adicionar .media-Classe body, então adicione margem externa, margem interna e outros efeitos:

示例

<!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>Objeto Multimídia</h2>
　　<p>Use .media e .media-Classe body cria objetos multimídia:/p>
　　<div class="media border p-3">
　　　　<img src="https://pt.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>

Teste Veja ‹/›

运行后效果如下：

多媒体对象嵌套

多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）

要嵌套多媒体对象，可以把新的 .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://pt.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://pt.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>

Teste Veja ‹/›

多媒体对象图片显示在右边

如果你想将头像图片显示在右侧，可以在 .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://pt.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="ml-3　mt-3　rounded-circle" style="width:60px;">
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

定位多媒体图片位置

我们可以使用 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>Objeto Multimídia</h2>
　　<p>Pode usar <b>align</b> para definir a posição de exibição da imagem do objeto multimídia：<-self-*　<p>Pode usar a classe <b>align</b> para definir a posição de exibição da imagem do objeto multimídia：</p><br>
　　<!--　Cabeçalho　-->
　　<div class="media">
　　　　<img src="https://pt.oldtoolbag.com/run/images/img_avatar.png" class="align-self-start mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Cabeçalho　--　Tutorial Básico(oldtoolbag.com)</h4>
　　　　　　<p>Estudar bem, para ir mais longe!!
　　　　　　<p>Estudar bem, para ir mais longe!!
　　　　　　<p>Estudar bem, para ir mais longe!!
　　　　</div>
　　</div>
　　<!--　Centralizado　-->
　　<div class="media mt-3">
　　　　<img src="https://pt.oldtoolbag.com/run/images/img_avatar.png" class="align-self-center mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Centralizado　--　Tutorial Básico(oldtoolbag.com)</h4>
　　　　　　<p>Estudar bem, para ir mais longe!!
　　　　　　<p>Estudar bem, para ir mais longe!!
　　　　　　<p>Estudar bem, para ir mais longe!!
　　　　</div>
　　　</div>
　　<!--　Rodapé　-->
　　<div class="media mt-3">
　　　　<img src="https://pt.oldtoolbag.com/run/images/img_avatar.png" class="align-self-end mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Rodapé　--　Tutorial Básico(oldtoolbag.com)</h4>
　　　　　　<p>Estudar bem, para ir mais longe!!
　　　　　　<p>Estudar bem, para ir mais longe!!
　　　　　　<p>Estudar bem, para ir mais longe!!
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

Bootstrap4 Flexbox