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 diferentes elementos geniales para usar para hacer que su sitio web se vea más sorprendente. En este artículo, vamos a aprender acerca de las variaciones de marcador de posición.
El tipo de marcador de posición de interfaz de usuario semántica se utiliza para reservar el espacio para el contenido que pronto aparecerá en el diseño de una página web.
Tipo de marcador de posición de interfaz de usuario semántica Clases utilizadas:
- marcador de posición: esta clase se usa para mostrar el diseño del espacio reservado para el contenido que se mostrará pronto.
Sintaxis:
<div class="ui placeholder">
...
</div>
Ejemplo 1: en este ejemplo, estamos creando un diseño de blog simple utilizando el tipo de marcador de posición de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Placeholder Types </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Placeholder Types</h3> </div> <div class="ui container placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <br><br> <div class="image header"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, estamos creando un diseño de tarjeta de cinco columnas que mostrará contenido muy pronto utilizando el tipo de marcador de posición de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Placeholder Types </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Placeholder Types</h3> </div> <br><br> <div class="ui container five column grid"> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> </div> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> </div> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> </div> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> </div> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> </div> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/placeholder.html#placeholder