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 grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. La interfaz de usuario semántica nos brinda una manera muy fácil de diseñar la aplicación web en lugar de usar CSS. Para crear una agrupación de contenido relacionado, usamos segmentos. Ofrece segmentos en diferentes variaciones, tipos de grupos y estados.
En este artículo, aprenderemos sobre la variación flotante del segmento de interfaz de usuario semántica junto con la implementación mediante el código de ejemplo.
Los segmentos en Semantic-UI se utilizan en la agrupación de contenido relacionado. La variación flotante del segmento de interfaz de usuario semántica se utiliza para hacer que el segmento se muestre a la izquierda o a la derecha de otro contenido.
Clases de variación flotante de segmento de interfaz de usuario semántica:
- right floated: Esta clase se usa para hacer flotar el segmento a la derecha.
- left floated: Esta clase se usa para hacer flotar el segmento a la izquierda.
Sintaxis:
<div class="ui Floated-Variation-Classe segment"> .... </div>
Ejemplo 1: En este ejemplo, observamos que el segmento se muestra a la izquierda del resto del contenido. El segmento flota hacia la izquierda.
HTML
<html> <head> <title>Semantic-UI Segment Floated Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h2 class="ui header green"> Geeksforgeeks </h2> <strong> Semantic-UI Segment Floated Variation </strong><br><br> <div class="ui left floated segment"> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. </p> </div> <p> we observe that the segment is displayed to the left to the rest of the content </p> </div> </center> </body> </html>
Producción:
Variación flotante del segmento de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, observamos que el segmento se muestra a la derecha del resto del contenido. El segmento flota hacia la derecha.
HTML
<html> <head> <title>Semantic-UI Segment Floated Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h2 class="ui header green"> Geeksforgeeks </h2> <strong> Semantic-UI Segment Floated Variation </strong><br><br> <div class="ui right floated segment"> <p> Semantic-UI Segment Floated Variation </p> </div> <p> we observe that the segment is displayed to the right to the rest of the content </p> </div> </center> </body> </html>
Producción:
Variación flotante del segmento de interfaz de usuario semántica
Enlace de referencia : https://semantic-ui.com/elements/segment.html#floated
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA