Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
Un segmento se usa para agrupar contenido similar, lo que mejora la experiencia del usuario y ayuda a los usuarios a navegar por su contenido de manera eficiente. Se utiliza una variación de borrado de segmento para borrar contenido flotante dentro del segmento principal.
Clases de variación de compensación de segmento de interfaz de usuario semántica:
- limpieza: esta clase se utiliza para borrar contenido flotante.
Syntax: <div class="ui clearing segment"> <div class="ui right floated button"> ......... </div> </div>
Ejemplo 1: el siguiente código demuestra el uso de la variación de compensación de segmento utilizando clases flotantes a la derecha.
HTML
<html> <head> <title>Semantic-UI Segment Clearing Variation </title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body style="margin-inline: 600px;"> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Segment Clearing Variation </h3> </center> <div class="ui clearing segment"> <div class="ui right floated button green"> Right Floated </div> </div> </body> </html>
Producción:
Variación de limpieza de segmento de interfaz de usuario semántica
Ejemplo 2: a continuación hay otro código que demuestra el uso de la variación de compensación de segmentos usando clases flotantes a la izquierda.
HTML
<html> <head> <title>Semantic-UI Segment Clearing Variation </title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body style="margin-inline: 600px;"> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Segment Clearing Variation </h3> </center> <div class="ui clearing segment"> <div class="ui left floated button green"> Left Floated </div> </div> </body> </html>
Producción:
Variación de limpieza de segmento de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/segment.html#clearing
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA