Maison > interface Web > tutoriel HTML > le corps du texte

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

零下一度
Libérer: 2017-07-20 15:11:40
original
1728 Les gens l'ont consulté

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;
}
Copier après la connexion
<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>
Copier après la connexion


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>
Copier après la connexion

<.>

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;
}
Copier après la connexion
<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>
Copier après la connexion


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;
}
Copier après la connexion
<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>
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal