Bootstrap 4 Medienobjekte
Medienobjekte
Bootstrap bietet eine einfache Möglichkeit, Medienobjekte (wie Bilder oder Videos) zusammen mit Inhalten auszurichten. Medienobjekte werden häufig verwendet, um Blogkommentare, Tweets usw. anzuzeigen:
John Doe Gepostet am 19. Februar 2016
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
John Doe Gepostet am 20. Februar 2016
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
Grundlegendes Medienobjekt
John Doe Gepostet am 19. Februar 2016
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
Um ein Medienobjekt zu erstellen, fügen Sie die .mediaKlasse einem Containerelement hinzu und platzieren Sie Medieninhalte in einem untergeordneten Container mit der .media-bodyKlasse. Fügen Sie mit den Abstandsdienstprogrammen nach Bedarf Auffüllungen und Ränder hinzu:
Beispiel
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
Verschachtelte Medienobjekte
Medienobjekte können auch verschachtelt werden (ein Medienobjekt in einem Medienobjekt):
John Doe Gepostet am 19. Februar 2016
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
Jane Doe Gepostet am 20. Februar 2016
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
Um Medienobjekte zu verschachteln, platzieren Sie einen neuen .mediaContainer im .media-bodyContainer:
Beispiel
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane
Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div
class="media-body">
<h4>Jane Doe <small><i>Posted on
February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
Rechtsbündiges Medienbild
John Doe Gepostet am 19. Februar 2016
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
Um das Medienbild rechts auszurichten, fügen Sie das Bild nach dem .media-bodyContainer hinzu:
Beispiel
<div class="media border p-3">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
<img src="img_avatar3.png" alt="John
Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
Obere, mittlere oder untere Ausrichtung
Verwenden Sie die Flex-Dienstprogramme, align-self-*Klassen, um das Medienobjekt oben, in der Mitte oder unten zu platzieren:
Medien oben
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
Medien Mitte
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
Medien unten
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen.
Beispiel
<!-- Media top -->
<div class="media">
<img src="img_avatar1.png" class="align-self-start
mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>