English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Si vous souhaitez créer une mise en page contenant des objets multimédias alignés à gauche ou à droite (par exemple, des images ou des vidéos) et du contenu texte (par exemple, des commentaires de blog, des Tweets, etc.), vous pouvez le faire de manière simple en utilisant le composant media nuevo de Bootstrap.
Bootstrap offre de bonnes méthodes pour gérer la mise en page des objets multimédias (images ou vidéos) et du contenu. Les scénarios d'application incluent les commentaires de blog, les Weibo, etc. :
Pour créer un objet multimédia, vous pouvez ajouter la classe .media à l'élément conteneur, puis placer le contenu multimédia dans le conteneur enfant, le conteneur enfant nécessitant .media-La classe body, puis ajoutez des marges extérieures et intérieures, etc. des effets :
<!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>Utilisez .media et .media-La classe body crée des objets multimédias :</p> <div class="media border p-3"> <img src="https://fr.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>Vérifiez le test ‹/›
运行后效果如下：
多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）
要嵌套多媒体对象，可以把新的 .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://fr.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://fr.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>Vérifiez le test ‹/›
如果你想将头像图片显示在右侧，可以在 .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://fr.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;"> </div> </div> </body> </html>Vérifiez le test ‹/›
我们可以使用 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>多媒体对象<-self-* <p>Nous pouvons utiliser align/p><br> <!-- En-tête --> <div class="media"> <img src="https://fr.oldtoolbag.com/run/images/img_avatar.png" class="align-self-start mr-3" style="width:60px"> <div class="media-body"> <h4>En-tête -- Tutoriel de base(oldtoolbag.com)</h4> Apprendre les bases est la clé pour aller plus loin !! Apprendre les bases est la clé pour aller plus loin !! Apprendre les bases est la clé pour aller plus loin !! </div> </div> <!-- Centré --> <div class="media mt-3"> <img src="https://fr.oldtoolbag.com/run/images/img_avatar.png" class="align-self-center mr-3" style="width:60px"> <div class="media-body"> <h4>Centré -- Tutoriel de base(oldtoolbag.com)</h4> Apprendre les bases est la clé pour aller plus loin !! Apprendre les bases est la clé pour aller plus loin !! Apprendre les bases est la clé pour aller plus loin !! </div> </div> <!-- Bas --> <div class="media mt-3"> <img src="https://fr.oldtoolbag.com/run/images/img_avatar.png" class="align-self-end mr-3" style="width:60px"> <div class="media-body"> <h4>Bas -- Tutoriel de base(oldtoolbag.com)</h4> Apprendre les bases est la clé pour aller plus loin !! Apprendre les bases est la clé pour aller plus loin !! Apprendre les bases est la clé pour aller plus loin !! </div> </div> </div> </body> </html>Vérifiez le test ‹/›