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.
La variación dividida de lista de interfaz de usuario semántica se utiliza para agregar la división entre el contenido de los elementos de la lista. Para agregar la división dentro de los elementos de la lista, usaremos la clase dividida .
Lista de IU semántica Clase dividida de variación dividida:
- dividido: esta clase se utiliza para agregar división entre el contenido de los elementos de la lista.
Sintaxis:
<div class="ui divided list">
<div class="item">
...
</div>
...
</div>
Ejemplo 1: este ejemplo describe los usos de la variación dividida de lista de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Divided 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 Divided Variation</h3> <div class="ui divided 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 dividida de lista de interfaz de usuario semántica
Ejemplo 2: este ejemplo describe los usos de la variación dividida de lista de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Divided 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 Divided Variation</h3> <div class="ui middle aligned divided 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 articles... </div> </div> </div> <div class="item"> <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"> <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"> <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 dividida de lista de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/list.html#divided