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 de interfaz de usuario semántica es una estructura con una larga historia utilizada para alinear el espacio negativo en los diseños, con la ayuda de filas y columnas, facilita el diseño de cualquier página web. En este artículo, analizaremos las filas de la cuadrícula de la interfaz de usuario semántica. Las filas son grupos de columnas que están alineadas horizontalmente.
Las filas pueden ser explícitas, marcadas con un elemento de fila adicional, o implícitas, que ocurren automáticamente cuando no queda más espacio en una fila anterior. Las filas de la cuadrícula de la interfaz de usuario semántica se dividen en 3 categorías: Agrupación, Borrado de contenido y Cuadrículas especiales.
Clase de filas de cuadrícula de interfaz de usuario semántica:
- fila: esta clase se utiliza para insertar las filas en el diseño.
Sintaxis:
<div class="ui grid ...">
<div class="row ...">
<div class="column">...</div>
...
</div>
</div>
Ejemplo 1: el siguiente código demuestra las filas de la cuadrícula de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Grid Rows</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic UI Grid Rows </strong> <br/><br/> <div class="ui four column grid"> <div class="row"> <div class="column"> <button>Geek</button> </div> <div class="column"> <button>Geek</button> </div> <div class="column"> <button>Geek</button> </div> <div class="column"> <button>Geek</button> </div> </div> </div> </body> </html>
Producción:
Filas de cuadrícula de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra las filas de la cuadrícula de la interfaz de usuario semántica mediante la agrupación. Los contenedores de fila nos permiten aplicar variaciones a un grupo de columnas. Podemos combinar columnas usando esta propiedad.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Grid Rows</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic UI Grid Rows </strong> <br/><br/> <div class="ui four column grid"> <div class="two column row"> <div class="column"> <button class="ui fluid button"> Geek </button> </div> </div> <div class="column"> <button class="ui fluid button"> Geek </button> </div> <div class="column"> <button class="ui fluid button"> Geek </button> </div> <div class="column"> <button class="ui fluid button"> Geek </button> </div> <div class="column"> <button class="ui fluid button"> Geek </button> </div> </div> </body> </html>
Producción:
Filas de cuadrícula de interfaz de usuario semántica
Ejemplo 3: el siguiente código demuestra las filas de la cuadrícula de la interfaz de usuario semántica mediante el contenido de compensación. Los envoltorios de fila borrarán automáticamente las columnas anteriores, lo que los hace útiles cuando se usan variaciones flotantes.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Grid Rows</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic UI Grid Rows </strong> <br/><br/> <div class="ui grid"> <div class="four column row"> <div class="left floated column"> <button class="ui fluid button"> Geek </button> </div> <div class="right floated column"> <button class="ui fluid button"> Geek </button> </div> </div> <div class="four column row"> <div class="column"> <button class="ui fluid button"> Geek </button> </div> <div class="column"> <button class="ui fluid button"> Geek </button> </div> <div class="column"> <button class="ui fluid button"> Geek </button> </div> <div class="column"> <button class="ui fluid button"> Geek </button> </div> </div> </div> </body> </html>
Producción:
Filas de cuadrícula de interfaz de usuario semántica
Ejemplo 4: además, algunos tipos de cuadrículas, como las divididas o en celdas, requieren envolturas de fila para aplicar el formato correctamente.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Grid Rows</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic UI Grid Rows </strong> <br/><br/> <div class="ui grid"> <div class="ui internally celled grid"> <div class="row"> <div class="three wide column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="ten wide column"> <p>GeeksforGeeks</p> </div> <div class="three wide column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> </div> </div> </body> </html>
Producción:
Filas de cuadrícula de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/grid.html#rows
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA