Contenido de limpieza de filas de cuadrícula de interfaz de usuario semántica

La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para páginas web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos. Hace que las páginas web se vean increíbles y receptivas.

Semantic UI Grid se utiliza para armonizar el espacio negativo en un diseño. El diseño de cuadrícula se utiliza para crear un sistema de diseño basado en cuadrícula con la ayuda de filas y columnas. Grid es muy fácil de diseñar cualquier página web sin usar flotadores ni posicionamiento.

Semantic-UI Grid Clearing Content Row se usa para borrar las columnas anteriores y hacerlas útiles cuando usemos variaciones flotantes.

Fila de contenido de limpieza de cuadrícula de interfaz de usuario semántica Clase utilizada:

izquierda flotante: esta clase se usa para colocar el elemento de cuadrícula en el lado izquierdo.
right floated: esta clase se usa para colocar el elemento de cuadrícula en el lado derecho.

Sintaxis:

<div class="ui grid">
      <div class="*number column row">
        <div class="left floated column"></div>
        ...
      </div>
      ...
</div>

Ejemplo 1: Este ejemplo describe los usos de Semantic-UI Grid Clearing Content Row.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Grid Clearing Content Row
    </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 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Grid Clearing Content Row</h3>
  
        <div class="ui grid">
            <div class="four column row">
                <div class="left floated column justified">
                    <p>
                        JavaScript is a lightweight, cross-platform, 
                        and interpreted scripting language. 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.
                    </p>
  
                </div>
                <div class="right floated column justified">
                    <p>
                        Cascading Style Sheets, fondly referred to 
                        as CSS, is a simply designed language 
                        intended to simplify the process of making 
                        web pages presentable. CSS allows you to 
                        apply styles to web pages. More importantly, 
                        CSS enables you to do this independent of 
                        the HTML that makes up each web page.
                    </p>
  
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Contenido de limpieza de filas de cuadrícula de interfaz de usuario semántica

Ejemplo 2: Este ejemplo describe los usos de Semantic-UI Grid Clearing Content Row.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Grid Clearing Content Row
    </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 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Grid Clearing Content Row</h3>
  
        <div class="ui grid row">
            <div class="six wide column justified">
                <p>
                    JavaScript is a lightweight, cross-platform,
                    and interpreted scripting language. 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.
                </p>
  
            </div>
            <div class="five wide column justified">
                <p>
                    Cascading Style Sheets, fondly referred to
                    as CSS, is a simply designed language
                    intended to simplify the process of making
                    web pages presentable. CSS allows you to
                    apply styles to web pages. More importantly,
                    CSS enables you to do this independent of
                    the HTML that makes up each web page.
                </p>
  
            </div>
            <div class="four wide column justified">
                <p>
                    HTML stands for HyperText Markup Language.
                    It is used to design web pages using a
                    markup language. HTML 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.
                </p>
  
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Contenido de limpieza de filas de cuadrícula de interfaz de usuario semántica

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

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta