Foundation CSS es el marco CSS front-end gratuito y de código abierto que se utiliza para crear sitios web, aplicaciones y correos electrónicos hermosos y con capacidad de respuesta que funcionan en cualquier tipo de dispositivo. Está escrito usando HTML, CSS y Javascript. Es utilizado por muchas empresas como Amazon, Facebook, Disney, etc. Utiliza el compilador Saas para un desarrollo más rápido y utiliza paquetes como Grunt y Libsass para una codificación y control rápidos.
Foundation CSS Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. El menú del fregadero de la cocina se usa para crear el menú con algunos elementos de la lista.
Clase Foundation CSS Kitchen Sink:
- menú: Se utiliza para crear el menú con algunos elementos.
Sintaxis:
<ul class="menu">
....
</ul>
Ejemplo 1: el siguiente código demuestra la clase de fregadero de cocina mediante el uso del archivo precompilado requerido de Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <strong> Foundation CSS Kitchen Sink Menu </strong> <ul class="menu"> <li><a href="#"><span>Item1</span></a></li> <li><a href="#"><span>Item2</span></a></li> <li><a href="#"><span>Item3</span></a></li> <li><a href="#"><span>Item4</span></a></li> </ul> </body> </html>
Producción:
Ejemplo 2: El siguiente código muestra la clase fregadero de la cocina junto con los íconos de font-awesome.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Foundation CSS Kitchen Sink Menu</h3> <ul class="menu"> <a class="active" href="#"> <i class="fa fa-fw fa-home"></i> Home </a> <a href="#"> <i class="fa fa-fw fa-search"></i> Search </a> <a href="#"> <i class="fa fa-fw fa-envelope"></i> Contact </a> <a href="#"> <i class="fa fa-fw fa-user"></i> Login </a> </ul> </body> </html>
Producción:
Enlace de referencia: https://get.foundation/sites/docs/kitchen-sink.html#menu
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA