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. Un grupo de segmentos anidados se utiliza para agrupar el segmento dentro de otro grupo de segmentos.
Clases de grupo de segmentos anidados de segmento de interfaz de usuario semántica:
- segmento: Esta clase se utiliza para definir un segmento de contenido similar.
- horizontal: esta clase se utiliza para alinear el elemento en la dirección horizontal.
Sintaxis:
<div class="ui segment">
<div class="ui segment">
...
</div>
</div>
Ejemplo 1: a continuación se muestra el código que demuestra el uso del grupo de segmentos anidados de segmentos de interfaz de usuario semántica.
HTML
<html> <head> <title>Semantic-UI Nested Segment Group</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="margin-inline: 500px;"> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Nested Segment Group </h3> </center> <div class="ui segments"> <div class="ui segment"> <p>First</p> </div> <div class="ui segment"> <p>Second</p> </div> <div class="ui horizontal segments"> <div class="ui segment"> <p>Horizontal-Nested First</p> </div> <div class="ui segment"> <p>Horizontal-Nested Second</p> </div> <div class="ui segment"> <p>Horizontal-Nested Third</p> </div> </div> <div class="ui segment"> <p>Third</p> </div> <div class="ui segments"> <div class="ui segment"> <p>Nested First</p> </div> <div class="ui segment"> <p>Nested Second</p> </div> <div class="ui segment"> <p>Nested Third</p> </div> </div> </div> </body> </html>
Producción:
Grupo de segmentos anidados de interfaz de usuario semántica
Ejemplo 2: a continuación se muestra otro código que demuestra el uso del grupo de segmentos anidados de segmentos de interfaz de usuario semántica.
HTML
<html> <head> <title>Semantic-UI Nested Segment Group</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="margin-inline: 500px;"> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Nested Segment Group </h3> </center> <div class="ui segments"> <div class="ui segment"> <p>1</p> </div> <div class="ui segment"> <p>2</p> </div> <div class="ui horizontal segments"> <div class="ui segment"> <p>Horizontal-Nested 1</p> </div> <div class="ui segment"> <p>Horizontal-Nested 2</p> </div> <div class="ui segment"> <p>Horizontal-Nested 3</p> </div> </div> <div class="ui segment"> <p>3</p> </div> <div class="ui segments"> <div class="ui segment"> <p>Nested 1</p> </div> <div class="ui segment"> <p>Nested 2</p> </div> <div class="ui segments"> <div class="ui segment"> <p>2-Nested 1</p> </div> <div class="ui segment"> <p>2-Nested 2</p> </div> <div class="ui segment"> <p>2-Nested 3</p> </div> </div> <div class="ui segment"> <p>Nested 3</p> </div> </div> </div> </body> </html>
Producción:
Grupo de segmentos anidados de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/segment.html#nested-segments
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA