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 espaciadas de imagen de interfaz de usuario semántica se utilizan para especificar que necesita un espacio adicional para separarlo del contenido cercano.
Clase de variación espaciada de imagen de interfaz de usuario semántica:
- espaciado: se utiliza para agregar espacio adicional para separarlo del contenido cercano.
Sintaxis:
<div class="ui segment"> <p>Content <img class="ui spaced image" src="..."> ...</p> </div>
Ejemplo 1: En este ejemplo, describiremos las variaciones espaciadas de imagen de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Spaced 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 Spaced Variations</h3> </div> <div class="ui segment container"> <p> Web Technology <img class="ui mini spaced image" src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages. Web browsers can be defined as programs that display text, data, pictures, animation, and video on the Internet. Hyperlinked resources on the World Wide Web can be accessed using software interfaces provided by Web browsers. </p> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, describiremos las variaciones espaciadas de imagen de interfaz de usuario semántica con variación de tamaño.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Spaced 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 Spaced Variations</h3> </div> <div class="ui segment container"> <p> Web Technology <img class="ui mini spaced image" src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages. Web browsers can be defined as programs that display text, data, pictures, animation, and video on the Internet. <img class="ui small circular spaced image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> Hyperlinked resources on the World Wide Web can be accessed using software interfaces provided by Web browsers. </p> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/image.html#spaced
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA