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 de relleno del segmento de interfaz de usuario semántica junto con la implementación utilizando el código de ejemplo.
Los segmentos en Semantic-UI se utilizan en la agrupación de contenido relacionado. Semantic-UI Segment padded Variation nos permite agregar relleno al segmento tanto como sea necesario.
Clases de variación con relleno de segmento de interfaz de usuario semántica
- padded : esta clase se usa para agregar relleno al segmento.
- muy acolchado: esta clase se usa para agregar relleno adicional al segmento en comparación con el uso de la clase .padded .
Sintaxis:
<div class="ui Padded-Variation-Class segment"> ...... </div>
Nota: Para agregar más relleno al segmento, usamos la clase .very padded en lugar de la clase .padded.
Ejemplo 1: Podemos observar que el contenido se rellena.
HTML
<html> <head> <title>Semantic-UI Segment Padded 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 Padded Variation </strong> <br><br> <div class="ui padded segment"> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. </p> </div> </div> </center> </body> </html>
Producción :
Ejemplo 2: Podemos observar más relleno en el segmento que en el ejemplo anterior. Para lograr esto, usamos la clase .very padded .
HTML
<html> <head> <title>Semantic-UI Segment Padded 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 Padded Variation </strong> <br><br> <div class="ui very padded segment"> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. </p> </div> </div> </center> </body> </html>
Producción :
Variación de relleno de segmento de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/segment.html#padded
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA