Semantic UI es un marco de desarrollo front-end gratuito de código abierto que está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
En este artículo, analicemos la variación de la sección en las variaciones del divisor admitidas en la interfaz de usuario semántica. Un divisor se usa generalmente para dividir el contenido de manera concisa en diferentes secciones.
La variación de la sección divisoria divide la sección en dos mitades con más espacio de margen que cualquier otro divisor. Este tipo de divisor se usa cuando se requiere más espacio entre dos secciones. La variación de sección da grandes márgenes para dividir secciones de contenido web.
Clase de variante de la sección de variaciones del divisor de interfaz de usuario semántica:
- sección: esta clase se utiliza para dividir el encabezado entre sí.
Sintaxis:
<element class="ui header">....</element > <element class="ui section divider">....</element> <element class="ui header">...</element >
Los siguientes ejemplos ilustran la variante de la sección de variaciones del divisor de interfaz de usuario semántica:
Ejemplo 1: En el siguiente ejemplo, podemos ver una variación de divisor de sección utilizando un divisor horizontal , que divide dos secciones en secciones verticales seccionadas.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <h1>GeeksforGeeks</h1> <strong>Semantic UI Section divider variation</strong> <h3 class="ui header"> Semantic UI </h3> <p> Semantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. In terms of user-friendliness, Semantic UI is better than Bootstrap. </p> <div class="ui section divider"></div> <h3 class="ui header"> Semantic UI - Section type Divider </h3> <p> Section variation divider divides the section into two halves with more margin space than any other divider. This type of divider is used when more space is required between any two sections. </p> </body> </html>
Producción:
Variante de la sección de variaciones del divisor de interfaz de usuario semántica
Ejemplo 2: En el siguiente ejemplo, podemos ver una variación de divisor de sección utilizando un divisor vertical , que divide dos secciones en secciones verticales seccionadas.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <h1>GeeksforGeeks</h1> <strong>Semantic-UI Divider Variations Section Variant</strong> <div class="ui segment"> <div class="ui two column very relaxed grid"> <div class="column"> <h3 class="ui header"> Semantic UI </h3> <p> Semantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. In terms of user-friendliness, Semantic UI is better than Bootstrap. </p> </div> <div class="column"> <h3 class="ui header"> Semantic UI - Inverted divider variation </h3> <p> Section variation divider divides the section into two halves with more margin space than any other divider. This type of divider is used when more space is required between any two sections. </p> </div> </div> <div class="ui sectioned vertical divider">AND</div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/divider.html#section
Publicación traducida automáticamente
Artículo escrito por jssuriyakumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA