Bootstrap -Medienobjekte


Medienobjekte

Bootstrap bietet eine einfache Möglichkeit, Medienobjekte (wie Bilder oder Videos) links oder rechts von einigen Inhalten auszurichten. Dies kann verwendet werden, um Blog-Kommentare, Tweets usw. anzuzeigen:

Demo-Avatar John Doe

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.

Demo-Avatar Jane Doe

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.


Alicia Keyes Gepostet am 25. 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. Es gibt keine Angst vor Kriminalität oder Bequemlichkeit vor der Show.

Demo-Avatar Alicia Keyes

Grundlegendes Medienobjekt

Demo-Avatar John Doe Blank

John Doe

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

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.

Demo-Avatar John Doe Blank

Beispiel

<!-- Left-aligned -->
<div class="media">
  <div class="media-left">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">John Doe</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Right-aligned -->
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">John Doe</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="media-right">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
</div>

Beispiel erklärt

Verwenden Sie ein <div>-Element mit der .mediaKlasse, um einen Container für Medienobjekte zu erstellen.

Verwenden Sie die .media-leftKlasse, um das Medienobjekt (Bild) links auszurichten, oder die .media-rightKlasse, um es rechts auszurichten.

Text, der neben dem Bild erscheinen soll, wird innerhalb eines Containers mit class=" media-body" platziert.

Zusätzlich können Sie .media-headingfür Überschriften verwenden.



Obere, mittlere oder untere Ausrichtung

Das Medienobjekt kann auch oben, in der Mitte oder unten an der Klasse media-top, media-middleoder ausgerichtet werden media-bottom:

Demo-Avatar John Doe Blank

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.

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.


Demo-Avatar John Doe Blank

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.

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.


Demo-Avatar John Doe Blank

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.

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">
  <div class="media-left media-top">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Top</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media middle -->
<div class="media">
  <div class="media-left media-middle">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Middle</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media bottom -->
<div class="media">
  <div class="media-left media-bottom">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Bottom</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

Medienobjekte verschachteln

Medienobjekte können auch verschachtelt werden (ein Medienobjekt in einem Medienobjekt):

Beispiel

Demo-Avatar John Doe Blank

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.

Demo-Avatar John Doe Green

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.

Demo-Avatar John Doe Blue

John Doe Gepostet am 21. 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.


Ein weiteres Beispiel für Verschachtelung

Beispiel

Demo-Avatar John Doe Blank

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.

Demo-Avatar John Doe Green

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.

Demo-Avatar John Doe Blue

John Doe Gepostet am 21. 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.

Demo-Avatar Jane Doe Green

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.

Demo-Avatar Jane Doe Red

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