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 un segmento vertical para dar formato al contenido que se va a alinear como parte de un grupo vertical.
Clases de tipo de segmento vertical de segmento de interfaz de usuario semántica:
- vertical: esta clase se utiliza para alinear el contenido como parte del grupo vertical.
Sintaxis:
<div class="ui vertical segment">
...
</div>
Ejemplo 1: a continuación se muestra el código que demuestra el uso del tipo de segmento vertical de segmento mediante la etiqueta de imágenes.
HTML
<html> <head> <title>Semantic-UI Segment Vertical Segment Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Segment Vertical Segment Type </h3> <div class="ui vertical segment"> <img alt="gfg" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220306132642/gfglogo-300x240.jpg"> </div> <div class="ui vertical segment"> <img alt="gfg" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220306124807/gfglogo.png"> </div> <div class="ui vertical segment"> <img alt="gfg" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220306131409/one2optimizedmin-300x184.png"> </div> </center> </body> </html>
Producción:
Segmento de interfaz de usuario semántica Tipo de segmento vertical
Ejemplo 2: a continuación se muestra el código que demuestra el uso del tipo de segmento vertical de segmento mediante la etiqueta de párrafo.
HTML
<html> <head> <title>Semantic-UI Segment Vertical Segment Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Segment Vertical Segment Type </h3> <div class="ui vertical segment"> <p>Geeksforgeeks</p> </div> <div class="ui vertical segment"> <p>It is a Computer Science portal.</p> </div> <div class="ui vertical segment"> <p>It consists of various Interview preparation courses.</p> </div> </center> </body> </html>
Producción:
Segmento de interfaz de usuario semántica Tipo de segmento vertical
Enlace de referencia: https://semantic-ui.com/elements/segment.html#vertical-segment
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA