Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. 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.
El encabezado de interfaz de usuario semántica proporciona un breve resumen del contenido y nos ofrece diferentes variaciones del encabezado, como variantes divididas, bloqueadas, adjuntas, flotantes, alineación de texto, coloreadas e invertidas. Aquí, en este artículo, conoceremos la variante Coloreada del encabezado.
Variaciones de encabezado de interfaz de usuario semántica Clase de variante coloreada:
- red: Esta clase se utiliza para establecer el color rojo.
- naranja: esta clase se utiliza para establecer el color naranja.
- amarillo: Esta clase se utiliza para establecer el color amarillo.
- oliva: Esta clase se utiliza para establecer el color oliva.
- green: Esta clase se utiliza para establecer el color verde.
- verde azulado: esta clase se utiliza para establecer el color verde azulado.
- azul: Esta clase se utiliza para establecer el color azul.
- purple: esta clase se usa para establecer el color púrpura.
- violeta: Esta clase se utiliza para establecer el color violeta.
- rosa: Esta clase se utiliza para establecer el color rosa.
- marrón: esta clase se utiliza para establecer el color marrón.
- gris: Esta clase se utiliza para establecer el color gris.
Sintaxis:
<element class="ui Colored-Variant-Class header"> ... </element >
El siguiente ejemplo ilustra la variante coloreada de las variaciones del encabezado de la interfaz de usuario semántica:
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic-UI Header Variations Colored Variant </strong> </center> <br> <div class="ui"> <p> <strong class="ui red header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> <p> <strong class="ui orange header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> <p> <strong class="ui yellow header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> <p> <strong class="ui olive header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> <p> <strong class="ui green header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> <p> <strong class="ui teal header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> </div> </body> </html>
Producción:
Variaciones de color del encabezado de la interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic-UI Header Variations Colored Variant </strong> </center> <br> <div class="ui"> <p> <strong class="ui blue header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> <p> <strong class="ui purple header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> <p> <strong class="ui violet header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> <p> <strong class="ui pink header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> <p> <strong class="ui brown header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> <p> <strong class="ui grey header"> Geeksforgeeks: </strong> A Computer Science Portal for Geeks </p> </div> </body> </html>
Producción:
Variaciones de color del encabezado de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/header.html#colored
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA