Una figura se usa cuando se necesita mostrar una parte del contenido, generalmente imágenes con una leyenda opcional. La clase de figura en Bootstrap se usa para agregar estilo a los elementos de figura predeterminados.
- La clase base .figure se usa para indicar un elemento de figura.
- El .figure-img se usa para indicar la imagen utilizada en el elemento de figura.
- El .figure-caption se puede usar para mostrar un título debajo de la figura.
Ejemplo : usar la clase .figure con una imagen de muestra.
<!DOCTYPE html> <html> <head> <!-- Including Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <title>Figures in Bootstrap</title> </head> <body> <div class="container"> <h1>Figures in Bootstrap</h1> <figure class="figure"> <img class="figure-img" src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" > </figure> </body> </html>
Producción:
Ejemplo : usar la clase .figure-caption para mostrar un título debajo de la imagen. Esta clase se usa con la etiqueta <figcaption> .
<!DOCTYPE html> <html> <head> <!-- Add Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <title>Figures in Bootstrap</title> </head> <body> <div class="container"> <h1>Figures in Bootstrap</h1> <figure class="figure"> <img class="figure-img" src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" > <figcaption class="figure-caption"> Caption for the above image. </figcaption> </figure> </body> </html>
Producción:
Referencia : https://getbootstrap.com/docs/4.0/content/figures/
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA