English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Wenn eine Anordnung erstellt werden soll, die linke oder rechte Ausrichtung von Multimedia-Objekten (z.B. Bildern oder Videos) und Textinhalten (z.B. Blog-Kommentare, Tweets usw.) umfasst, kann dies mit dem neuen Bootstrap-Medienkomponenten leicht erreicht werden.
Bootstrap bietet eine hervorragende Möglichkeit, die Anordnung von Multimedia-Objekten (Bilder oder Videos) und Inhalten zu verwalten. Anwendungsbeispiele sind Blog-Kommentare, Weibo usw.:
Um ein Multimedia-Objekt zu erstellen, können Sie der Containerkomponente die Klasse '.media' hinzufügen und die Multimedia-Inhalte in den Untercontainer einfügen. Der Untercontainer muss die Klasse '.media' haben:-Das 'body' -Element, fügen Sie dann den Außenabstand und den Innenabstand hinzu, um Effekte zu erzeugen:
<!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>Medienobjekte</h2> <p>Verwenden Sie die Klassen 'media' und 'media-Das 'body' -Element erstellt Multimedia-Objekte:/p> <div class="media border p-3"> <img src="https://de.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>Testen Sie es heraus ‹/›
运行后效果如下:
多媒体对象可以多个嵌套(一个多媒体对象中包含另外一个多媒体对象)
要嵌套多媒体对象,可以把新的 .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://de.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://de.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>Testen Sie es heraus ‹/›
如果你想将头像图片显示在右侧,可以在 .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://de.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;"> </div> </div> </body> </html>Testen Sie es heraus ‹/›
我们可以使用 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>Medienobjekte</h2> <p>Wir können <-self-* Verwenden Sie die entsprechenden Klassen, um die Position der Bildanzeige des Medienobjekts zu konfigurieren:</p><br> <!-- Kopf --> <div class="media"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="align-self-start mr-3" style="width:60px"> <div class="media-body"> <h4>Kopf -- Grundlagen-Tutorial(oldtoolbag.com)</h4> Lernen Sie die Grundlagen, um weiter voranzukommen!! Lernen Sie die Grundlagen, um weiter voranzukommen!! Lernen Sie die Grundlagen, um weiter voranzukommen!! </div> </div> <!-- Zentriert --> <div class="media mt-3"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="align-self-center mr-3" style="width:60px"> <div class="media-body"> <h4>Zentriert -- Grundlagen-Tutorial(oldtoolbag.com)</h4> Lernen Sie die Grundlagen, um weiter voranzukommen!! Lernen Sie die Grundlagen, um weiter voranzukommen!! Lernen Sie die Grundlagen, um weiter voranzukommen!! </div> </div> <!-- Unten --> <div class="media mt-3"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="align-self-end mr-3" style="width:60px"> <div class="media-body"> <h4>Unten -- Grundlagen-Tutorial(oldtoolbag.com)</h4> Lernen Sie die Grundlagen, um weiter voranzukommen!! Lernen Sie die Grundlagen, um weiter voranzukommen!! Lernen Sie die Grundlagen, um weiter voranzukommen!! </div> </div> </div> </body> </html>Testen Sie es heraus ‹/›