English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In diesem Kapitel werden wir das Multimedia-Objekt in Bootstrap (z.B. Bilder, Videos, Audios) erläutern. Stile von Multimedia-Objekten können zur Erstellung verschiedener Arten von Komponenten verwendet werden (z.B. Blog-Kommentare), und wir können in den Komponenten Text und Bild mischen. Bilder können links oder rechts ausgerichtet sein. Medienobjekte können mit weniger Code die Kombination von Medienobjekten und Texten realisieren.
Zunächst schauen wir uns ein Beispiel an:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 示例 - Standard-Medienobjekt/title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>多媒体对象</h2> <p>Verwenden Sie "media-left"-Klasse, um das Multimedia-Objekt links auszurichten. Der Textinhalt muss hinter dem Bild platziert werden.</p> <p>"media-right"-Klasse wird verwendet, um das Multimedia-Objekt rechts auszurichten.</p><br> <!-- Links ausgerichtet --> <div class="media"> <div class="media-left"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:60px"> </div> <div class="media-body"> <h4 class="media-heading">Links ausgerichtet</h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> </div> </div> <hr> <!-- Rechts ausgerichtet --> <div class="media"> <div class="media-body"> <h4 class="media-heading">Rechts ausgerichtet</h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> </div> <div class="media-right"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:60px"> </div> </div> </div> </body> </html>Test it out ‹/›
结果如下所示：
Eine .media-Klasse im <div>-Element hinzufügen, um ein Multimedia-Objekt zu erstellen.
使用 .media-left 类让多媒体对象(图片)来实现左对齐，同样 .media-right 类实现了右对齐。
文本内容放在 的 div 中，图片左对齐则放在 之前，图片右对齐则放在 之后。
此外，你还可以使用 .media-heading 类来设置标题。
让我们来看看下面这个有关媒体对象列表 .media-list 的示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 示例 - 多媒体对象</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>多媒体对象</h2> <p>多媒体对象可以设置头部、居中、底部对齐，对应的类分别是 "media-top"、 "media-middle" 、 "media-bottom":</p><br> <div class="media"> <div class="media-left media-top"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">Angezeigt</h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> </div> </div> <hr> <div class="media"> <div class="media-left media-middle"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">Zentriert</h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> </div> </div> <hr> <div class="media"> <div class="media-left media-bottom"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">Abschließend</h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> </div> </div> </div> </body> </html>Test it out ‹/›
结果如下所示：
一个多媒体对象内部还可以包含多个多媒体对象：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 示例 - 多媒体对象</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>嵌入式多媒体对象</h2> <p>在多媒体对象内部可以再插入多媒体对象:</p><br> <div class="media"> <div class="media-left"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-1 <small><i>Posted on February 19, 2016</i></small></h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> <!-- 嵌入式多媒体对象 --> <div class="media"> <div class="media-left"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-2 <small><i>Posted on February 19, 2016</i></small></h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> <!-- 嵌入式多媒体对象 --> <div class="media"> <div class="media-left"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-3 <small><i>Posted on February 19, 2016</i></small></h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> </div> </div> </div> </div> </div> </div> </div> </body> </html>Test it out ‹/›
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 示例 - 多媒体对象</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>嵌入式多媒体对象</h2> <p>在多媒体对象内部可以再插入多媒体对象:</p><br> <div class="media"> <div class="media-left"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-1 <small><i>Posted on February 19, 2016</i></small></h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> <!-- 嵌入式多媒体对象 --> <div class="media"> <div class="media-left"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-2 <small><i>Posted on February 20, 2016</i></small></h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> <!-- 嵌入式多媒体对象 --> <div class="media"> <div class="media-left"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-3 <small><i>Posted on February 21, 2016</i></small></h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> </div> </div> </div> <!-- 嵌入式多媒体对象 --> <div class="media"> <div class="media-left"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-4 <small><i>Posted on February 20, 2016</i></small></h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> </div> </div> </div> </div> <!-- 嵌入式多媒体对象 --> <div class="media"> <div class="media-left"> <img src="https://de.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-5 <small><i>Posted on February 19, 2016</i></small></h4> <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p> </div> </div> </div> </div> </body> </html>Test it out ‹/›