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 General se usa para administrar cosas generales como el posicionamiento de la etiqueta del formulario y el botón de carga, y esta clase tiene muchas características para el contenedor de cuadrícula similar a una cuadrícula XY, la cuadrícula vertical/horizontal XY, el tamaño automático de la cuadrícula XY, etc.
La lista completa de Foundation CSS General se enumera a continuación:
- Base CSS Cuadrícula XY
- Importación de la cuadrícula XY de Foundation CSS
- Canaletas de rejilla XY CSS de cimentación
- Contenedor de cuadrícula XY de Foundation CSS
- Foundation CSS XY Grid Tamaño automático
- Ajustes receptivos de la cuadrícula Foundation CSS XY
- Fundación CSS Cuadrícula XY Colapso de celdas
- Compensaciones de cuadrícula XY de Foundation CSS
- Cuadrículas de bloques XY de Foundation CSS
- Base CSS XY Cuadrículas verticales
- Base CSS Marco de cuadrícula XY
- Foundation CSS XY Grid Construir semánticamente
- Base CSS XY Grid Sass Referencia
- Rejilla flotante de CSS de base
- Importación de cuadrícula flotante de Foundation CSS
- Foundation CSS Float Grid Avanzado
- Foundation CSS Float Grid Construir semánticamente
- Base CSS Float Grid Sass Referencia
- Base CSS Flex Grid
- Fundación CSS Flex Grid Importación
- Foundation CSS Flex Grid Tamaño avanzado
- Ajustes receptivos de Foundation CSS Flex Grid
- Alineación de columnas de rejilla flexible CSS de cimentación
- Foundation CSS Flex Grid Contraer/descontraer filas
- Compensaciones de cuadrícula flexible CSS de base
- Bloque de cuadrícula flexible de CSS de base
- Fundación CSS Flex Sass Referencia
- Formularios CSS básicos
- Texto de ayuda de formularios CSS de Foundation
- Posicionamiento de etiquetas de formularios CSS básicos
- Foundation CSS Forms Etiquetas y botones en línea
- Botón de carga de archivo de formularios CSS de Foundation
- Controles personalizados de formularios CSS básicos
- Base CSS Formularios Sass Referencia
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> <title>Label Positioning</title> </head> <body> <center> <div> <div class="float-center"> <h2 style="color:green">GeeksforGeeks</h2> <h4> Foundation CSS Form </h4> </div> <form> <div class="grid-x" style="width: 40%; margin-top: px;"> <div class="small-2 cell"> <label for="input-label" class="text-left">Age: </label> </div> <div class="small-6 cell"> <input type="number" id="input-label" placeholder="Enter your Age"> </div> <div class="small-9 cell"> <label for="upload" class="button"> Upload Your File </label> <input type="file" id="upload" class="show-for-sr"> </div> </div> </center> </form> </div> </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