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. El grupo de botones de ancho uniforme se utiliza para crear un contenedor de grupos de botones de ancho completo. Los botones ocupan automáticamente el ancho en función del número total de botones del grupo. En este artículo, discutiremos el grupo de ancho uniforme de botón en Foundation CSS.
Clase de grupo de ancho uniforme del botón CSS básico:
- expandido: esta clase se usa para hacer un contenedor expandido de ancho completo. Da automáticamente ancho a los botones en función del número total de botones en el grupo de botones.
Sintaxis:
<div class="expanded button-group">
.....
</div>
Ejemplo 1: el siguiente código muestra un grupo de botones de ancho uniforme usando botones de clase principal .
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> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Even-width Group</h3> <div class="expanded button-group"> <a class="button"> Button 1 </a> <a class="button"> Button 2 </a> <a class="button"> Button 3 </a> </div> </center> </body> </html>
Producción:
botones de clase primaria
Ejemplo 2: El siguiente código muestra un grupo de botones de ancho uniforme usando diferentes clases 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> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Even-width Group</h3> <div class="expanded button-group"> <a class="button"> Button 1 </a> <a class="button"> Button 2 </a> </div> <div class="expanded button-group"> <a class="success button"> Success 1 </a> <a class="success button"> Success 2 </a> <a class="success button"> Success 3 </a> </div> <div class="expanded 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> </center> </body> </html>
Producción:
diferentes clases de botones
Referencia: https://get.foundation/sites/docs/button-group.html#even-width-group
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA