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 párrafo de marcador de posición de interfaz de usuario semántica se utiliza para mostrar el marcador de posición para el diseño de contenido de párrafo. Los párrafos múltiples se utilizan para agrupar las líneas.
Clase utilizada de contenido de párrafo de marcador de posición de interfaz de usuario semántica:
- párrafo: esta clase se utiliza para crear un diseño de marcador de posición para el elemento de párrafo.
Sintaxis:
<div class="ui placeholder">
<div class="paragraph">
...
</div>
</div>
Ejemplo 1: en este ejemplo, crearemos un diseño para el elemento de párrafo utilizando el contenido de párrafo de marcador de posición de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Placeholder Paragraph 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 Paragraph Content</h3> </div> <br><br> <div class="ui container placeholder"> <div class="paragraph"> <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, crearemos un diseño para el elemento de párrafo usando Contenido de párrafo de marcador de posición de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Placeholder Paragraph 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 Paragraph 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="paragraph"> <div class="line"></div> <div class="line"></div> <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="paragraph"> <div class="line"></div> <div class="line"></div> <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="paragraph"> <div class="line"></div> <div class="line"></div> <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="paragraph"> <div class="line"></div> <div class="line"></div> <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="paragraph"> <div class="line"></div> <div class="line"></div> <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#paragraph