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 esquina de etiqueta de interfaz de usuario semántica del marco de interfaz de usuario semántica. El tipo de esquina de etiqueta de interfaz de usuario semántica se utiliza para agregar la posición de la etiqueta a la esquina de un elemento.
Clases de tipo de esquina de etiqueta de interfaz de usuario semántica:
- esquina izquierda: esta clase se usa para agregar etiquetas a la esquina izquierda.
- esquina derecha: esta clase se usa para agregar etiquetas a la esquina derecha.
Ejemplo 1: este ejemplo describe los usos del tipo de esquina de etiqueta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Corner 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 center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Label Corner Type</h3> <div class="ui four column grid"> <div class="column"> <div class="ui fluid image"> <a class="ui left corner label"> <i class="edit icon"></i> </a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> </div> </div> <div class="column"> <div class="ui fluid image"> <a class="ui right corner label"> <i class="save icon"></i> </a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> </div> </div> <div class="column"> <div class="ui fluid image"> <a class="ui left corner label"> <i class="eraser icon"></i> </a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png"> </div> </div> <div class="column"> <div class="ui fluid image"> <a class="ui right corner label"> <i class="cut icon"></i> </a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png"> </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos del tipo de esquina de etiqueta de interfaz de usuario semántica con variaciones de color y tamaño.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Corner 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 center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Label Corner Type</h3> <div class="ui four column grid"> <div class="column"> <div class="ui fluid image"> <a class="ui left corner green large label"> <i class="edit icon"></i> </a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> </div> </div> <div class="column"> <div class="ui fluid image"> <a class="ui right corner red tiny label"> <i class="save icon"></i> </a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> </div> </div> <div class="column"> <div class="ui fluid image"> <a class="ui left corner yellow big label"> <i class="eraser icon"></i> </a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png"> </div> </div> <div class="column"> <div class="ui fluid image"> <a class="ui right corner blue mini label"> <i class="cut icon"></i> </a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png"> </div> </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/label.html#corner
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA