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. Foundation CSS Container contiene funciones como la creación de un modelo anidado modal simple, barras de título como un menú desplegable, transición fuera del lienzo y muchas más funciones que hacen un contenedor bonito.
La lista completa de Foundation CSS Container se enumera a continuación:
- Fundación CSS Acordeón
- Conceptos básicos del acordeón Foundation CSS
- Opciones avanzadas de Foundation CSS Accordion
- Foundation CSS Acordeón y URL
- Base CSS Accordion Sass Referencia
- Base CSS Accordion Referencia de JavaScript
- Llamada CSS básica
- Conceptos básicos de llamadas de CSS de Foundation
- Fundación CSS llamada para colorear
- Tamaño de llamada de CSS básico
- Base CSS Callout Sass Referencia
- Tarjeta CSS de la Fundación
- Conceptos básicos de la tarjeta Foundation CSS
- Tamaño básico de la tarjeta CSS
- Base CSS Tarjeta Sass Referencia
- Desplegable de CSS básico
- Conceptos básicos del menú desplegable de Foundation CSS
- Posicionamiento desplegable de Foundation CSS
- Posicionamiento explícito desplegable de Foundation CSS
- Base CSS Desplegable Sass Referencia
- Referencia de JavaScript desplegable de Foundation CSS
- Objeto de medios CSS básico
- Conceptos básicos de objetos de medios de Foundation CSS
- Alineación de la sección de objetos de medios CSS de Foundation
- Base CSS Media Object Sass Referencia
- Fundación CSS fuera del lienzo
- Instalación fuera del lienzo de Foundation CSS
- Posición fuera del lienzo de CSS básico
- Direcciones fuera del lienzo de Foundation CSS
- Foundation CSS Off-canvas Paneles Múltiples
- Foundation CSS Transiciones fuera del lienzo
- Foundation CSS Off-canvas Reveal en pantallas más grandes
- Foundation CSS Off-canvas Combinación con barra de título
- Fundación CSS anidado fuera del lienzo
- Caja de desplazamiento fuera del lienzo de Foundation CSS
- Fundación CSS Off-canvas Sticky
- Foundation CSS Off-canvas Tamaños
- Base CSS Referencia de Sass fuera del lienzo
- Referencia de JavaScript fuera del lienzo de Foundation CSS
- Revelación básica de CSS
- Conceptos básicos de revelación de CSS básico
- Tamaño de revelación de CSS básico
- Fundación CSS Revelar modal anidado
- Fundación CSS Revelar pantalla completa
- Opciones avanzadas de Foundation CSS Reveal
- Fundación CSS Revelar Accesibilidad
- Fundación CSS Revelar Sass Referencia
- Fundación CSS Revelar referencia de JavaScript
- Tablas CSS básicas
- Pestañas CSS básicas
- Conceptos básicos de las pestañas CSS de Foundation
- Pestañas verticales de Foundation CSS
- Pestañas plegables de Foundation CSS
- Pestañas y URL de Foundation CSS
- Referencia de Sass de pestañas CSS de Foundation
- Referencia de JavaScript de las pestañas CSS de Foundation
- Pestañas de acordeón receptivas de Foundation CSS
- Foundation CSS Responsive Accordion Tabs Conceptos básicos
- Opciones del complemento de pestañas de acordeón adaptables a CSS de Foundation
- Foundation CSS Responsive Accordion Tabs Referencia de Sass
- Foundation CSS Responsive Accordion Tabs Referencia de JavaScript
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Tabs Basics</title> <!-- 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 Tabs Basics </h3> </center> <ul class="tabs" data-tabs id="tabs-basic"> <li class="tabs-title is-active"> <a href="#tabBasic1" aria-selected="true"> GFG Tab 1 </a> </li> <li class="tabs-title"> <a href="#tabBasic2"> GFG Tab 2 </a> </li> </ul> <div class="tabs-content" data-tabs-content="tabs-basic"> <div class="tabs-panel is-active" id="tabBasic1"> <div> <p style="color:green"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </p> </div> </div> <div class="tabs-panel" id="tabBasic2"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <button class="button secondary" type="button" data-toggle="dropdownBasic"> Click Dropdown </button> <div class="dropdown-pane" id="dropdownBasic" data-dropdown data-auto-focus="true"> <strong> GeeksforGeeks: </strong> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </div> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA