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 sin espacios se usa para eliminar el espacio de 1 px entre los botones. Cuando queremos usar el grupo de botones de una sola clase, es posible que queramos usar el grupo de botones sin espacio entre los botones. Para eliminar el espacio de 1 px entre los botones, usamos la clase sin espacios . En este artículo, discutiremos cómo eliminar los espacios entre los botones en Foundation CSS.
Clase Foundation CSS Button Group Sin brechas:
- sin espacios: esta clase se usa para eliminar el espacio de 1 px entre los botones.
Sintaxis:
<div class="button-group no-gaps">
.....
</div>
Ejemplo 1: el siguiente código muestra el grupo de botones sin espacios cuando se usa la 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> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Group No Gaps</h3> <div class="primary button-group no-gaps"> <a class="button"> Button 1 </a> <a class="button"> Button 2 </a> <a class="button"> Button 3 </a> <a class="button"> Button 4 </a> <a class="button"> Button 5 </a> </div> </body> </html>
Producción:
Ejemplo 2: el código siguiente muestra un grupo de botones sin espacios cuando se usan estilos huecos e individuales .
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 No Gaps</h3> <strong> When using <i>hollow</i> style </strong> <div class="primary button-group no-gaps hollow"> <a class="button"> Button 1 </a> <a class="button"> Button 2 </a> <a class="button"> Button 3 </a> <a class="button"> Button 4 </a> <a class="button"> Button 5 </a> </div> <strong> When using <i>individual</i> styles </strong> <div class="button-group no-gaps"> <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:
Referencia: https://get.foundation/sites/docs/button-group.html#no-gaps
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA