Foundation CSS 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. Este 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. Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. Palanca de fregadero de cocinase utiliza para alternar o animar cualquier elemento cuando hacemos clic en él. Usamos los atributos data-toggle y data-toggler para alternar el elemento con la ayuda de id . En este artículo, discutiremos Kitchen Sink Toggler en Foundation CSS.
Atributos del conmutador de fregadero de cocina Foundation CSS:
- data-toggle: este atributo tiene el valor de la identificación del elemento que queremos alternar.
- data-toggler: este atributo se usa para alternar la clase dada.
Sintaxis:
<p><a data-toggle="toggle"> ... </a></p> <ul class="menu" id="toggle" data-toggler=".expanded"> .... </ul>
Ejemplo 1: El siguiente código demuestra el conmutador de fregadero de cocina Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Foundation CSS Kitchen Sink Toggler</h3> </center> <p> <a data-toggle="toggleThis">Toggle</a> </p> <ul class="menu" id="toggleThis" data-toggler=".expanded"> <li> <a href="#"> GFG1</a> </li> <li> <a href="#"> GFG2</a> </li> <li> <a href="#"> GFG3</a> </li> <li> <a href="#"> GFG4</a> </li> <li> <a href="#"> GFG5</a> </li> </ul> <script> $(document).foundation(); </script> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra el Conmutador de fregadero de cocina Foundation CSS con íconos e imágenes .
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Foundation CSS Kitchen Sink Toggler</h3> </center> <p> <a data-toggle="toggle1">Toggle</a> </p> <ul class="menu" id="toggle1" data-toggler=".expanded"> <li> <a href="#"> <i class="fa fa-pencil-square"></i> <span>GFG1</span> </a> </li> <li> <a href="#"> <i class="fa fa-pencil-square"></i> <span>GFG2</span> </a> </li> <li> <a href="#"> <i class="fa fa-pencil-square"></i> <span>GFG3</span> </a> </li> <li> <a href="#"> <i class="fa fa-pencil-square"></i> <span>GFG4</span> </a> </li> </ul> <p> <a data-toggle="toggle2">Toggle This</a> </p> <ul class="menu" id="toggle2" data-toggler=".expanded"> <li> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </li> <li> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </li> <li> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </li> <li> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </li> </ul> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#toggler
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