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 diferentes elementos geniales para usar para hacer que su sitio web se vea más sorprendente. Utiliza una clase para agregar CSS a los elementos.
El contenido de la imagen de la lista de IU semántica se utiliza para agregar una imagen al elemento de la lista.
Contenido de la imagen de la lista de IU semántica:
- imagen: esta clase se utiliza para agregar una imagen al elemento de la lista.
Sintaxis:
<div class="ui list">
<div class="item">
<img class="ui image" src="">
....
</div>
</div>
Ejemplo 1: en este ejemplo, estamos creando elementos de lista con el contenido de la imagen del avatar.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Image Content </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Image Content</h3> <div class="ui list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> <div class="content"> <a class="header">GeeksforGeeks</a> <div class="description"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </div> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200819145636/icon.png"> <div class="content"> <a class="header">Data Structure</a> <div class="description"> A data structure is a particular way of organizing data in a computer so that it can be used effectively. </div> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="content"> <a class="header">Algorithm</a> <div class="description"> The word Algorithm means “a process or set of rules to be followed in calculations or other problem-solving operations”. </div> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"> <div class="content"> <a class="header">Web Development</a> <div class="description"> Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, ... </div> </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, estamos creando una lista de elementos con el contenido de la imagen.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Image Content </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Image Content</h3> <div class="ui list"> <div class="item"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" width="50px" height="50px"> <div class="content"> <a class="header">GeeksforGeeks</a> <div class="description"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </div> </div> </div> <div class="item"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200819145636/icon.png" width="50px" height="50px"> <div class="content"> <a class="header">Data Structure</a> <div class="description"> A data structure is a particular way of organizing data in a computer so that it can be used effectively. </div> </div> </div> <div class="item"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" width="50px" height="50px"> <div class="content"> <a class="header">Algorithm</a> <div class="description"> The word Algorithm means “a process or set of rules to be followed in calculations or other problem-solving operations”. </div> </div> </div> <div class="item"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png" width="50px" height="50px"> <div class="content"> <a class="header">Web Development</a> <div class="description"> Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, ... </div> </div> </div> </div> </div> </body> </html>
Producción:
Enlace de referencia: https://semantic-ui.com/elements/list.html#image