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, grupos y estados.
En este artículo, aprenderemos sobre el tipo apilado de segmentos de interfaz de usuario semántica y su implementación mediante el código de ejemplo.
Tipo apilado de segmento de interfaz de usuario semántica: los segmentos en la interfaz de usuario semántica se utilizan para agrupar contenido relacionado. El tipo apilado de segmentos de interfaz de usuario semántica se utiliza para mostrar que el contenido se muestra en varias páginas.
Clase usada:
-
apilado: se utiliza para crear un segmento que se puede formatear para mostrar su contenido en varias páginas.
Sintaxis:
<div class="ui stacked segment"> ... </div>
Ejemplo 1: podemos observar claramente que el contenido está apilado en varias páginas.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Segment Stacked Type</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 Stacked Type</strong> <br /><br /> <div class="ui stacked 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 que el contenido se muestra en más páginas que en el ejemplo anterior usando .ui segmento alto apilado .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Segment Stacked Type</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 Stacked Type</strong> <br /><br /> <div class="ui tall stacked 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:
Enlace de referencia: https://semantic-ui.com/elements/segment.html#stacked
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA