La interfaz de usuario semántica es un marco que se utiliza para crear una excelente interfaz de usuario. Es un marco de código abierto que utiliza CSS y jQuery. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Los elementos de la lista de IU semántica se utilizan para mostrar el grupo de datos relacionados bajo el mismo tipo. La variación de tamaño de lista de interfaz de usuario semántica se utiliza para agregar diferentes tamaños de elementos de lista.
Clases utilizadas de variación de tamaño de lista de interfaz de usuario semántica:
- mini: esta clase se utiliza para mostrar la lista de tamaños mini.
- tiny: esta clase se utiliza para mostrar la lista de tamaños pequeños.
- pequeño: Esta clase se utiliza para mostrar la lista de tamaños pequeños.
- medium: Esta clase se utiliza para mostrar la lista de tamaños medianos.
- grande: esta clase se utiliza para mostrar la lista de tamaños grandes.
- big: Esta clase se utiliza para mostrar la lista de tamaños grandes.
- enorme: esta clase se utiliza para mostrar la lista de tamaños enormes.
- masivo: esta clase se utiliza para mostrar la lista de tamaños masivos.
Sintaxis:
<div class="ui Size-Variation-Used-Class list">
...
</div>
Ejemplo 1: en este artículo, describiremos la variación del tamaño de la lista de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Size 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 Size Variation</h3> <div class="ui mini horizontal list"> <div class="item">GeeksforGeeks</div> <div class="item">Data Structure</div> <div class="item">Algorithm</div> </div> <br> <div class="ui tiny horizontal list"> <div class="item">GeeksforGeeks</div> <div class="item">Data Structure</div> <div class="item">Algorithm</div> </div> <br> <div class="ui small horizontal list"> <div class="item">GeeksforGeeks</div> <div class="item">Data Structure</div> <div class="item">Algorithm</div> </div> <br> <div class="ui large horizontal list"> <div class="item">GeeksforGeeks</div> <div class="item">Data Structure</div> <div class="item">Algorithm</div> </div> <br> <div class="ui big horizontal list"> <div class="item">GeeksforGeeks</div> <div class="item">Data Structure</div> <div class="item">Algorithm</div> </div> <br> <div class="ui huge horizontal list"> <div class="item">GeeksforGeeks</div> <div class="item">Data Structure</div> <div class="item">Algorithm</div> </div> <br> <div class="ui massive horizontal list"> <div class="item">GeeksforGeeks</div> <div class="item">Data Structure</div> <div class="item">Algorithm</div> </div> </div> </body> </html>
Producción:
Variación del tamaño de la lista de la interfaz de usuario semántica
Ejemplo 2: en este artículo, describiremos la variación del tamaño de la lista de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Size 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 center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Size Variation</h3> <div class="ui mini horizontal list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="content"> <div class="header">GeeksforGeeks</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"> <div class="header">HTML</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"> <div class="header">CSS</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"> <div class="header">JavaScript</div> </div> </div> </div> <br> <div class="ui tiny horizontal list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="content"> <div class="header">GeeksforGeeks</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"> <div class="header">HTML</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"> <div class="header">CSS</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"> <div class="header">JavaScript</div> </div> </div> </div> <br> <div class="ui small horizontal list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="content"> <div class="header">GeeksforGeeks</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"> <div class="header">HTML</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"> <div class="header">CSS</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"> <div class="header">JavaScript</div> </div> </div> </div> <br> <div class="ui large horizontal list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="content"> <div class="header">GeeksforGeeks</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"> <div class="header">HTML</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"> <div class="header">CSS</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"> <div class="header">JavaScript</div> </div> </div> </div> <br> <div class="ui big horizontal list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="content"> <div class="header">GeeksforGeeks</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"> <div class="header">HTML</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"> <div class="header">CSS</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"> <div class="header">JavaScript</div> </div> </div> </div> <br> <div class="ui huge horizontal list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="content"> <div class="header">GeeksforGeeks</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"> <div class="header">HTML</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"> <div class="header">CSS</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"> <div class="header">JavaScript</div> </div> </div> </div> <br> <div class="ui massive horizontal list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="content"> <div class="header">GeeksforGeeks</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"> <div class="header">HTML</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"> <div class="header">CSS</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"> <div class="header">JavaScript</div> </div> </div> </div> </div> </body> </html>
Producción:
Variación del tamaño de la lista de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/list.html#size