La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
El segmento de interfaz de usuario semántica es un segmento que es un contenedor que se utiliza para colocar contenidos del mismo tipo o de la misma categoría. Se utiliza para agrupar elementos relacionados.
El grupo de segmentos horizontales de IU semántica es el grupo de segmentos que aparecen horizontalmente. Podemos colocar los segmentos horizontalmente en una línea.
Clases de grupo de segmentos horizontales de interfaz de usuario semántica:
- Segmentos horizontales : el contenedor con esta clase puede contener varios segmentos que aparecerán horizontalmente.
Sintaxis : cree un contenedor con la clase de segmentos horizontales y coloque los segmentos dentro de él de la siguiente manera:
<div class="ui horizontal segments">
<div class="ui segment">
</div>
...
</div>
Ejemplo : en el siguiente ejemplo, tenemos tres segmentos que están agrupados horizontalmente y muestran contenido relacionado.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<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">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
.icon {
margin: 16px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Horizontal Segments Group
</strong>
</center>
<div class="ui horizontal segments">
<div class="ui segment">
<h3>Data Structures</h3>
<ul class="ui bulleted list">
<li class="item">Stack</li>
<li class="item">Heap</li>
<li class="item">Array</li>
</ul>
</div>
<div class="ui segment">
<h3>Algorithms</h3>
<ul class="ui bulleted list">
<li class="item">Searching</li>
<li class="item">Sorting</li>
<li class="item">Graph</li>
</ul>
</div>
<div class="ui segment">
<h3>Programming Languages</h3>
<ul class="ui bulleted list">
<li class="item">Java</li>
<li class="item">C++</li>
<li class="item">Python</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Producción
Grupo de segmentos horizontales de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/segment.html#horizontal-segments
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA