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.
La lista de interfaz de usuario semántica nos proporciona diferentes variaciones de la lista, como las variantes Horizontal, Invertida, de Selección, Animada, Relajada, Dividida, Celda y Tamaño. Aquí aprenderemos sobre la descripción de la lista de interfaz de usuario semántica El contenido se usa para agregar la descripción al elemento de la lista.
Lista de IU semántica Descripción Clase de contenido:
- descripción: esta clase se utiliza para agregar una descripción al elemento del elemento.
Sintaxis:
<div class="ui list">
<div class="item">
<div class="content">
<a class="header"> Header Content... </a>
<div class="description">
Description Content...
</div>
</div>
</div>
...
</div>
Ejemplo 1: en este ejemplo, estamos creando elementos de lista con el encabezado y el contenido de la descripción.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Description 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 Description Content</h3> <div class="ui list"> <div class="item"> <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"> <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"> <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"> <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:
Lista de IU semántica Descripción Contenido
Ejemplo 2: En este ejemplo, estamos creando elementos de lista con el encabezado y el contenido de la descripción.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Description 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 Description 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:
Lista de IU semántica Descripción Contenido
Referencia: https://semantic-ui.com/elements/list.html#description