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.
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, en celdas y de tamaño. Semantic-UI List Relaxed Variation list se usa para relajar su relleno que proporciona más espacio negativo dentro de los elementos de la lista.
Clase de variación relajada de lista de interfaz de usuario semántica:
- relajado: esta clase se usa para crear una lista relajada de elementos que proporciona más espacio negativo dentro de los elementos de la lista.
Sintaxis:
<div class="ui relaxed list">
<div class="item">
...
</div>
...
</div>
Ejemplo 1: este ejemplo describe los usos de la variación relajada de la lista de IU semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Relaxed Variation </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 Relaxed Variation</h3> <div class="ui relaxed list"> <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">GeeksforGeeks</a> <div class="description"> A Computer Science portal for geeks. It contains well written, well thought and well explained articles... </div> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> <div class="content"> <a class="header">HTML</a> <div class="description"> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. </div> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> <div class="content"> <a class="header">CSS</a> <div class="description"> CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. </div> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png"> <div class="content"> <a class="header">JavaScript</a> <div class="description"> JavaScript is the world most popular lightweight, interpreted compiled programming language. </div> </div> </div> </div> </div> </body> </html>
Producción:
Variación relajada de la lista de IU semántica
Ejemplo 2: este ejemplo describe los usos de la variación relajada de la lista de IU semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Relaxed Variation </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 Relaxed Variation</h3> <div class="ui relaxed list"> <div class="item"> <i class="tags icon"></i> <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 articles... </div> </div> </div> <div class="item"> <i class="user secret icon"></i> <div class="content"> <a class="header">HTML</a> <div class="description"> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. </div> </div> </div> <div class="item"> <i class="thumbtack icon"></i> <div class="content"> <a class="header">CSS</a> <div class="description"> CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. </div> </div> </div> <div class="item"> <i class="pen square icon"></i> <div class="content"> <a class="header">JavaScript</a> <div class="description"> JavaScript is the world most popular lightweight, interpreted compiled programming language. </div> </div> </div> </div> </div> </body> </html>
Producción:
Variación relajada de la lista de IU semántica
Referencia: https://semantic-ui.com/elements/list.html#relaxed