Comment configurer des images sur bootstrap

Bootstrap a cinq façons courantes d'utiliser des images: en utilisant des classes d'images (comme IMG-FLUID) pour obtenir une mise à l'échelle d'image réactive. Utilisez des services publics (tels que W-, MX-, Routed- *) pour personnaliser de manière flexible les styles d'image. Utilisez des objets multimédias pour aligner entre les images et le texte. Utilisez des groupes d'images pour créer un ensemble miniature réactif. Utilisez des espaces réservés pour afficher le contenu de substitution avant le chargement de l'image.

Comment configurer des images à l'aide de bootstrap

Bootstrap fournit de nombreuses classes et utilitaires pour vous aider à style et à placer des images dans les pages Web. Pour configurer une image, vous pouvez utiliser l'une des méthodes suivantes:

1. Utilisez des classes d'images

 <code class="html"><img  class="img-fluid lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Comment configurer des images sur bootstrap" ></code>

• img-fluid applique des styles d'image réactifs pour redimensionner et fluide automatiquement à toutes les tailles de fenêtre.

2. Utilisez l'utilitaire

En plus des classes d'images, Bootstrap fournit également les utilitaires suivants:

• w-* : Définissez la largeur de l'image, par exemple: w-25 (25% de largeur), w-50 (50% de largeur).
• mx-* et my-* : Réglez les marges gauche et droite et supérieure et inférieure de l'image, par exemple: mx-auto (centré horizontalement).
• rounded et rounded-* : Ajoutez des coins arrondis à l'image, par exemple: rounded-circle .

 <code class="html"><img  class="w-50 mx-auto rounded lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Comment configurer des images sur bootstrap" ></code>

3. Utilisez des objets multimédias

• Les objets multimédias vous permettent d'aligner des images avec du texte ou d'autres éléments.

   <code class="html"><div class="media"> <img  class="mr-3 lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Comment configurer des images sur bootstrap" > <div class="media-body"> <p>图像描述...</p> </div> </div></code>

4. Utilisez des groupes d'images

• Les groupes d'images vous permettent de créer un ensemble réactif de miniatures.

   <code class="html"><div class="row"> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt="Comment configurer des images sur bootstrap" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="Comment configurer des images sur bootstrap" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png" data-src="image3.jpg" class="lazy" alt="Comment configurer des images sur bootstrap" > </div> </div></code>

5. L'image d'image

• Les lieux d'image sont utilisés pour afficher un contenu alternatif avant le chargement de l'image.

   <code class="html"><img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Responsive image"> <div class="placeholder-glow"> <span class="placeholder col-12"></span> </div></code>

En utilisant ces méthodes, vous pouvez facilement configurer et styliser des images avec Bootstrap pour créer de belles pages Web.

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!