Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
La interfaz de usuario semántica nos proporciona una manera muy fácil de diseñar imágenes. Ofrece imágenes en diferentes tipos, como una imagen normal y un enlace de imagen, y también en diferentes estados, como oculto, visible y también en diferentes variaciones y estados, e incluso muestra elementos en grupos. Los grupos de imágenes de interfaz de usuario semántica nos ayudan a mostrar un grupo de imágenes. En este artículo, aprenderemos sobre los grupos de imágenes de IU semántica junto con la implementación mediante código de ejemplo.
Semantic-UI Image Groups es una función que nos permite mostrar imágenes en grupos. Los elementos se pueden formatear de tal manera que todos los elementos presentes en el grupo tengan el mismo tamaño.
- Tamaño: Todas las imágenes mostradas tendrán el mismo tamaño. Simplemente podemos agregar las clases class .mini, .tiny, .small, .medium, .large, .big, .huge y .massive al grupo de imágenes con el tamaño de la imagen requerida.
Sintaxis: La siguiente es la sintaxis para un grupo de imágenes de tamaño pequeño. Cambie el nombre de la clase relacionado con el tamaño de la imagen requerida.
<div class="ui size images">
<img class="ui image" src="....">
<img class="ui image" src="....">
...
</div>
Ejemplo 1: dado que la clase que usamos es pequeña, podemos observar imágenes pequeñas en la salida.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Image Groups</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h2 class="ui header green"> Geeksforgeeks </h2> <strong>Semantic-UI Image Groups</strong> <br><br> <div class="ui tiny images"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220221210438/unnamed-300x300.jpg"> </div> </div> </center> </body> </html>
Producción:
Grupos de imágenes de interfaz de usuario semántica
Ejemplo 2: Dado que la clase que usamos es pequeña, podemos observar imágenes pequeñas en la salida.
HTML
<html> <head> <title>Semantic-UI Image Groups</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h2 class="ui header green">Geeksforgeeks</h2> <strong>Semantic-UI Image Groups</strong> <br><br> <div class="ui small images"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220221210438/unnamed-300x300.jpg"> </div> </div> </center> </body> </html>
Producción:
Grupos de imágenes de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/image.html#groups
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA