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. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Una cuadrícula se utiliza para armonizar el espacio negativo en un diseño. En la etiqueta de interfaz de usuario semántica, se ofrecen 5 tipos de cuadrículas variables. Estos son Cuadrículas anidadas, Coloreadas, Recuento automático de columnas, Centrado de contenido y Orden significativo de las palabras.
En este artículo, hablaremos de Grid Colored, que se utiliza para rellenar los colores de las cuadrículas. Las cuadrículas pueden usar variaciones de colores con nombre para agregar colores de fondo, pero solo con cuadrículas rellenas que no incluyen márgenes negativos.
Clases de colores de cuadrícula de interfaz de usuario semántica:
- red: Esta clase se utiliza para establecer el color rojo en la etiqueta.
- naranja: esta clase se utiliza para establecer el color naranja en la etiqueta.
- amarillo: esta clase se utiliza para establecer el color amarillo en la etiqueta.
- oliva: Esta clase se utiliza para establecer el color oliva en la etiqueta.
- green: esta clase se utiliza para establecer el color verde en la etiqueta.
- verde azulado: esta clase se utiliza para establecer el color verde azulado en la etiqueta.
- azul: esta clase se utiliza para establecer el color azul en la etiqueta.
- violeta: Esta clase se utiliza para establecer el color violeta en la etiqueta.
- purple: esta clase se usa para establecer el color púrpura en la etiqueta.
- rosa: esta clase se utiliza para establecer el color rosa en la etiqueta.
- marrón: Esta clase se utiliza para establecer el color marrón de la etiqueta.
- gris: esta clase se utiliza para establecer el color gris en la etiqueta.
- black: esta clase se utiliza para establecer el color negro en la etiqueta.
Sintaxis:
<div class="ui grid">
<div class="row Colored-Class">
<div class="column Colored-Class">
...
</div>
<div class="column Colored-Class">
...
</div>
</div>
</div>
Ejemplo 1: el siguiente código demuestra el uso de la clase grids con cualquier color.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Label Colored Group</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<br />
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic UI Grid Colored</strong>
<br /><br />
<div class="ui equal width center aligned padded grid">
<div class="row">
<div class="green column">
Green
</div>
<div class="black column">
Black
</div>
</div>
<div class="row">
<div class="black column">
Black
</div>
<div class="green column">
Green
</div>
</div>
</div>
</body>
</html>
Producción:
Cuadrícula de interfaz de usuario semántica coloreada
Ejemplo 2: el siguiente código demuestra el uso de la clase grids con un color personalizado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Label Colored Group</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<br />
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic UI Grid Colored</strong>
<br />
<br />
<div class="ui equal width center aligned padded grid">
<div class="row blue"> Custom Blue </div>
<div class="row green"> Custom Green </div>
<div class="row red"> Custom Red </div>
</div>
</body>
</html>
Producción:
Cuadrícula de interfaz de usuario semántica coloreada
Referencia: https://semantic-ui.com/collections/grid.html#colored
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA