Auf einer Webseite befindet sich das Bild links und der Inhalt ist rechts angeordnet, was ein sehr häufiger Effekt ist. Es ist auch ein Medienobjekt. Es ist ein abstrakter Stil, mit dem verschiedene Arten von Komponenten erstellt werden können. Die entsprechenden Versionsdateien im Bootstrap -Framework sind wie folgt:
Weniger: media.less
Sass: _media.scss
Medienobjekte erscheinen im Allgemeinen in Gruppen, und eine Gruppe von Medienobjekten enthält im Allgemeinen die folgenden Teile:
1. Medienobjektcontainer: Wird verwendet, um alle Inhalte von Medienobjekten aufzunehmen. Der Klassenname muss im Container verwendet werden. Medien
2. Objekt des Medienobjekts: Im Allgemeinen ist ein Bild und die Klasse media-objekt erforderlich.
3.. Das Thema des Medienobjekts: Es ist der Thema Inhalt des Medienobjekts. Es kann jedes Element sein und erfordert die Verwendung der Klasse.Media-Body
V.
Darüber hinaus werden im Bootstrap-Framework häufig Klassen. PULL-LINK und .PULL-Right verwendet, um die schwimmende Methode von Objekten in Medienobjekten zu steuern.
Hier sind ihr CSS -Quellcode:
.media, .media-body {Überlauf: versteckt; zoom: 1;}. medien, .media .media {margin-top: 15px;}. Medien: Erst-Kind {Margin-top: 0;}. Media-Object {Display: Block;}. 10px;}. Media> .pull-right {margin-links: 10px;}Medienstile sind relativ einfach. Stellen Sie einfach den Abstand zwischen ihnen fest.
Schauen wir uns die Verwendung von Medienobjekten an:
<h1> Standard -Medienobjekt </h1> <div> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> Mondlicht im Lotus -Teich </h4> <div> Ich bin heutzutage ziemlich unruhig. Ich saß heute Abend auf dem Hof, um die kühle Luft zu genießen, und plötzlich erinnerte ich mich an den Lotus -Teich, den ich jeden Tag ankam. In dieser Vollmondnacht sollte ich immer anders aussehen. Der Mond stieg allmählich auf und das Lachen der Kinder auf der Straße außerhalb der Wand ... </div> </div> </div>
Verschachtelung von Medienobjekten
Bootstrap-Medienobjekte nisten, platzieren Sie einfach eine andere Medienobjektstruktur in den Körper des Medienobjekts (.media-Body). Schauen wir uns die Anwendung des Verschachtelns von Medienobjekten an
<h1> Vernetzung von Standardmedienobjekten </h1> <div> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> Mondlicht im Lotus -Teich </h4> <div> Mondlicht gießt leise auf diese Blätter und Blumen wie Fließen von Wasser. Ein dünner blauer Nebel schwebte im Lotus -Teich. Die Blätter und Blumen scheinen in Milch gewaschen worden zu sein; Sie sind auch wie mit Schleier bedeckte Träume. Obwohl es sich um einen Vollmond handelt, befindet sich eine schwache Wolke am Himmel, so dass sie nicht hell leuchten kann; Aber ich denke, dies ist nur der Vorteil - ein tiefer Schlaf ist unverzichtbar und ein Nickerchen hat einen einzigartigen Geschmack. </div> <div> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> Hier sind die verschachtelten Content1111 </h4> <div> Vier Seiten des Lotus -Teichs, weit, nahe, hoch und niedrig, Bäume und Weide sind am meisten. Diese Bäume umgab einen Lotus -Teich; Sie befanden sich nur auf der Seite des Pfades, ein paar Lücken, als ob sie speziell für das Mondlicht übrig waren. </div> <div> <a href = "#"> <img src = "img/5.jpg"> </a> <div> <h4> Hier ist ein verschachtelter Inhalt 2222 </h4> <div> Es gibt einen entfernten Berg auf den Treetops, und es ist nur ein wenig nachlässig. Es lagen auch ein oder zwei Straßenlaternen aus den Rissen im Baum. Was locklos war, waren die Augen der durstigen schlafenden Leute. Das lebendigste Ding in dieser Zeit ist das Geräusch von Zikaden auf den Bäumen und das Geräusch von Fröschen im Wasser; Aber die Aufregung gehört ihnen, und ich habe nichts </div> </div> </div> </div> </div> </div> </div>
Die Effekte sind wie folgt:
Medienobjektliste
Das Bootstrap -Framework bietet einen Display -Effekt der Medienobjektliste. Beim Schreiben von Strukturen können Sie das Tag UL verwenden und den Klassennamen in der Tag ul.media-Liste hinzufügen und die Klasse auf dem Tag ul.media verwenden.
Zum Beispiel:
<h1> Medienobjektliste </h1> <ul> <li> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> Medienobjektliste 111 </h4> <div> entlang des Lotus -Teiches, es ist eine gewaltige kleine Kohlungschipstraße. Dies ist eine abgelegene Straße; tagsüber gehen nur wenige Menschen, die nachts noch einsamer sind. Um den Lotus -Teich wachsen viele Bäume und sie sind depressiv (2). Am Straßenrand befanden sich Weiden und einige Bäume mit unbekannten Namen. In einer Nacht ohne Mondlicht war die Straße düster und ein wenig Angst vor Menschen. Heute Abend war es sehr gut, obwohl das Mondlicht immer noch schwach war. </div> </div> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> <div> <h4> Medienobjektliste 222 </h4> <div> Ich war der einzige auf der Straße, der mit meinen Händen hinter meinem Rücken ging. Diese Welt scheint meine zu sein; Ich habe auch das Gefühl, ich bin jenseits meines üblichen Selbst und bin in eine andere Welt eingetreten. Ich liebe Aufregung und Ruhe; Ich liebe es, in Gruppen zu leben und allein zu sein. Wie heute Abend können Sie sich unter diesem riesigen Mond an irgendetwas vorstellen und an nichts denken, und Sie werden das Gefühl haben, dass Sie eine freie Person sind. </div> </div> </li> <li> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> Medienobjektliste 333 </h4> <div> Was Sie tagsüber tun müssen und sagen, kann jetzt ignoriert werden. Dies ist die Schönheit, alleine zu sein, und ich werde den endlosen Lotus -Duft und den mondonten Mondlicht genießen. Über dem gewundenen Lotus -Teich liegen die Blätter der Felder (4) überall. Die Blätter sind sehr hoch, wie der Rock eines hohen Tänzers. Unter den Blättern sind einige weiße Blüten sporadisch gepunktet, einige blühen anmutig und einige spielen schüchtern mit Blumen. Genau wie Perlen, Sterne am blauen Himmel und Schönheit, nur aus dem Bad. Die Brise bringt Duftstrahlen, als ob die Stille des Singens auf den hohen Gebäuden in der Ferne. </div> </div> </li> <li> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> Medienobjektliste 444 </h4> <div> Ich erinnerte mich plötzlich an die Geschichte, die Lotus ausgewählt hat. Lotus Picking ist ein alter Brauch in Jiangnan. Es scheint sehr früh zu existieren, aber es war in den sechs Dynastien wohlhabend; Wir können es grob aus der Poesie erfahren. Diejenigen, die Lotus ausgewählt hatten, waren junge Frauen, die in kleinen Booten dort waren und erotische Lieder sangen (14). Unnötig zu erwähnen, dass es viele Leute gibt, die Lotus auswählen. Es gibt auch Leute, die Lotus auswählen. Es war eine lebhafte Saison und eine Romantik (15). Kaiser Yuan von Liang (16) sagte es gut in "The Lotus Picking Fu":. </div> </div> </li> </ul>
Die Effekte sind wie folgt: