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.
Semantic-UI Divider se utiliza para crear el divisor entre dos elementos, esto nos ofrece 3 tipos de divisor con 5 variaciones Invertido, Ajustado, Sección, Borrado y Oculto. En este artículo conoceremos la Variante de Compensación
Clase de variante de compensación de variaciones de divisor de interfaz de usuario semántica:
- limpieza: esta clase se utiliza para borrar los contenidos que se encuentran por encima de ella.
Sintaxis:
<div class="ui segment"> <h2 class="ui right floated header">.....</h2> <div class="ui clearing divider"></div> .... </div>
El siguiente ejemplo ilustra la variante de compensación de variaciones del divisor de interfaz de usuario semántica:
Ejemplo 1: El siguiente ejemplo demuestra el tipo de variación del divisor de compensación con el encabezado flotante izquierdo .
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 Clearing Variant </strong> <h3 class="ui right floated header"> Semantic UI </h3> <div> <div class="ui clearing divider"></div> <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> <h3 class="ui left floated header"> Semantic UI - Clearing type Divider </h3> <div class="ui clearing divider"></div> <p> The clearing variation divider clears the contents specified above the divider. This type of divider is used when more space is required between any two sections. </p> </div> </body> </html>
Producción:
Ejemplo 2: en el siguiente código, podemos ver un ejemplo ligeramente diferente, podemos ver una variación del divisor de limpieza usando 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 Clearing 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 - Clearing divider variation </h3> <p> The Clearing variation divider clears the contents specified above the divider. This type of divider is used when more space is required between any two sections. </p> </div> </div> <div class="ui clearing vertical divider">AND</div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/divider.html#clearing
Publicación traducida automáticamente
Artículo escrito por jssuriyakumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA