Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
Semantic-UI Grid se utiliza para armonizar el espacio negativo en el diseño de nuestra página web. El orden de palabras significativas de cuadrícula variable se usa para alinear las cosas horizontal o verticalmente. Podemos alinear las columnas y el texto usando clases de orden significativo de palabras. En este artículo, discutiremos el orden de palabras significativo de cuadrícula variable en la interfaz de usuario semántica.
Clases de orden de palabras significativas de cuadrícula variable de interfaz de usuario semántica:
- left floated: esta clase se utiliza para hacer flotar la columna hacia la izquierda.
- right floated: esta clase se usa para hacer flotar la columna a la derecha.
- alineado al centro: Esta clase se utiliza para alinear el contenido en el centro.
- alineado a la izquierda: esta clase se utiliza para alinear el contenido a la izquierda.
- alineado a la derecha: esta clase se utiliza para alinear el contenido a la derecha.
Sintaxis:
<div class="ui Significant-Word-Order-Class
grid">
.....
</div>
Ejemplo 1: el siguiente código demuestra el orden de palabras significativas de la cuadrícula variable de la interfaz de usuario semántica utilizando clases flotantes a la izquierda, flotantes a la derecha, alineadas a la izquierda y alineadas a la derecha .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Varying Grid Significant Word Order</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI Varying Grid Significant Word Order </h3> </div> <br> <div class="ui grid"> <div class="left floated right aligned seven wide column"> <div class="ui segment"> GFG Left floated Right aligned </div> </div> <div class="right floated left aligned seven wide column"> <div class="ui segment"> GFG Right floated left aligned </div> </div> <div class="right floated seven wide column"> <div class="ui segment"> GeeksforGeeks Right floated </div> </div> </div> </body> </html>
Producción:
Orden de palabras significativo de cuadrícula variable de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra el orden de palabras significativas de la cuadrícula variable de la interfaz de usuario semántica utilizando la clase alineada al centro .
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Varying Grid Significant Word Order </title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI Varying Grid Significant Word Order </h3> </div> <br> <div class="ui right aligned grid"> <div class="left floated center aligned four wide column"> <div class="ui segment"> GFG Left floated Center aligned </div> </div> <div class="right floated center aligned four wide column"> <div class="ui segment"> GFG Right floated Center aligned </div> </div> <div class="right floated center aligned ten wide column"> <div class="ui segment"> GFG Right floated Center aligned </div> </div> <div class="center aligned sixteen wide column"> <div class="ui segment"> GeeksforGeeks Center aligned </div> </div> </div> </body> </html>
Producción:
Orden de palabras significativo de cuadrícula variable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/grid.html#significant-word-order
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA