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 Manual Tweak se usa para agregar patrones de diseño como duplicación o apilamiento que son útiles para crear un diseño de estilo receptivo simple. También podemos agregar estilo modificando manualmente la presentación del dispositivo usando (x) columnas o filas de dispositivos de ancho o solo de dispositivos.
Semantic-UI Responsive Grid Manual Tweak Class:
- solo computadora: esta clase se usa para mostrar el diseño del tamaño de la cuadrícula solo en la pantalla del dispositivo de la computadora.
- *anchura numérica: esta clase se utiliza para establecer la anchura de la cuadrícula en el dispositivo.
Sintaxis:
<div class="ui centered grid">
<div class="*number wide tablet column">...</div>
...
</div>
Ejemplo 1: En este ejemplo, describiremos el uso de Semantic-UI Responsive Grid Manual Tweak.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Responsive Grid Manual Tweaks </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 Manual Tweaks </h3> <div class="ui centered grid"> <div class="three wide tablet four wide computer 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="three wide tablet four wide computer 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="three wide tablet four wide computer 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="three wide tablet four wide computer 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 class="three wide tablet four wide computer column"> Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. </div> <div class="three wide tablet four wide computer column"> Pure CSS is a CSS framework. It is a set of free and open-source tools for building responsive websites and web applications. Yahoo developed this, which is used to make websites that are quicker, more elegant, and more responsive. </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, describiremos el uso de Semantic-UI Responsive Grid Manual Tweak.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Responsive Grid Manual Tweaks </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 Manual Tweaks </h3> <div class="ui centered grid"> <div class="green four wide tablet three wide computer 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="yellow four wide tablet three wide computer 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="red four wide tablet three wide computer 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="blue four wide tablet three wide computer 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 class="red four wide tablet three wide computer column"> Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/grid.html#manual-tweaks