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 color de la etiqueta de la interfaz de usuario semántica del marco de la interfaz de usuario semántica. Las variaciones de color de la etiqueta de interfaz de usuario semántica se utilizan para agregar diferentes tamaños del elemento de etiqueta.
Clases de variaciones de color de etiqueta de interfaz de usuario semántica:
- rojo: esta clase se utiliza para establecer el color de la etiqueta en rojo.
- naranja: esta clase se utiliza para establecer el color de la etiqueta en naranja.
- amarillo: esta clase se utiliza para establecer el color de la etiqueta en amarillo.
- oliva: esta clase se utiliza para establecer el color de la etiqueta en oliva.
- verde: esta clase se utiliza para establecer el color de la etiqueta en verde.
- verde azulado: esta clase se utiliza para establecer el color de la etiqueta en verde azulado.
- azul: esta clase se utiliza para establecer el color de la etiqueta en azul.
- púrpura: esta clase se usa para establecer el color de la etiqueta en púrpura.
- violeta: esta clase se utiliza para establecer el color de la etiqueta en violeta.
- rosa: esta clase se utiliza para establecer el color de la etiqueta en rosa.
- marrón: esta clase se utiliza para establecer el color de la etiqueta en marrón.
- gris: esta clase se utiliza para establecer el color de la etiqueta en gris.
- negro: esta clase se utiliza para establecer el color de la etiqueta en negro.
Sintaxis:
<a class="ui red label">Red</a>
Ejemplo 1: este ejemplo describe los usos de las variaciones de color de la etiqueta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Colored 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 Colored Variations</h3> <a class="ui red label">G</a> <a class="ui orange label">e</a> <a class="ui yellow label">e</a> <a class="ui olive label">k</a> <a class="ui green label">s</a> <a class="ui teal label">f</a> <a class="ui blue label">o</a> <a class="ui violet label">r</a> <a class="ui purple label">G</a> <a class="ui pink label">e</a> <a class="ui brown label">e</a> <a class="ui grey label">k</a> <a class="ui black label">s</a> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos de las variaciones de color de la etiqueta de interfaz de usuario semántica con variaciones de tamaño.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Label Colored 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 Colored Variations</h3> <a class="ui yellow small label">G</a> <a class="ui olive label">e</a> <a class="ui green medium label">e</a> <a class="ui teal large label">g</a> <a class="ui blue big label">s</a> <a class="ui violet huge label">f</a> <a class="ui purple massive label">o</a> <a class="ui pink huge label">r</a> <a class="ui brown big label">G</a> <a class="ui grey large label">e</a> <a class="ui black medium label">e</a> <a class="ui olive label">k</a> <a class="ui yellow small label">s</a> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/label.html#colored
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA