Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos las clases de diseño de componentes de utilidades de creación de prototipos en Foundation CSS.
En Foundation CSS, Prototyping Utilities Components Styling se utiliza para dar estilo a los componentes al agregarles radio, borde y sombra. Se utiliza principalmente con tarjetas, tablas, botones, imágenes, etc.
Foundation CSS Prototyping Utilities Clases de diseño de componentes:
- redondeado: esta clase se puede usar para dar la esquina redondeada al componente.
- sombra: esta clase se puede utilizar para dar la sombra al componente.
- bordered: esta clase se puede usar para dar el borde al componente
- radio: esta clase se puede usar para dar el radio al componente.
- interruptor: esta clase se puede usar para crear un interruptor.
- switch-input: esta clase se puede usar para agregar cualquier estilo a la entrada.
- switch-paddle: esta clase se puede usar para agregar cualquier estilo al fondo y la paleta del interruptor.
Sintaxis:
<div class="bordered || radius || rounded ||
shadow || switch">
<input class="switch-input">
<label class="switch-paddle"></label>
...
</div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de estilos de componentes de utilidades de creación de prototipos utilizando clases de radio, bordeado , redondeado y sombra .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Component Styling</title> <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <!-- foundation-rtl.min.css: Compressed CSS with right-to-left reading direction --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous"> </head> <body style="margin: 10rem;"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Foundation CSS Component Styling</h3> <button type="button" class= "button radius bordered shadow primary"> GfG-Primary </button> <button type="button" class= "button radius rounded shadow success"> GfG-Success </button> <button type="button" class= "button radius bordered shadow warning"> GfG-Warning </button> </center> </body> </html>
Producción:
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de estilos de componentes de prototipos de utilidades utilizando las clases switch, switch-input y switch-paddle .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Component Styling</title> <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <!-- foundation-rtl.min.css: Compressed CSS with right-to-left reading direction --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous"> </head> <body style="margin: 10rem;"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Foundation CSS Component Styling</h3> <div class="switch rounded"> <input class="switch-input" id="gfg" type="checkbox" name="gfg"> <label class="switch-paddle" for="gfg"></label> </div> </center> </body> </html>
Producción:
Enlace de referencia: https://get.foundation/sites/docs/prototyping-utilities.html#component-styling
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA