Bootstrap Multimedia-Objekte (Media Object)

In diesem Kapitel erklären wir Media Objects in Bootstrap, wie z. B. Bilder, Videos, Audio usw. Die Stile von Media Objects können verwendet werden, um verschiedene Arten von Komponenten zu erstellen (wie Blog-Kommentare). Wir können eine Kombination aus Text und Bildern in den Komponenten verwenden, und die Bilder können links- oder rechtsbündig ausgerichtet werden. Media Objects können verwendet werden, um Medienobjekte und Text mit weniger Code zusammenzuführen.

Schauen wir uns als Nächstes zuerst ein Beispiel an:

Das Ergebnis wird unten angezeigt:

Beispielanalyse

Fügen Sie dem <div>-Element hinzu:.mediaeine Klasse, um ein Media-Objekt zu erstellen.

Verwenden Sie.media-lefteine Klasse, damit das Media-Objekt (Bild) links ausgerichtet wird; ebenso.media-rightbewirkt eine Klasse die rechte Ausrichtung.

Der Textinhalt wird in class=media-bodyim div platziert; wenn das Bild links ausgerichtet ist, platzieren Sie es vor class=media-bodydavor; wenn das Bild rechts ausgerichtet ist, platzieren Sie es nach class=media-bodydanach.

Außerdem können Sie auch.media-headingeine Klasse verwenden, um den Titel festzulegen.

Schauen wir uns das folgende Beispiel für die Media-Objekt-Liste .media-list an:

Ausrichtung Oben, Unten, Mitte

Das Ergebnis wird unten angezeigt:

Verschachtelte Media-Objekte

Ein Media-Objekt kann auch mehrere Media-Objekte im Inneren enthalten: