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 las variaciones de tamaño de etiqueta de la interfaz de usuario semántica del marco de la interfaz de usuario semántica. Las variaciones de tamaño de etiqueta de interfaz de usuario semántica se utilizan para agregar diferentes tamaños de elementos de etiqueta.
Clases de variaciones de tamaño de etiqueta de interfaz de usuario semántica:
- mini: Esta clase se utiliza para mostrar la etiqueta de tamaño mini.
- tiny: Esta clase se utiliza para mostrar la etiqueta de tamaño minúsculo.
- pequeño: Esta clase se utiliza para mostrar la etiqueta de tamaño pequeño.
- medium: Esta clase se utiliza para mostrar la etiqueta de tamaño mediano.
- grande: Esta clase se utiliza para mostrar la etiqueta de gran tamaño.
- big: Esta clase se utiliza para mostrar la etiqueta de gran tamaño.
- enorme: esta clase se utiliza para mostrar la etiqueta de gran tamaño.
- masivo: esta clase se utiliza para mostrar la etiqueta de tamaño masivo.
Sintaxis:
<div class="ui mini label">
Mini
</div>
Ejemplo 1: este ejemplo describe los usos de las variaciones de tamaño de etiqueta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Size Variations </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 Size Variations</h3> <a class="ui mini label">G</a> <a class="ui tiny label">e</a> <a class="ui small label">e</a> <a class="ui label">g</a> <a class="ui medium label">s</a> <a class="ui large label">f</a> <a class="ui big label">o</a> <a class="ui huge label">r</a> <a class="ui massive label">G</a> <a class="ui huge label">e</a> <a class="ui big label">e</a> <a class="ui large label">k</a> <a class="ui medium label">s</a> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos de las variaciones de tamaño de etiqueta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Size Variations </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 Size Variations</h3> <a class="ui yellow mini label">G</a> <a class="ui olive tiny label">e</a> <a class="ui green small label">e</a> <a class="ui teal label">g</a> <a class="ui blue medium label">s</a> <a class="ui violet large label">f</a> <a class="ui purple big label">o</a> <a class="ui pink huge label">r</a> <a class="ui brown massive label">G</a> <a class="ui grey huge label">e</a> <a class="ui black big label">e</a> <a class="ui olive large label">k</a> <a class="ui yellow medium label">s</a> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/label.html#size
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA