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.
Hay diferentes estilos de poner imágenes en nuestra aplicación web usando la interfaz de usuario semántica para hacer que el sitio web se vea más impresionante. Puedes poner una imagen o un SVG.
Veamos algún ejemplo de cómo usar semantic-ui para poner imágenes.
Ejemplo: este ejemplo muestra una imagen simple usando semantic-ui.
HTML
<!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" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h1>Image</h1> <img class="ui small image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png"> </div> </body> </html>
Producción:
Ejemplo: Este ejemplo agregando un borde a la imagen.
HTML
<!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"> <h1>Bordered Image</h1> <img class="ui medium bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png"> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Puede ver el borde exactamente ejecutando el ejemplo en IDE.
Ejemplo: este ejemplo crea una imagen circular.
HTML
<!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"> <h1>Circular Bordered Image</h1> <img class="ui medium circular bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png"> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo: este ejemplo crea imágenes alineadas verticalmente.
HTML
<!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"> <h1>Vertically Aligned Images</h1> <img class="ui top aligned small image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png"> <p>Aligned at Top</p> <div class="ui divider"></div> <img class="ui middle aligned small image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png"> <p>Aligned at Middle</p> <div class="ui divider"></div> <img class="ui bottom aligned small image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png"> <p>Aligned at Bottom</p> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Nota: Puede agregar clase mini, pequeña, pequeña, mediana, grande, masiva para cambiar el tamaño. Puede ejecutar cualquiera de estos ejemplos haciendo clic en Ejecutar en IDE.
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA