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 puntero de etiqueta de interfaz de usuario semántica del marco de interfaz de usuario semántica. El tipo de puntero de etiqueta de interfaz de usuario semántica se utiliza para agregar un elemento de etiqueta que apunta al siguiente.
Clases de tipo de señalización de etiquetas de interfaz de usuario semántica:
- apuntando: esta clase se usa para agregar etiquetas que apuntan a la posición predeterminada.
- apuntando hacia abajo: esta clase se usa para agregar etiquetas que apuntan a la posición de abajo.
- apuntando a la izquierda: esta clase se usa para agregar etiquetas que apuntan a la posición izquierda.
- apuntando a la derecha: esta clase se usa para agregar etiquetas que apuntan a la posición correcta.
Sintaxis:
<form class="ui fluid form">
<div class="field">
<input type="text" placeholder="First name">
<div class="ui pointing label">
...
</div>
</div>
...
</form>
Ejemplo 1: este ejemplo describe los usos del tipo de señalización de etiquetas de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Pointing 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 Pointing Type</h3> <form class="ui fluid form"> <div class="field"> <div class="ui pointing below label"> Please Enter Your Username </div> <input type="text" placeholder="Username"> </div> <br> <div class="field" placeholder="Password"> <input type="password"> <div class="ui pointing label"> Please Enter Your Password </div> </div> </form> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos del tipo de señalización de etiquetas de interfaz de usuario semántica con variaciones de color y tamaño.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Pointing 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 Pointing Type</h3> <form class="ui fluid form"> <div class="field"> <div class="ui pointing below green label"> Please Enter Your Username </div> <input type="text" placeholder="Username"> </div> <br> <div class="field" placeholder="Password"> <input type="password"> <div class="ui pointing blue big label"> Please Enter Your Password </div> </div> </form> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/label.html#pointing
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA