Explication détaillée des objets multimédias Bootstrap

Dans ce chapitre, nous expliquerons l'objet multimédia (Media Object) dans Bootstrap. Ces styles d'objets abstraits sont utilisés pour créer différents types de composants (tels que des commentaires de blog). Nous pouvons utiliser des graphiques et du texte mixtes dans les composants, et les images peuvent être alignées à gauche ou à droite. Les objets multimédias peuvent être utilisés pour mélanger des objets multimédias et du texte avec moins de code.

Le balisage léger et l'extensibilité facile des objets multimédias sont obtenus en appliquant des classes à un balisage simple. Vous pouvez ajouter les deux formulaires suivants à la balise HTML pour définir l'objet média :

.media : Cette classe permet de faire flotter le multimédia (images, vidéos, audio) dans l'objet média à gauche ou à droite de le bloc de contenu.

.media-list : Si vous avez besoin d'une liste où chaque élément fait partie d'une liste non ordonnée, vous pouvez utiliser cette classe. Peut être utilisé pour les listes de commentaires et les listes d’articles.

Style par défaut

Les objets multimédias apparaissent généralement en groupes, et un groupe d'objets multimédias comprend souvent les parties suivantes :

☑ Conteneur d'objets multimédias : utilise souvent " "média" le nom de la classe indique qu'elle est utilisée pour accueillir tout le contenu de l'objet média

　☑ L'objet de l'objet média : souvent exprimé par "media-object", c'est l'objet dans l'objet média, souvent un image

　☑ Le corps principal de l'objet média : souvent exprimé par "media-body", qui est le contenu principal de l'objet média. Il peut s'agir de n'importe quel élément, souvent le contenu du côté de l'image.

　☑ Le titre de l'objet média : utilisez souvent "media-heading", qui est un titre utilisé pour décrire l'objet. Cette partie est facultative

En plus des quatre parties ci-dessus, "media-left" ou "media" sont souvent utilisés dans le framework Bootstrap. -right" pour contrôler le mode flottant des objets dans les objets multimédias

[Note] Dans la structure html, .media-right doit être placé. après .media-body

Les styles d'objets multimédia sont relativement relativement simples, il suffit de définir l'espacement entre eux

.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>

Imbriqués

Dans les systèmes de commentaires, il est souvent nécessaire d'avoir des objets multimédias imbriqués. L'objet média dans le framework Bootstrap a également une telle fonction. Il vous suffit de placer une autre structure d'objet média dans le corps de l'objet média "media-body"

<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>

<.>

Alignement

Les images ou autres types de médias peuvent être alignés en haut, au milieu ou en bas. La valeur par défaut est alignée en haut. Définissez

.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>

via .media-middle ou .media-bottom >Liste d'objets multimédia

L'imbrication d'objets multimédias n'est que l'un des effets d'application simples dans les objets multimédias. Dans de nombreux cas, nous rencontrerons également une liste, et chaque élément de la liste ressemble à un objet multimédia. Le framework Bootstrap fournit un effet d'affichage de liste. Vous pouvez utiliser ul lors de l'écriture de la structure, ajouter le nom de classe "media-list" à ul et utiliser "media" sur li

Liste d'objets multimédia, il y a pas beaucoup de traitement spécial dans le style, il suffit de définir l'espacement gauche de la liste à 0 et de supprimer les symboles de la liste d'éléments

.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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!