Foundation CSS Setup incluye consultas de medios predeterminadas que incluyen funciones de medios como ancho, alto, color y visualización del contenido según la resolución de pantalla especificada y Global Style Colors es la paleta de colores predeterminada que está disponible para Foundation CSS.
La lista completa de la configuración de Foundation CSS se enumera a continuación:
- Estilos globales CSS básicos
- Tamaño de fuente de estilo global de Foundation CSS
- Colores de estilo global CSS de base
- Compatibilidad de derecha a izquierda de Foundation CSS
- Modo Flexbox de CSS básico
- Modo de habilitación de Foundation CSS Flexbox
- Componentes compatibles con el modo Foundation CSS Flexbox
- Base CSS Modo Flexbox Sass Referencia
- Fundación CSS Sass
- Compatibilidad con Foundation CSS Sass
- Fundación CSS JavaScript
- Instalación e inicialización de JavaScript de Foundation CSS
- Foundation CSS JavaScript usando complementos
- Complementos de configuración de JavaScript de Foundation CSS
- Foundation CSS JavaScript Uso programático
- Eventos básicos de JavaScript CSS
- Utilidades básicas de JavaScript CSS
- Instalación de la utilidad Foundation CSS JavaScript
- Utilidades de la caja de JavaScript CSS de Foundation
- Utilidades de teclado JavaScript de Foundation CSS
- Fundación CSS JavaScript MediaQuery Utilidades
- Foundation CSS JavaScript Utilidades de movimiento y movimiento
- Utilidad de temporizador de JavaScript de Foundation CSS
- Fundación CSS JavaScript Utilidad ImageLoader
- Fundación CSS JavaScript Utilidad táctil
- Foundation CSS JavaScript Triggers Utilidades
- Utilidad de acelerador JavaScript de Foundation CSS
- Foundation CSS JavaScript Utilidades misceláneas
- Consultas de medios CSS de la Fundación
- Consultas de medios predeterminadas de Foundation CSS
- Foundation CSS Media Queries Cambiar los puntos de interrupción
- Fundación CSS Consultas de medios Sass
- Fundación CSS Consultas de medios JavaScript
- Foundation CSS Consultas de medios Sass Reference
- Foundation CSS Media Queries Referencia de JavaScript
El siguiente ejemplo le dará una breve idea sobre la configuración de Foundation CSS:
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Global Style Colors</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/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Foundation CSS Global Style Colors</h3> <br/> <div class="panel callout primary"> Primary </div> <div class="panel callout secondary"> Secondary </div> <div class="panel callout success"> Success </div> <div class="panel callout warning"> Warning </div> <div class="panel callout alert"> Alert </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Configuración básica de CSS
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