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, las etiquetas dan descripciones a partes de contenido. En la etiqueta Semantic UI se ofrecen 4 tipos de Contenido. Estos son los tipos Detalle, Icono, Imagen y Enlace . El contenido detallado de la etiqueta de interfaz de usuario semántica se utiliza para mostrar los detalles con la etiqueta.
Clase de contenido de detalle de etiqueta de interfaz de usuario semántica:
- detalle: Esta clase se utiliza para hacer la etiqueta de detalle.
Sintaxis:
<a class="ui label">
...
<div class="detail">
...
</div>
</a>
Ejemplo 1: en este ejemplo, agregaremos un contenido de detalle de etiqueta mediante la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Label Detail Content</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic UI Label Detail Content </strong> <br/> <a class="ui label"> Site: <div class="detail">GeeksforGeeks</div> </a> </body> </html>
Producción:
Contenido de detalle de etiqueta de interfaz de usuario semántica
Ejemplo 2: en este ejemplo, agregaremos un contenido de detalle de etiqueta utilizando la interfaz de usuario semántica con color.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Label Detail Content</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic UI Label Detail Content </strong> <br/> <a class="ui green label"> Site: <div class="detail">GeeksforGeeks</div> </a> </body> </html>
Producción:
Contenido de detalle de etiqueta de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/label.html#detail
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA