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. La mejor parte de este marco es que crea diseños hermosos y receptivos, ya que contiene componentes semánticos preconstruidos.
Una lista es un componente integral de nuestro sitio web. Es una manera fácil de mostrar una lista de elementos que muchas veces es necesario para nuestro sitio web. Se utiliza para agrupar contenidos que están relacionados entre sí.
Tipos de lista de IU semántica: hay cuatro tipos de listas en la IU semántica.
- Lista: Es una lista que agrupa el contenido relacionado.
- Ordenada : Una lista que está ordenada en números.
- Con viñetas : una lista cuyo contenido está marcado con una viñeta.
- Enlace : una lista que está formateada para tener enlaces de navegación.
Sintaxis:
<div class="ui ordered list">
La sintaxis para los otros tipos de listas es la misma y la única diferencia es el nombre de la lista que será reemplazada.
Ejemplo 1: El siguiente programa demostrará el uso del tipo de lista y el tipo ordenado.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI List Types</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <br> <div class="ui green huge header">GeeksforGeeks</div> <div class="ui large header">Semantic-UI List Types</div> <div class="ui medium header">List</div> <!--Heading--> <div class="ui list"> <!--Creating List--> <div class="item"> Cricket </div> <div class="item"> Football </div> <div class="item"> Tennis </div> </div> <div class="ui medium header">Ordered List</div> <!--Heading--> <div class="ui ordered list"> <!--Creating Ordered List--> <div class="item"> Cricket </div> <div class="item"> Football </div> <div class="item"> Tennis </div> </div> </body> </html>
Producción:
Tipos de lista de IU semántica
Ejemplo 2: El siguiente programa demostrará el uso del tipo con viñetas y el tipo de vínculo.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI List Types</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <br> <div class="ui green huge header">GeeksforGeeks</div> <div class="ui large header">Semantic-UI List Types</div> <div class="ui medium header">Bulleted List</div> <!--Heading--> <div class="ui bulleted list"> <!--Creating Bulleted List--> <div class="item"> Thomas </div> <div class="item"> Arthur </div> <div class="item"> John </div> <div class="item"> Micheal </div> </div> <div class="ui medium header">Link List</div> <!--Heading--> <div class="ui link list"> <!--Creating Link List--> <div class="active item"> Thomas </div> <div class="item"> Arthur </div> <div class="item"> John </div> <div class="item"> Micheal </div> </div> </body> </html>
Producción»
Tipos de lista de IU semántica
Referencia: https://semantic-ui.com/elements/list.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA