En este artículo, aprenderemos cómo hacer diferentes formas de imágenes usando Bootstrap y también entenderemos su implementación a través de los ejemplos. Bootstrap ofrece diferentes clases de imágenes para mejorar su apariencia y también para que respondan. Hacer que una imagen responda significa que debe escalar de acuerdo con su elemento principal. Es decir, el tamaño de la imagen no debe desbordar su elemento principal y crecerá y se reducirá de acuerdo con el cambio en el tamaño de su elemento principal sin perder su relación de aspecto. Discutiremos las diferentes clases disponibles en Bootstrap para imágenes.
En Bootstrap 4, la imagen se muestra usando una etiqueta <img> en diferentes formas y esquinas. Estas formas y esquinas se pueden implementar usando clases. Las diferentes formas y esquinas que se pueden usar para imágenes en bootstrap se detallan a continuación:
- Esquinas redondeadas
- Circulo
- Miniatura
- Imagen de alineación
Aquí, hemos utilizado el enlace CDN de Bootstrap 4 que se puede obtener fácilmente desde su sitio web oficial .
Enlaces CDN de Bootstrap:
Copie y pegue la hoja de estilo dada <link> dentro de la etiqueta <head> antes de cargar todos los demás archivos CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
Para usar la funcionalidad de Javascript, podemos usar el siguiente enlace CDN para javascript.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com /ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap .min.js”></script>
Utilizaremos el enlace CDN anterior para implementarlo para crear diferentes formas de imágenes.
Esquinas redondeadas: en Esquinas redondeadas, la imagen mostrada tendrá sus esquinas redondeadas. La clase .rounded agrega esquinas redondeadas a una imagen. Esta clase se usa con la etiqueta <img>.
Sintaxis:
<img src="image_source" class="rounded" alt="description">
Ejemplo 1: este ejemplo ilustra el uso de la clase .rounded en Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> </head> <body> <center> <h1 class="text-success">GeeksForGeeks</h1> <h4 class="text-secondary">Rounded Corners</h4> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png" class="rounded" alt="GFG" width="150" height="150" /> </center> </body> </html>
Salida : las esquinas de la imagen que se muestran en la salida están redondeadas.
Círculo: la clase .rounded-circle se usa para crear la imagen de forma circular.
Sintaxis:
<img src="image_source" class="rounded-circle" alt="description">
Ejemplo 2: este ejemplo ilustra el uso de la clase .rounded-circle en Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> </head> <body> <center> <h2 class="text-success"> GeeksForGeeks </h2> <h4 class="text-secondary"> Circle Image </h4> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png" class="rounded-circle" alt="GFG" width="150" height="150" /> </center> </body> </html>
Salida: La imagen se muestra en la salida, es una imagen circular.
Miniatura: Una miniatura es una imagen pequeña que representa una imagen más grande. La clase .img-thumbnail se utiliza para crear imágenes en miniatura (con bordes).
Sintaxis:
<img src="image_source" class="img-thumbnail"
alt="description">
Ejemplo 3: Este ejemplo ilustra el uso de la clase .img-thumbnail en Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> </head> <body> <center> <h2 class="text-success"> GeeksForGeeks </h2> <h4 class="text-secondary"> Thumbnail Image </h4> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png" class="img-thumbnail" alt="GFG" width="150" height="150" /> </center> </body> </html>
Salida: la imagen mostrada está rodeada por un borde.
Alineación de imagen: se utiliza para alinear imágenes a la izquierda y a la derecha. La clase .float-left y .float-right se usa para establecer la alineación izquierda y derecha de la imagen.
Sintaxis:
<img src="image_source" class="float-left/float-right"
alt="description">
Ejemplo 4: este ejemplo ilustra el uso de la clase .float-left o .float-right que se utilizará para establecer la alineación izquierda y derecha de la imagen en Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> </head> <body> <center> <h2 class="text-success"> GeeksForGeeks </h2> <h4 class="text-secondary"> Aligning Image </h4> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png" class="float-left" alt="GFG" width="200" height="200" /> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png" class="float-right" alt="GFG" width="200" height="200" /> </center> </body> </html>
Salida: A partir de la salida, una imagen se alinea en el lado izquierdo y otra se alinea en el lado derecho.
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA