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 hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Foundation CSS nos ofrece un Grupo de Botones donde se pueden agrupar botones de idéntica naturaleza. Foundation CSS permite que los botones en el grupo de botones se apilen verticalmente usando la clase .stacked . Echemos un vistazo a cómo lograrlo.
Clases de apilamiento del grupo de botones de Foundation CSS:
- stacked: apila los botones en el grupo de botones verticalmente.
- stacked-for-small: solo apila los botones en el grupo de botones verticalmente para pantallas más pequeñas.
- stacked-for-medium: solo apila los botones en el grupo de botones verticalmente para pantallas pequeñas y medianas.
Sintaxis:
<div class="Button-Group-Stacking-Classes button-group"> <a class="button">Button1</a> <a class="button">Button2</a> ... </div>
Ejemplo 1: En el siguiente ejemplo, hemos creado un grupo de botones simples apilados uno sobre otro verticalmente para pantallas estándar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Button Group Stacking</title>
<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>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
</head>
<body class="grid-x align-middle
align-center grid-container"
style="height: 95vh; width: 95vw">
<div>
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Button Group Stacking</h4>
<div class="stacked button-group">
<a class="button">Geeks</a>
<a class="button">For</a>
<a class="button">Geeks</a>
<a class="button">Is</a>
<a class="button">Awesome</a>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Apilamiento de grupo de botones de CSS básico
Ejemplo 2: En el siguiente ejemplo, creamos un grupo de botones simples apilados uno sobre otro verticalmente para pantallas medianas.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Button Group Stacking</title>
<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>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
</head>
<body class="grid-x align-middle
align-center grid-container"
style="height: 95vh; width: 95vw;">
<div>
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Button Group Stacking</h4>
<div class="stacked-for-medium button-group">
<a class="button">Geeks</a>
<a class="button">For</a>
<a class="button">Geeks</a>
<a class="button">Is</a>
<a class="button">Awesome</a>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Apilamiento de grupo de botones de CSS básico
Ejemplo 3: En el siguiente ejemplo, hemos creado un grupo de botones simples apilados uno sobre otro verticalmente para pantallas más pequeñas.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Button Group Stacking</title>
<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>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
</head>
<body class="grid-x align-middle
align-center grid-container"
style="height: 95vh; width: 95vw">
<div>
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Button Group Stacking</h4>
<div class="stacked-for-small button-group">
<a class="button">Geeks</a>
<a class="button">For</a>
<a class="button">Geeks</a>
<a class="button">Is</a>
<a class="button">Awesome</a>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Apilamiento de grupo de botones de CSS básico
Referencia: https://get.foundation/sites/docs/button-group.html#stacking
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA