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