Duplicación de cuadrícula receptiva de interfaz de usuario semántica

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.

La duplicación de cuadrícula receptiva de interfaz de usuario semántica se utiliza para duplicar el ancho de columna para cada salto de dispositivo. Si cambiamos el tamaño de la pantalla, el ancho del elemento de la cuadrícula cambia automáticamente.

Clase de duplicación de cuadrícula sensible a la interfaz de usuario semántica:

duplicación: esta clase se utiliza para duplicar el ancho de las columnas para cada salto de dispositivo.

Sintaxis:

<div class="ui grid">
      <div class="doubling eight column row">
        <div class="column"></div>
        ...
    </div>
    ...
</div>

Ejemplo 1: Este ejemplo describe los usos de Semantic-UI Responsive Grid Duplicación.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Responsive Grid Doubling
    </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 Doubling
        </h3>
  
        <div class="ui four column grid doubling 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:

Ejemplo 2: Este ejemplo describe los usos de Semantic-UI Responsive Grid Duplicación.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Responsive Grid Doubling
    </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 Doubling
        </h3>
  
        <div class="ui six column grid doubling justified">
            <div class="green 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 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 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="yellow 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 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="green 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:

Referencia: https://semantic-ui.com/collections/grid.html#doubling

Publicación traducida automáticamente

Artículo escrito por vkash8574 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta