Bootstrap4 Tutoriales básicos

Bootstrap4 Objeto multimedia

Si desea crear un diseño que contenga objetos multimedia alineados a la izquierda o a la derecha (por ejemplo, imágenes o videos) y contenido de texto (por ejemplo, comentarios de blogs, Tweets, etc.), puede hacerlo de manera sencilla con el nuevo componente de media de Bootstrap.

Bootstrap ofrece una excelente manera de manejar el diseño de objetos multimedia (imágenes o videos) y contenido. Las aplicaciones incluyen comentarios de blogs, Weibo, etc.:

Objeto multimedia básico

Para crear un objeto multimedia, puede agregar la clase .media al elemento contenedor y luego poner el contenido multimedia en el subcontenedor, el subcontenedor necesita agregar .media-La clase 'body' y luego agregar márgenes externos, márgenes internos y otros efectos:

示例

<!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 multimedia</h2>
　　<p>Usar .media y .media-La clase 'body' crea objetos multimedia:/p>
　　<div class="media border p-3">
　　　　<img src="https://es.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>

Prueba aquí ‹/›

运行后效果如下：

多媒体对象嵌套

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

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

Prueba aquí ‹/›

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

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

Prueba aquí ‹/›

定位多媒体图片位置

我们可以使用 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 multimedia</h2>
　　<p>Podemos usar　align-self-*　Usamos clases relacionadas para definir la posición de visualización de las imágenes de los objetos multimedia：</p><br>
　　<!--　Cabeza　-->
　　<div class="media">
　　　　<img src="https://es.oldtoolbag.com/run/images/img_avatar.png" class="align-self-start mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Cabeza　--　Tutoriales básicos(oldtoolbag.com)</h4>
　　　　　　Aprende bien, ¡puedes ir más lejos!!
　　　　　　Aprende bien, ¡puedes ir más lejos!!
　　　　　　Aprende bien, ¡puedes ir más lejos!!
　　　　</div>
　　</div>
　　<!--　Centrado　-->
　　<div class="media mt-3">
　　　　<img src="https://es.oldtoolbag.com/run/images/img_avatar.png" class="align-self-center mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Centrado　--　Tutoriales básicos(oldtoolbag.com)</h4>
　　　　　　Aprende bien, ¡puedes ir más lejos!!
　　　　　　Aprende bien, ¡puedes ir más lejos!!
　　　　　　Aprende bien, ¡puedes ir más lejos!!
　　　　</div>
　　　</div>
　　<!--　Parte inferior　-->
　　<div class="media mt-3">
　　　　<img src="https://es.oldtoolbag.com/run/images/img_avatar.png" class="align-self-end mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Parte inferior　--　Tutoriales básicos(oldtoolbag.com)</h4>
　　　　　　Aprende bien, ¡puedes ir más lejos!!
　　　　　　Aprende bien, ¡puedes ir más lejos!!
　　　　　　Aprende bien, ¡puedes ir más lejos!!
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Bootstrap4 Flexbox