A Foundation es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos , que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
En este artículo, aprenderemos sobre el estilo de la lista de utilidades de creación de prototipos CSS básicos.
¿Qué son las utilidades de creación de prototipos?
Realice prototipos de diseños y UI rápidamente con Prototyping Utilities de Foundation. Estas clases y combinaciones opcionales son excelentes para convertir rápidamente bocetos y maquetas en prototipos codificados.
¿Qué es una utilidad de estilo de lista?
Esta utilidad ayuda a dar cierto estilo a las listas.
Esto admite dos tipos de listas.
- Lista ordenada: una lista ordenada define una lista de elementos en la que el orden de los elementos es importante. Una lista ordenada también se llama lista de números. La ordenación viene dada por un esquema de numeración, utilizando números arábigos, letras, números romanos.
Clases de lista ordenada:
- sin viñetas: se utiliza para establecer una lista sin viñetas que está habilitada de forma predeterminada.
- list-decimal: se utiliza para establecer una lista con números decimales, es decir, 1,2,3
- list-lower-alpha: Se utiliza para establecer una lista con a,b,c,d, etc.
- list-lower-latin: Se utiliza para establecer una lista con a,b,c,d, etc.
- list-lower-roman: Se utiliza para establecer una lista con i, ii, iii, iv, etc.
- list-upper-alpha: Se utiliza para establecer una lista con A, B, C, D, etc.
- list-upper-latin: Se utiliza para establecer una lista con A, B, C, D, etc.
- list-upper-roman: Se utiliza para establecer una lista con I, II, III, IV, etc.
Sintaxis:
<olclass="no-bullet">...</ol>
Nota: En la sintaxis anterior, reemplace el nombre de la clase según sea necesario.
- Lista desordenada: una lista desordenada define una lista de elementos en la que el orden de los elementos no existe. También se conoce como lista con viñetas. En una lista desordenada, cada elemento de la lista se define mediante la etiqueta <li> .
Clases de lista desordenada:
- sin viñetas: se utiliza para establecer una lista sin viñetas que está habilitada de forma predeterminada.
- list-disc: se utiliza para establecer un círculo relleno para el marcador de lista.
- list-circle: se utiliza para establecer un círculo para el marcador de lista.
- list-square: Se utiliza para establecer un cuadrado para el marcador de lista.
Sintaxis:
<ul class="list-disc">...</ul>
Habilitación de la utilidad de estilo de fuente:
Sintaxis:
@include foundation-prototype-list-style-type;
Ejemplo 1: En este ejemplo; aprenderemos a usar diferentes clases de una lista ordenada .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation Template</title> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css"> <link rel="stylesheet" href= "https://get.foundation/sites/docs/assets/css/docs.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Ordered Lists</h3> <h5 style="color:red">No Bullet</h5> <ol class="no-bullet"> <li>Apple</li> <li>Orange</li> <li>Guava</li> </ol> <h5 style="color:red">List-Decimal</h5> <ol class="list-decimal"> <li>Banana</li> <li>Pineapple</li> <li>Cherry</li> </ol> <h5 style="color:red">List-Lower-Alpha</h5> <ol class="list-lower-alpha"> <li>Strawberry</li> <li>Grapes</li> <li>Melon</li> </ol> <h5 style="color:red">List-Lower-Latin</h5> <ol class="list-lower-latin"> <li>Water-melon</li> <li>Litchi</li> <li>Kiwi</li> </ol> <h5 style="color:red">List-Lower-Roman</h5> <ol class="list-lower-roman"> <li>Dragon-Fruit</li> <li>Mango</li> <li>Apricots</li> </ol> <h5 style="color:red">List-Upper-Alpha</h5> <ol class="list-upper-alpha"> <li>Avacadoes</li> <li>Lemon</li> <li>Pear</li> </ol> <h5 style="color:red">List-Upper-Latin</h5> <ol class="list-upper-latin"> <li>Mandarins</li> <li>Dates</li> <li>Raspberry</li> </ol> <h5 style="color:red">List-Upper-Roman</h5> <ol class="list-upper-roman"> <li>Gooseberry</li> <li>Bore</li> <li>Peaches</li> </ol> </body> </html>
Producción:
Ejemplo 2: En este ejemplo; aprenderemos a usar diferentes clases de una lista desordenada.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation Template</title> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css"> <link rel="stylesheet" href= "https://get.foundation/sites/docs/assets/css/docs.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>UnOrdered Lists</h3> <h5 style="color:red">No Bullet</h5> <ul class="no-bullet"> <li>Apple</li> <li>Orange</li> <li>Guava</li> </ul> <h5 style="color:red">List-Disc</h5> <ul class="list-disc"> <li>Banana</li> <li>Pineapple</li> <li>Cherry</li> </ul> <h5 style="color:red">List-Circle</h5> <ul class="list-circle"> <li>Strawberry</li> <li>Grapes</li> <li>Melon</li> </ul> <h5 style="color:red">List-Square</h5> <ul class="list-square"> <li>Water-melon</li> <li>Litchi</li> <li>Kiwi</li> </ul> </body> </html>
Producción:
Enlace de referencia: https://get.foundation/sites/docs/prototyping-utilities.html#list-styling
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA