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 el CSS y jQuery predefinidos para incorporar en diferentes marcos.
Semantic UI Responsive Grids nos ofrece cinco tipos de cuadrículas receptivas como contenedores, apilables, orden inverso, duplicación y ajustes manuales. Ella en este artículo sabremos sobre todos los brevemente.
Cuadrículas de respuesta de interfaz de usuario semántica:
- Contenedores: se usa junto con una cuadrícula para proporcionar un contenedor receptivo de ancho fijo para envolver el contenido de una página.
- Apilable : se demanda para que la cuadrícula apilable apile automáticamente las filas en una sola columna en los dispositivos móviles.
- Orden Inverso : Se demanda para realizar variaciones invertidas de la grilla que permiten invertir el orden de las columnas o filas por dispositivo.
- Duplicación : se utiliza para que la cuadrícula pueda tener anchos de columna dobles para cada salto de dispositivo.
- Ajustes manuales : se utiliza para ajustar manualmente la presentación del dispositivo especificando (x) columnas o filas de dispositivo de ancho o solo de dispositivo.
Sintaxis:
<div class="ui Responsive-Grids grid"> <div class="column"></div> <div class="column"></div> ... </div>
El siguiente ejemplo ilustra las cuadrículas receptivas de la interfaz de usuario semántica:
Ejemplo 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Responsive Grid</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <center> <div class="ui green header">GeeksforGeeks</div> <strong>Semantic-UI Menu Content</strong> </center> <strong>Manual Tweak:</strong> <div class="ui centered grid"> <div class="computer only row"> <div class="column"></div> </div> <div class="six wide tablet eight wide computer column">HTML</div> <div class="six wide tablet eight wide computer column">CSS</div> <div class="six wide tablet eight wide computer column">JS</div> <div class="six wide tablet eight wide computer column">PHP</div> </div> <strong>Doubling:</strong> <div class="ui grid"> <div class="doubling four column row"> <div class="column">HTML</div> <div class="column">CSS</div> <div class="column">JS</div> <div class="column">PHP</div> </div> </div> <strong>Reverse Order:</strong> <div class="ui mobile reversed equal width grid"> <div class="column"> HTML </div> <div class="column"> CSS </div> <div class="column"> JS </div> </div> </body> </html>
Producción:
Ejemplo 2: en este artículo usaremos una cuadrícula apilable y receptiva al contenedor.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Responsive Grid</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <center> <div class="ui green header">GeeksforGeeks</div> <strong>Semantic-UI Menu Content</strong> </center> <strong>Stackable:</strong> <div class="ui stackable four column grid"> <div class="column">HTML</div> <div class="column">CSS</div> <div class="column">JS</div> <div class="column">PHP</div> </div> <strong>Container:</strong> <div class="ui grid container"> <div class="four wide column">HTML</div> <div class="four wide column">CSS</div> <div class="four wide column">JS</div> <div class="four wide column">PHP</div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/grid.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA