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 etiqueta de etiqueta de interfaz de usuario semántica del marco de interfaz de usuario semántica. El tipo de etiqueta de etiqueta de interfaz de usuario semántica se utiliza para agregar una etiqueta como una etiqueta al elemento.
Clase de tipo de etiqueta de etiqueta de interfaz de usuario semántica:
- etiqueta: esta clase se utiliza para crear una etiqueta como una etiqueta.
Sintaxis:
<a class="ui tag label"> Content... </a>
Ejemplo 1: este ejemplo describe los usos del tipo de etiqueta de etiqueta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Tag 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 Tag Type</h3> <div class="ui tag label"> <i class="desktop icon"></i> Desktop </div> <div class="ui tag label"> <i class="download icon"></i> Download </div> <div class="ui tag label"> <i class="headphones icon"></i> Headphones </div> <div class="ui tag label"> <i class="keyboard icon"></i> Keyboard </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos del tipo de etiqueta de etiqueta de interfaz de usuario semántica con variaciones de color y tamaño.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Tag 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 Tag Type</h3> <div class="ui green tag small label"> <i class="desktop icon"></i> Desktop </div> <div class="ui olive tag label"> <i class="download icon"></i> Download </div> <div class="ui brown tag large label"> <i class="headphones icon"></i> Headphones </div> <div class="ui teal tag big label"> <i class="keyboard icon"></i> Keyboard </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/label.html#tag
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA