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. El segmento de marcador de posición se utiliza para almacenar espacio para el contenido mostrado condicionalmente.
Clases de tipo de segmento de marcador de posición de interfaz de usuario semántica:
- marcador de posición: esta clase se usa en el elemento del segmento para almacenar espacio para el contenido mostrado condicionalmente.
Sintaxis:
<div class="ui placeholder segment">
...
</div>
Ejemplo 1: a continuación se muestra el código que demuestra el uso del tipo de segmento de marcador de posición.
HTML
<html> <head> <title>Semantic-UI Placeholder Segment Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <br><br><br> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Placeholder Segment Type </h3> <div class="ui placeholder segment"> <div class="ui icon header"> <i class="share square outline icon"></i> </div> <div class="ui primary button"> Share </div> </div> </center> </body> </html>
Producción:
Tipo de segmento de marcador de posición de interfaz de usuario semántica
Ejemplo 2: a continuación se muestra el código que demuestra el uso del tipo de segmento de marcador de posición mediante la clase en línea.
HTML
<html> <head> <title>Semantic-UI Placeholder Segment Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <br><br><br> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Placeholder Segment Type </h3> <div class="ui placeholder segment"> <div class="ui icon header"> <i class="search icon"></i> Search for any course at Geeksforgeeks </div> <div class="inline"> <div class="ui button"> View course outline </div> <div class="ui button green"> Purchase </div> </div> </div> </center> </body> </html>
Producción:
Tipo de segmento de marcador de posición de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/segment.html#placeholder-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