Quels sont les objets médias implémentés par bootstrap ?

L'objet multimédia Bootstrap est un type de composant avec une disposition spéciale, utilisé pour concevoir l'effet de graphiques et de texte mixtes ; bootstrap fournit deux types d'objets multimédia, à savoir les médias et la liste des médias. Le média est utilisé pour afficher un seul objet et une liste de médias. . Utilisé pour afficher plusieurs objets.

L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 5, ordinateur DELL G3

Quels sont les objets média implémentés par bootstrap

L'objet média est un type de composant avec une disposition particulière, utilisés pour concevoir des effets graphiques et textuels mixtes, ils se composent principalement d’une image et d’un texte flottant vers la gauche ou la droite.

Bootstrap fournit deux types d'objets multimédias : média (.media) et liste de médias (.media-list). Les médias sont utilisés pour afficher un seul objet et les listes de médias sont utilisées pour afficher plusieurs objets.

Médias

Par défaut, les médias se composent d'un objet multimédia (tel qu'une image, une vidéo, un audio, etc.) et d'un contenu multimédia flottant vers la gauche ou la droite. Au sein d’un média, un autre média peut être imbriqué.

Dans la structure HTML, un média se compose de 3 parties : .media crée le conteneur média, .media-object crée l'objet média et .media-body crée le contenu multimédia (où .media-heading crée le titre du média). médias). Par exemple :

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Les objets média apparaissent généralement en groupes. Un groupe d'objets média comprend généralement les parties suivantes :

1 Conteneur d'objets média : utilisé pour accueillir tout le contenu des objets média. utilisé sur le conteneur

2. L'objet de l'objet média : généralement une image, vous devez utiliser la classe .media-object

3 Le corps de l'objet média : c'est le contenu principal de l'objet média, il peut s'agir de n'importe quel élément, vous devez utiliser la classe .media-body

4 , Le titre de l'objet média : un titre utilisé pour décrire l'objet média, la classe .media-heading doit être utilisée

De plus , les classes .pull-left et .pull-right sont souvent utilisées dans le framework bootstrap pour contrôler le mode flottant des objets dans les objets multimédias

Recommandations associées : Tutoriel bootstrap

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!