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. Utiliza una clase para agregar CSS a los elementos. Se utiliza un marcador de posición para reservar espacio para el contenido que pronto aparecerá en un diseño.
A continuación se muestran ejemplos de los diferentes tipos de marcadores de posición.
Ejemplo 1:
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>Placeholder</h2> <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 class="line"></div> <div class="line"></div> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Ejemplo 2:
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h3>Inline Card Placeholder</h3> <div class="ui four column grid"> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="short line"></div> <div class="medium line"></div> </div> <div class="paragraph"> <div class="large line"></div> <div class="medium line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="short line"></div> <div class="medium line"></div> </div> <div class="paragraph"> <div class="large line"></div> <div class="medium line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="short line"></div> <div class="medium line"></div> </div> <div class="paragraph"> <div class="large line"></div> <div class="medium line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="short line"></div> <div class="medium line"></div> </div> <div class="paragraph"> <div class="large line"></div> <div class="medium line"></div> </div> </div> </div> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Ejemplo 3: Este es el marcador de posición para Imagen.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h3>Placeholder for Images</h3> <div style="width: 150px;" class="ui placeholder"> <div class="image"></div> </div> <div style="width: 150px;" class="ui placeholder"> <div class="image"></div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Ejemplo 4: Esto es para los marcadores de posición invertidos.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h3>Inverted Placeholders</h3> <div class="ui inverted segment"> <div class="ui active inverted 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 class="ui inverted segment"> <div class="ui active inverted 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> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA