Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y Javascript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Los botones son uno de los elementos de interfaz de usuario más comunes. Podemos crear un botón usando la clase de botón y usar la clase de grupo de botones para crear un elemento de grupo de botones. Button Group Coloring se utiliza para dar colores a los botones. Los botones se pueden colorear usando clases secundarias, de éxito, de advertencia y de alerta . En este artículo, aprenderemos sobre la coloración de grupos de botones en Foundation CSS.
Clases de coloración grupales de Foundation CSS Button:
- primario: esta clase se utiliza para establecer el color del botón en el color primario de la paleta. El color primario es el azul.
- secundario: esta clase se utiliza para establecer el color del botón en el color secundario de la paleta. El color secundario es el gris.
- éxito: esta clase se utiliza para establecer el color del botón en el color de éxito de la paleta. El color del éxito es el verde.
- alerta: esta clase se utiliza para establecer el color del botón en el color de alerta de la paleta. El color de alerta es rojo.
- advertencia: esta clase se utiliza para establecer el color del botón en el color de advertencia de la paleta. El color de advertencia es amarillo.
Sintaxis:
<a class="color-class button">...</a>
Ejemplo 1: el siguiente código muestra el coloreado de grupos de botones.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Group Coloring</h3> <div class="button-group"> <a class="primary button">Primary</a> <a class="secondary button">Secondary</a> <a class="success button">Success</a> <a class="warning button">Warning</a> <a class="alert button">Alert</a> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente código muestra el coloreado de grupos de botones con la misma clase . Todo el grupo de botones se puede colorear usando las mismas clases.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Group Coloring</h3> <strong>Primary Button Group Coloring:</strong> <div class="primary button-group"> <a class="button">Button 1</a> <a class="button">Button 2</a> </div> <strong>Secondary Button Group Coloring:</strong> <div class="secondary button-group"> <a class="button">Button 1</a> <a class="button">Button 2</a> </div> <strong>Success Button Group Coloring:</strong> <div class="success button-group"> <a class="button">Button 1</a> <a class="button">Button 2</a> </div> <strong>Warning Button Group Coloring:</strong> <div class="warning button-group"> <a class="button">Button 1</a> <a class="button">Button 2</a> </div> <strong>Alert Button Group Coloring:</strong> <div class="alert button-group"> <a class="button">Button 1</a> <a class="button">Button 2</a> </div> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/button-group.html#coloring
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA