Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
La utilidad de flecha de creación de prototipos es una representación visual o icono que ayuda a navegar a diferentes páginas en un sitio web. Generalmente se usa como la flecha desplegable para la navegación.
Foundation CSS Prototyping Arrow Clase de utilidad:
flecha-*: esta clase se puede usar para señalar direcciones específicas.
La marca de estrella (*) se puede reemplazar especificando la dirección, es decir, abajo, derecha, arriba e izquierda.
Clases usadas:
- arrow-right: para mostrar una flecha de navegación hacia la derecha
- arrow-left: para mostrar una flecha de navegación izquierda
- flecha arriba: para mostrar una flecha de navegación apuntando hacia arriba
- flecha abajo: para mostrar una flecha de navegación apuntando hacia abajo
Ejemplo 1: en este ejemplo, aprenderemos sobre las utilidades de flecha hacia arriba y hacia abajo en Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <link crossorigin="anonymous" rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "https://get.foundation/sites/docs/assets/css/docs.css"> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3> Up and Down Arrow Utility </h3> <div class="arrow-up" style="border-width:2.4375em"> </div> <br> <div class="arrow-down" style="border-width:2.4375em"> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, aprenderemos sobre la utilidad de flecha derecha e izquierda y también les proporcionaremos algunos estilos.
HTML
<!DOCTYPE html> <html> <head> <link crossorigin="anonymous" rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "https://get.foundation/sites/docs/assets/css/docs.css"> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3> Right and Left Coloured Arrow Utility</h3> <div class="arrow-right" style="border-color:pink transparent transparent; border-width:2.4375em;border-right-width:0;"> </div> <br> <div class="arrow-left" style="border-color:blue transparent transparent; border-width:2.4375em;border-left-width:0;"> </div> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/prototyping-utilities.html#arrow-utility
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA