English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Multimedia-Objekte

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.:

Grundlegende Multimedia-Objekte

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 ‹/›