Implementierung von Bootstrap-Medienobjekten_Javascript-Fähigkeiten

Auf einer Webseite ist es ein sehr häufiger Effekt, Bilder auf der linken Seite und Inhalte auf der rechten Seite zu haben. Es handelt sich auch um einen abstrakten Stil, der zum Erstellen verschiedener Arten von Komponenten verwendet werden kann das Bootstrap-Framework, andere Die entsprechenden Versionsdateien lauten wie folgt:

LESS: media.less

SASS: _media.scss

Medienobjekte erscheinen im Allgemeinen in Gruppen. Eine Gruppe von Medienobjekten umfasst im Allgemeinen die folgenden Teile:

1. Container von Medienobjekten: Wird zum Speichern aller Inhalte von Medienobjekten verwendet. Der Klassenname .media muss für den Container verwendet werden

2. Das Objekt des Medienobjekts: Normalerweise ein Bild, Sie müssen die Klasse .media-object verwenden

3. Der Hauptinhalt des Medienobjekts, der ein beliebiges Element sein kann. Sie müssen die Klasse .media-body verwenden.

4. Der Titel des Medienobjekts: ein Titel, der zur Beschreibung des Medienobjekts verwendet wird. Die Klasse .media-heading

ist erforderlich.

Darüber hinaus werden die Klassen .pull-left und .pull-right häufig im Bootstrap-Framework verwendet, um den Floating-Modus von Objekten in Medienobjekten zu steuern

Das Folgende ist ihr CSS-Quellcode:

.media,
.media-body {
overflow: hidden;
zoom: 1;
}
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media-object {
display: block;
}
.media-heading {
margin: 0 0 5px;
}
.media > .pull-left {
margin-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
}

Medienstile sind relativ einfach. Legen Sie einfach den Abstand zwischen ihnen fest

Werfen wir einen Blick auf die Verwendung von Medienobjekten:

<h1>默认媒体对象</h1>
<div class="media">
<a href="#" class="pull-right">
<img class="media-object" src="img/1.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">荷塘月色</h4>
<div>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的夜里，总该另有一 番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑……</div>
</div>
</div>

Verschachtelung von Medienobjekten

Bootstrap-Medienobjektverschachtelung: Platzieren Sie einfach eine andere Medienobjektstruktur im Körper des Medienobjekts (.media-body). Werfen wir einen Blick auf die Verwendung der Verschachtelung von Medienobjekten

<h1>默认媒体对象的嵌套</h1>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/3.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">荷塘月色</h4>
<div>月光如流水一般，静静地泻在这一片片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。</div>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/4.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">这里是嵌套内容1111</h4>
<div>荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住；只在小路一旁，漏着几段空隙，像是特为月光留下的。</div>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/5.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">这里是嵌套内容2222</h4>
<div>树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声；但热闹是它们的，我什么也没有</div>
</div>
</div>
</div>
</div>
</div>
</div>

Der Effekt ist wie folgt:

Liste der Medienobjekte

Das Bootstrap-Framework bietet einen Anzeigeeffekt für Medienobjektlisten. Beim Schreiben der Struktur können Sie das Tag ul verwenden, den Klassennamen .media-list zum Tag ul hinzufügen und die Klasse .media für das Tag li verwenden

Zum Beispiel:

<h1>媒体对象列表</h1>
<ul class="media-list">
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/1.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表111</h4>
<div>沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四周，长着许多树，蓊蓊（wěng）郁郁（2）的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/2.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表222</h4>
<div>路上只我一个人，背着手踱（duó）着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱宁静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/3.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表333</h4>
<div>白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。曲曲折折的荷塘上面，弥望（3）的是田田（4）的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/4.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表444</h4>
<div>忽然想起采莲的事情来了。采莲是江南的旧俗，似乎很早就有，而六朝时为盛；从诗歌里可以约略知道。采莲的是少年的女子，她们是荡着小船，唱着艳歌（14）去的。采莲人不用说很多，还有看采莲的人。那是一个热闹的季节，也是一个风流（15）的季节。梁元帝（16）《采莲赋》里说得好：。</div>
</div>
</li>
</ul>

Der Effekt ist wie folgt: