La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
Las columnas Semantic UI Grid nos ofrecen cuadrículas que dividen el espacio horizontal en columnas. Todas las columnas de una cuadrícula deben especificar su ancho como una proporción del ancho total de fila disponible. Todos los sistemas de cuadrícula eligen un recuento de columnas arbitrario para permitir por fila. El tema predeterminado de Semantic usa 16 columnas.
Clase de columnas de cuadrícula de interfaz de usuario semántica:
- columna: esta clase se utiliza para crear una columna de 12 cuadrículas.
- *Número alfabético: esta es la clase en la que debe mencionar el ancho de la columna calculando el divisor de 12, la cuadrícula total es 12, uno, dos, tres,…. hasta doce.
Sintaxis:
<div class="ui grid"> <div class="*alphabetic-number wide column"></div> <div class="*alphabetic-number wide column"></div> .... </div>
Los siguientes ejemplos ilustran las columnas de cuadrícula de la interfaz de usuario semántica:
Ejemplo 1: en este ejemplo, crearemos dos filas que contendrán las 4 columnas de tres cuadrículas y la columna de tres cuadrículas.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Grid Columns</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 Grid Columns </strong> </center> <br> <div class="ui grid"> <div class="three wide green column">1</div> <div class="three wide yellow column">2</div> <div class="three wide blue column">3</div> <div class="three wide red column">4</div> </div> <br><br> <div class="ui grid"> <div class="twelve wide purple column">12</div> </div> </body> </html>
Producción:
Columnas de cuadrícula de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, crearemos dos filas que contendrán las 2 columnas de seis cuadrículas y las 1 columnas de tres cuadrículas.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Grid Columns</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 Grid Columns </strong> </center> <br> <div class="ui grid"> <div class="six wide green column">1</div> <div class="six wide yellow column">2</div> </div> <br><br> <div class="ui grid"> <div class="twelve wide purple column">12</div> </div> </body> </html>
Producción:
Columnas de cuadrícula de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/grid.html#columns
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA