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 grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. El marcador de posición de IU semántica nos ofrece 4 tipos de contenido: líneas , encabezado , párrafo e imágenes.
En este artículo, aprenderemos sobre el contenido de las líneas de marcador de posición de la interfaz de usuario semántica. El contenido de las líneas de marcador de posición de la interfaz de usuario semántica se utiliza para que el marcador de posición pueda contener líneas de texto.
Clase de contenido de líneas de marcador de posición de interfaz de usuario semántica:
- línea: esta clase se utiliza para crear líneas como marcador de posición.
Sintaxis:
<div class="ui placeholder">
<div class="line"></div>
<div class="line"></div>
...
</div>
El siguiente ejemplo ilustra el contenido de las líneas de marcador de posición de la interfaz de usuario semántica:
Ejemplo 1: En este ejemplo, pondremos un marcador de posición de dos líneas.
HTML
<!DOCTYPE html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Stackable Content </strong> <br /><br /> <strong>Placeholde Lines Content:</strong> <div class="ui placeholder"> <div class="line"></div> <div class="line"></div> </div> </center> </body> </html>
Producción:
Contenido de líneas de marcador de posición de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, usaremos el marcador de posición de varias líneas, observe una cosa si usamos la etiqueta br, entonces la línea se convertirá en un párrafo y parecerá que una sección se coloca como marcador de posición.
HTML
<!DOCTYPE html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Stackable Content </strong> <br /><br /> <strong>Placeholde Lines Content:</strong> <div class="ui placeholder"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <br /> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </center> </body> </html>
Producción:
Contenido de líneas de marcador de posición de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/placeholder.html#lines
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA