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 del elemento de la lista de IU semántica se utiliza para agregar el contenido al elemento del elemento.
Clase de contenido de elemento de lista de IU semántica:
- elemento: esta clase se utiliza para crear elementos para elementos de lista.
Sintaxis:
<div class="ui list">
<div class="item"> .... </div>
....
</div
Ejemplo 1: en este ejemplo, estamos creando elementos de lista con el contenido de la lista.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic UI List Item 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 Item Content</h3> <div class="ui list"> <div class="=item">GeeksforGeeks</div> <div class="item">Data Structure</div> <div class="item">Algorithm</div> <div class="item">Interview Preparation</div> <div class="item">Competitive Programming</div> <div class="item">Machine Learning</div> <div class="item">Web Development</div> </div> </div> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, estamos creando elementos de lista horizontales con el contenido de la lista.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic UI List Item 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 Item Content</h3> <div class="ui horizontal list"> <div class="active item">GeeksforGeeks</div> <div class="item">Data Structure</div> <div class="item">Algorithm</div> <div class="item">Interview Preparation</div> <div class="item">Competitive Programming</div> <div class="item">Machine Learning</div> <div class="item">Web Development</div> </div> </div> </body> </html>
Producción:
Enlace de referencia: https://semantic-ui.com/elements/list.html#item