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