Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
Hay diferentes estilos de poner imágenes en nuestro sitio web usando semantic-ui que hacen que nuestro sitio web se vea más impresionante. Las variaciones con borde de imagen de interfaz de usuario semántica se utilizan para agregar bordes a bordes de contenido blanco o transparente.
Clase de variación con borde de imagen de interfaz de usuario semántica:
- bordered: esta clase se usa para agregar bordes en el borde del contenido de la imagen.
Sintaxis:
<img class="ui medium bordered image" src="gfg.png">
Ejemplo 1: en este ejemplo, utilizaremos las variaciones de borde de imagen de interfaz de usuario semántica para agregar bordes en los bordes de la imagen.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Bordered Variations </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Image Bordered Variations</h3> <img class="ui mini centered bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> <br> <img class="ui tiny centered bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> <br> <img class="ui small centered bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> <br> <img class="ui medium centered bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> <br> <img class="ui large centered bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> <div style="padding-bottom: 400px;"></div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, usaremos variaciones bordeadas de imagen de interfaz de usuario semántica con variaciones circulares para agregar bordes en los bordes de la imagen.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Bordered Variations </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Image Bordered Variations</h3> <img class="ui mini centered circular bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> <br> <img class="ui tiny centered circular bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> <br> <img class="ui small centered circular bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> <br> <img class="ui medium centered circular bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> <br> <img class="ui large centered circular bordered image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> <div style="padding-bottom: 400px;"></div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/image.html#bordered
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA