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 diferentes elementos geniales para usar para hacer que su sitio web se vea más sorprendente. Utiliza una clase para agregar CSS a los elementos.
El diseño de cuadrícula de interfaz de usuario semántica se utiliza para armonizar el diseño del espacio negativo. El elemento de cuadrícula se usa para crear un sistema de diseño basado en cuadrícula que ayuda a las filas y columnas. Los elementos de cuadrícula facilitan el diseño de cualquier página web sin utilizar flotadores ni posicionamiento. Semantic-UI Responsive Grid Reverse Order se utiliza para invertir el orden de los elementos de columnas o filas en dispositivos móviles.
Clase de orden inverso de cuadrícula receptiva de interfaz de usuario semántica:
- móvil invertido: esta clase se utiliza para invertir los elementos de la cuadrícula en los dispositivos móviles.
Sintaxis:
<div class="ui mobile reversed equal width grid">
<div class="column"> Content... </div>
...
</div>
Ejemplo 1: este ejemplo describe los usos del orden inverso de cuadrícula receptiva de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Responsive Grid Reverse Order </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3> Semantic-UI Responsive Grid Reverse Order </h3> <div class="ui mobile reversed four column grid justified"> <div class="column"> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. </div> <div class="column"> CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. </div> <div class="column"> JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also known as scripting language for web pages. </div> <div class="column"> jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. </div> </div> </div> </body> </html>
Producción:
Orden inverso de cuadrícula receptiva de interfaz de usuario semántica
Ejemplo 2: este ejemplo describe los usos del orden inverso de cuadrícula receptiva de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Responsive Grid Reverse Order </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3> Semantic-UI Responsive Grid Reverse Order </h3> <div class="ui mobile reversed four column grid stackable justified"> <div class="column"> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. </div> <div class="column"> CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. </div> <div class="column"> JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also known as scripting language for web pages. </div> <div class="column"> jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. </div> </div> </div> </body> </html>
Producción:
Orden inverso de cuadrícula receptiva de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/grid.html#reverse-order