Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
El botón Cerrar se utiliza para proporcionar una opción para descartar o cerrar el componente. Es un elemento <button> con la clase .close-button. El símbolo de multiplicación (×) se utiliza como icono gráfico (X). Este icono se declara dentro del elemento <span> con el atributo aria-hidden=”true”. El atributo aria-label etiquetado con un botón se puede usar para aclarar cuál es el propósito del botón.
Clase de botón de cierre de Foundation CSS:
- callout : Se utiliza para crear el callout para poner cualquier tipo de contenido.
- close-button : esta clase se utiliza para crear un botón de cierre en la pantalla.
Sintaxis :
<div class="callout">
<button class="close-button" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
Ejemplo : este ejemplo describe el botón Cerrar de Foundation CSS.
HTML
<html>
<head>
<title>
Foundation CSS Close Button
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css" />
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>Foundation CSS Close Button</h2>
<p>
Click on the "x" symbol to the right
of the list item to close/hide it.
</p>
<ul>
<div class="callout">
<button class="close-button"
aria-label="Close alert"
type="button">
<span aria-hidden="true">×</span>
</button>
<p>This is an example of close button!</p>
</div>
</ul>
<script>
var closebtns =
document.getElementsByClassName("close-button");
var i;
for(i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = "none";
});
}
</script>
</body>
</html>
Salida :
Ejemplo : este ejemplo describe el botón de cierre múltiple de Foundation CSS.
HTML
<html>
<head>
<title>Foundation CSS Close Button</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css" />
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>Foundation CSS Close Button</h3>
<p>
Click on the "x" symbol to the
right of the list item to close/hide it.
</p>
<ul>
<div class="callout">
<button class="close-button"
aria-label="Close alert"
type="button">
<span aria-hidden="true">×</span>
</button>
<p>Fruits</p>
</div>
<div class="callout">
<button class="close-button"
aria-label="Close alert"
type="button">
<span aria-hidden="true">×</span>
</button>
<p>Vegetables</p>
</div>
<div class="callout">
<button class="close-button"
aria-label="Close alert"
type="button">
<span aria-hidden="true">×</span>
</button>
<p>Grocery</p>
</div>
<div class="callout">
<button class="close-button"
aria-label="Close alert"
type="button">
<span aria-hidden="true">×</span>
</button>
<p>Stationery</p>
</div>
</ul>
<script>
var closebtns =
document.getElementsByClassName("close-button");
var i;
for(i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = "none";
});
}
</script>
</body>
</html>
Salida :
Referencia: https://get.foundation/sites/docs/close-button.html
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA