Ausführliche Erläuterung der Bootstrap-Medienobjekte

In diesem Kapitel erklären wir das Multimediaobjekt (Media Object) in Bootstrap. Diese abstrakten Objektstile werden zum Erstellen verschiedener Arten von Komponenten verwendet (z. B. Blog-Kommentare). Wir können gemischte Grafiken und Texte in den Komponenten verwenden und die Bilder können links- oder rechtsbündig ausgerichtet sein. Medienobjekte können verwendet werden, um Medienobjekte und Text mit weniger Code zu mischen.

Das schlanke Markup und die einfache Erweiterbarkeit von Medienobjekten werden durch die Anwendung von Klassen auf einfaches Markup erreicht. Sie können dem HTML-Tag die folgenden zwei Formen hinzufügen, um das Medienobjekt festzulegen:

.media: Mit dieser Klasse können Multimedia (Bilder, Videos, Audio) im Medienobjekt links oder rechts davon verschoben werden Der Inhaltsblock.

.media-list: Wenn Sie eine Liste benötigen, in der jedes Element Teil einer ungeordneten Liste ist, können Sie diese Klasse verwenden. Kann für Kommentarlisten und Artikellisten verwendet werden.

Standardstil

Medienobjekte werden im Allgemeinen in Gruppen angezeigt, und eine Gruppe von Medienobjekten umfasst häufig die folgenden Teile:

☑ Medienobjektcontainer: Verwenden Sie häufig „Medien“. Der Klassenname gibt an, dass er zum Unterbringen aller Inhalte des Medienobjekts verwendet wird

　☑ Das Objekt des Medienobjekts: Wird oft durch „Medienobjekt“ ausgedrückt, es ist das Objekt im Medienobjekt, oft a Bild

　☑ Der Hauptkörper des Medienobjekts: Wird oft durch „Medienkörper“ ausgedrückt, der der Hauptinhalt im Medienobjekt ist. Es kann sich um ein beliebiges Element handeln, häufig um den Inhalt auf der Seite des Bildes

　☑ Der Titel des Medienobjekts: Verwenden Sie häufig „Medienüberschrift“, einen Titel, der zur Beschreibung des Objekts verwendet wird.

Zusätzlich zu den oben genannten vier Teilen. „media-left“ oder „media“ werden im Bootstrap-Framework häufig verwendet, um den Floating-Modus von Objekten in Medienobjekten zu steuern.

[Hinweis] In der HTML-Struktur sollte .media-right platziert werden nach .media-body

Medienobjektstile sind relativ einfach, legen Sie einfach den Abstand zwischen ihnen fest

.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-left {
  margin-right: 10px;
}.media-right {
  margin-left: 10px;
}

<div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div></div></div>

Verschachtelt

In Kommentarsystemen besteht häufig Bedarf an verschachtelten Medienobjekten. Auch das Medienobjekt im Bootstrap-Framework verfügt über eine solche Funktion. Sie müssen lediglich eine weitere Medienobjektstruktur innerhalb des Medienobjekts „media-body“ platzieren

<div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div><div class="media"><a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/100x100" alt="..."></a><div class="media-body"><h4 class="media-heading">我是小火柴</h4><div>好巧啊，我也叫小火柴</div><div class="media"><a class="pull-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>是的</div></div></div></div></div></div></div><div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div>

Ausrichtung

Bilder oder andere Medientypen können oben, in der Mitte oder unten ausgerichtet werden. Standardmäßig ist die Ausrichtung oben. Stellen Sie

.media-middle {vertical-align: middle;
}.media-bottom {vertical-align: bottom;
}

<div class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div><div class="media"><a class="media-left media-middle" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div><div class="media"><a class="media-left media-bottom" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div>

über .media-middle oder .media-bottom >Medienobjektliste

Das Verschachteln von Medienobjekten ist nur einer der einfachen Anwendungseffekte in Medienobjekten. In vielen Fällen werden wir auch auf eine Liste stoßen, und jedes Listenelement sieht einem Medienobjekt ähnlich. Das Bootstrap-Framework bietet einen Listenanzeigeeffekt. Sie können ul beim Schreiben der Struktur verwenden, den Klassennamen „media-list“ zu ul hinzufügen und „media“ für li

Medienobjektliste verwenden Keine besondere Verarbeitung im Stil, nur das Setzen des linken Abstands der Liste auf 0 und das Entfernen der Elementlistensymbole

.media-list {
  padding-left: 0;
  list-style: none;
}

<ul class="media-list">
  <li class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div>
  </li>
  <li class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div></div>
  </li>  </ul>

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Bootstrap-Medienobjekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!