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.
Se utiliza una cuadrícula de interfaz de usuario semántica para armonizar el espacio negativo en un diseño. La versión 1.X de Semantic UI Semantic-UI Page Grids se usó para contener el ancho máximo de las cuadrículas que contienen el contenido de la página. Ahora, la Cuadrícula de página de IU semántica ha quedado obsoleta en favor del elemento contenedor más simple.
Clase de cuadrículas de página de interfaz de usuario semántica: ahora está en desuso. En lugar de usar una cuadrícula de página, prefiera usar un contenedor de cuadrícula de interfaz de usuario para incluir contenido de página de nivel superior dentro de una cuadrícula.
- contenedor de cuadrícula: esta clase se utiliza para establecer el contenedor de cuadrícula.
Sintaxis:
<div class="ui four column doubling stackable grid container"> <div class="column"> .... </div> .... </div>
Ejemplo 1: en este artículo, utilizaremos el contenedor de cuadrícula apilable de duplicación de tres columnas como reemplazo de la cuadrícula de página.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Page Grid</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 Page Grid Containers </strong> <br> <div class="ui three column doubling stackable grid container"> <div class="column"> <p>HTML</p> <p>Hypertext Markup Language</p> </div> <div class="column"> <p>CSS</p> <p>Cascading Stylesheet</p> </div> <div class="column"> <p>JS</p> <p>JavaScript</p> </div> </div> </center> </body> </html>
Producción:
Cuadrículas de página de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, usaremos la cuadrícula de contenedor apilable de duplicación de cuatro columnas como reemplazo de la cuadrícula de página con el encabezado de columnas de colores. Como es un contenedor de cuatro columnas, las columnas parecen estar en el lado izquierdo, la última columna parece estar vacía.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Page Grid</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 Page Grid Containers </strong> <br><br> <div class="ui four column doubling stackable grid container"> <div class="column"> <p class="ui green header">HTML</p> <p>Hypertext Markup Language</p> </div> <div class="column"> <p class="ui green header">CSS</p> <p>Cascading Stylesheet</p> </div> <div class="column"> <p class="ui green header">JS</p> <p>JavaScript</p> </div> </div> </center> </body> </html>
Producción:
Cuadrículas de página de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/grid.html#page-grids
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA