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 marcador de posición de la 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. El contenido de encabezados de marcador de posición se utiliza para mostrar el marcador de posición para el contenido del encabezado. El tamaño de bloque del contenido del encabezado es ligeramente mayor que el tamaño de bloque del párrafo.
Contenido de encabezados de marcador de posición de interfaz de usuario semántica Clase utilizada:
- encabezado: esta clase se utiliza para crear un diseño de bloque de contenido de encabezado.
Sintaxis:
<div class="ui placeholder">
<div class="header">
...
</div>
</div>
Ejemplo 1: En este ejemplo, describiremos el diseño del contenido del encabezado utilizando el contenido de encabezados de marcador de posición de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Placeholder Headers Content </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 Headers Content</h3> </div> <br><br> <div class="ui container placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="image header"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, describiremos el diseño del contenido del encabezado utilizando el contenido de encabezados de marcador de posición de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Placeholder Headers Content </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 Headers Content</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> </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> </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> </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> </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> </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/placeholder.html#headers