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 grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Utiliza una clase para agregar CSS a los elementos. Una lista es una forma excelente de agrupar un conjunto de elementos relacionados. Una lista ordenada se utiliza para agrupar un conjunto de elementos relacionados de manera ordenada. La interfaz de usuario semántica nos proporciona una lista de tipos ordenados con estilo de interfaz de usuario semántica. Echemos un vistazo a varias clases de tipos ordenados por lista.
Clases de tipos ordenados de lista de IU semántica:
- list: crea una lista de interfaz de usuario semántica estándar.
- ordenada: Agrupa la lista de manera organizada.
- elemento: crea un elemento de lista.
Sintaxis:
<div class="ui ordered list"> <a class="item">...</a> ... </div>
Ejemplo 1: en el siguiente ejemplo, hemos creado una lista ordenada de IU semántica estándar .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI List Ordered Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksForGeeks</h2> <h4>Semantic UI List Ordered Type</h4> <hr> <br /> <h3>Grocerry List</h3> <div class="ui ordered list"> <a class="item">Eggs</a> <a class="item">Honey</a> <div class="item"> <a>Vegetables</a> <div class="list"> <a class="item">Onions</a> <a class="item">Cabbage</a> <a class="item">Tomatoes</a> </div> </div> <div class="item"> <a>Meat</a> <div class="list"> <a class="item">Chicken</a> <a class="item">Fish</a> </div> </div> </div> </div> </body> </html>
Producción:
Lista estándar de tipo ordenado
Ejemplo 2: En el siguiente ejemplo, hemos creado una lista ordenada horizontal dividida en celdas.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI List Ordered Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksForGeeks</h2> <h4>Semantic UI List Ordered Type</h4> <hr> <br /> <h3>Grocerry List</h3> <div class="ui horizontal celled ordered list"> <a class="item">Eggs</a> <a class="item">Honey</a> <div class="item"> <a>Vegetables</a> <div class="list"> <a class="item">Onions</a> <a class="item">Cabbage</a> <a class="item">Tomatoes</a> </div> </div> <div class="item"> <a>Meat</a> <div class="list"> <a class="item">Chicken</a> <a class="item">Fish</a> </div> </div> </div> </div> </body> </html>
Producción:
Lista ordenada horizontal dividida en celdas
Referencias: https://semantic-ui.com/elements/list.html#ordered
Publicación traducida automáticamente
Artículo escrito por coder_srinivas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA