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 flotantes de imagen de interfaz de usuario semántica se utilizan para colocar la imagen a la izquierda o a la derecha de otro contenido web.
Clases de variación flotante de imagen de interfaz de usuario semántica:
- left floated: Se utiliza para colocar la imagen a la izquierda del contenido.
- right floated: Se utiliza para colocar la imagen a la derecha del contenido.
Sintaxis:
<div class="ui segment">
<img class="ui small left floated image" src="gfg.png">
<p>Text Content...</p>
</div>
Ejemplo 1: En este ejemplo, utilizaremos Variaciones de imagen flotante para hacer flotar la imagen en los lados izquierdo y derecho.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Floated 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 Floated Variations</h3> <img class="ui left floated image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui circular right floated image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, utilizaremos Variaciones flotantes de imagen con contenido de texto para flotar la imagen en los lados izquierdo y derecho.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Floated 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 Floated Variations</h3> </div> <div class="ui container"> <img class="ui left floated image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <p> Web Technology 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> <br><br> <img class="ui circular right floated image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <p> Web Technology 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:
Referencia: https://semantic-ui.com/elements/image.html#floated
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA