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 Stackable se utiliza para apilar el elemento de cuadrícula en dispositivos móviles o de pantalla pequeña. Apilará automáticamente todas las filas en una sola columna.
Clase apilable de cuadrícula receptiva de interfaz de usuario semántica:
- apilable: esta clase se utiliza para apilar automáticamente todos los elementos de la cuadrícula en un dispositivo móvil.
Sintaxis:
<div class="ui stackable four column grid">
<div class="column"></div>
...
</div>
Ejemplo 1: este ejemplo describe los usos de Semantic-UI Responsive Grid Stackable.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Responsive Grid Stackable </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 Stackable </h3> <div class="ui stackable 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. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. </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. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page. </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. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </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. Elaborating the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development. </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo describe los usos de Semantic-UI Responsive Grid Stackable.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Responsive Grid Stackable </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 Stackable </h3> <div class="ui stackable six 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 class="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="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:
Rejilla receptiva de interfaz de usuario semántica apilable
Referencia: https://semantic-ui.com/collections/grid.html#stackable