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. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
En la etiqueta Semantic UI, se ofrecen 4 tipos de Variaciones. Estos son Básico, Circular, Coloreado, Tamaño. Con esta etiqueta básica , podemos crear varias etiquetas, incluidas imágenes, detalles, etiquetas de señalización, etc. Una etiqueta básica puede reducir su complejidad.
Clase de variaciones básicas de etiqueta de interfaz de usuario semántica:
- básico: esta clase se utiliza para crear una etiqueta básica en el elemento.
Sintaxis:
<a class="ui basic label ...">
...
</a>
Ejemplo 1: en este ejemplo, crearemos una etiqueta básica y una etiqueta de señalización mediante la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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 Basic Variations </strong> <br /> Basic: <a class="ui basic label">GeeksforGeeks</a><br /> Pointing: <a class="ui pointing basic green label">GeeksforGeeks</a> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, crearemos una etiqueta de imagen básica utilizando la etiqueta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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 Basic Variations </strong> <br /> <a class="ui basic green image label"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> GeeksforGeeks </a> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/label.html#basic
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA