La interfaz de usuario semántica es un marco que se utiliza para crear una excelente interfaz de usuario. Es un marco de código abierto que utiliza CSS y jQuery. 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.
Se utiliza una etiqueta de interfaz de usuario semántica para crear clasificaciones de contenido significativas. En este artículo, aprenderemos a usar el tipo de imagen de etiqueta de interfaz de usuario semántica del marco de interfaz de usuario semántica. El tipo de imagen de etiqueta de interfaz de usuario semántica se usa para agregar etiquetas que se pueden formatear para enfatizar una imagen.
Clase de tipo de imagen de etiqueta de interfaz de usuario semántica:
- imagen: esta clase se utiliza para agregar imágenes al elemento de etiqueta.
Ejemplo 1: este ejemplo describe los usos del tipo de imagen de etiqueta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Image Type </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Label Image Type</h3> <div class="ui image label"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> GeeksforGeeks </div> <div class="ui image label"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> HTML </div> <div class="ui image label"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> CSS </div> <div class="ui image label"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png"> Bootstrap </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos del tipo de imagen de etiqueta de interfaz de usuario semántica con variaciones de tamaño.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Image Type </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Label Image Type</h3> <div class="ui image small label"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> GeeksforGeeks </div> <div class="ui image label"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> HTML </div> <div class="ui image large label"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> CSS </div> <div class="ui image big label"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png"> Bootstrap </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/label.html#image
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA