Bootstrap Multimedia-Objekte
In diesem Kapitel werden wir Bootstrap Multimedia-Objekte (Medien-Objekt) zu erklären. Diese abstrakten Objektstil verwendet, um verschiedene Arten von Komponenten erstellen (zum Beispiel: Blog-Kommentare), wir das Foto-Text in der Komponente verwenden können, kann das Bild gerechtfertigt gerechtfertigt oder rechts gelassen werden. Medienobjekte können mit weniger Code und Text Medienobjekte Gerangel erreicht werden.
Leichte Medienobjekt markiert Merkmal ist leicht durch die einfache Anwendung Tag Klasse zu erweitern zu erreichen. Sie können die folgenden zwei Formen in HTML-Tags hinzufügen, das Medienobjekt zu setzen:
- .media: Diese Klasse ermöglicht die Medienobjekte in den Multimedia (Bilder, Video, Audio) schwamm auf der linken oder rechten Inhaltsblock.
- .media-Liste: Wenn Sie eine Liste der verschiedenen Elemente müssen Teil der ungeordneten Liste ist, können Sie die Klasse.Kommentare können zur Liste und die Liste der Artikel verwendet werden.
Schauen wir uns die folgenden Informationen über die Standard-Medienobjekte .media Instanz einen Blick:
Beispiele
<Div class = "Medien">
<A class = "Pull-links" href = "#">
<img class = "media-Objekt" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "Medienobjekt">
</ A>
<Div class = "media-body">
<H4 class = "media-Rubrik"> Medientitel </ h4> Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. </ Div>
</ Div>
<Div class = "Medien">
<A class = "Pull-links" href = "#">
<img class = "media-Objekt" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "Medienobjekt">
</ A>
<Div class = "media-body">
<H4 class = "media-Rubrik"> Medientitel </ h4> Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. <Div class = "Medien">
<A class = "Pull-links" href = "#">
<img class = "media-Objekt" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "Medienobjekt">
</ A>
<Div class = "media-body">
<H4 class = "media-Rubrik"> Medientitel </ h4> Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. </ Div>
</ Div>
</ Div>
</ Div>
Versuchen »
Die Ergebnisse sind wie folgt:
Schauen wir uns die folgenden Beispiele der Liste der Medien aussehen von Objekten .media-Liste:
Beispiele
<Ul class = "media-Liste">
<Li class = "Medien">
<A class = "Pull-links" href = "#">
<img class = "media-Objekt" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generische Platzhalter Bild">
</ A>
<Div class = "media-body">
<H4 class = "media-Rubrik"> Medientitel </ h4>
<P> Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. </ P>
<! - Nested Medienobjekte ->
<Div class = "Medien">
<A class = "Pull-links" href = "#">
<img class = "media-Objekt" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generische Platzhalter Bild">
</ A>
<Div class = "media-body">
<H4 class = "media-Rubrik"> verschachtelte Medien Überschrift </ h4> Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. <! - Nested Medienobjekte ->
<Div class = "Medien">
<A class = "Pull-links" href = "#">
<img class = "media-Objekt" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generische Platzhalter Bild">
</ A>
<Div class = "media-body">
<H4 class = "media-Rubrik"> verschachtelte Medien Überschrift </ h4> Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. </ Div>
</ Div>
</ Div>
</ Div>
<! - Nested Medienobjekte ->
<Div class = "Medien">
<A class = "Pull-links" href = "#">
<img class = "media-Objekt" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generische Platzhalter Bild">
</ A>
<Div class = "media-body">
<H4 class = "media-Rubrik"> verschachtelte Medien Überschrift </ h4> Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. </ Div>
</ Div>
</ Div>
</ Li>
<Li class = "Medien">
<A class = "Pull-right" href = "#">
<img class = "media-Objekt" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generische Platzhalter Bild">
</ A>
<Div class = "media-body">
<H4 class = "media-Rubrik"> Medientitel </ h4> Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext. </ Div>
</ Li>
</ Ul>
Versuchen »
Die Ergebnisse sind wie folgt:
